uniapp怎样统一loading图

什么是uniapp?

uniapp是一款基于Vue.js框架开发的全端开发工具，使用uniapp可以快速地将代码适配到不同的平台，例如H5、小程序、App、快应用等。这种跨端开发方式大大提高了开发效率，同时避免了重复的代码编写。uniapp还提供了丰富的组件和插件，非常适合开发移动端应用。

//下面是用vue-cli新建空项目后安装uniapp的命令
$ vue create -p dcloudio/uni-preset-vue my-project

为什么要统一loading图？

在移动端应用开发中，loading图是一个很常见的元素，通常在网络请求或相应操作时，会出现loading图提示用户等待。由于不同平台下loading的样式各不相同，如果每个页面都单独定义loading图，则会增加代码量，同时也会破坏封装性和可维护性。为了解决这个问题，我们需要一个统一的loading。

//用uniapp自带组件实现一个简单的loading

怎么统一loading图？

为了统一loading图，我们可以封装一个通用的loading组件，然后在需要的位置调用。以下是一个比较简单的方法：我们可以使用Vue.js的插件机制，在Vue实例上挂载loading函数和closeLoading函数，然后在需要的地方直接调用loading和closeLoading函数

//在vue项目的main.js中定义loading插件
import Loading from './components/Loading.vue'

const loadingPlugin = {
  install: function (Vue) {
    Vue.prototype.loading = function () {
      const loading = this.$loading({
        ...Loading.props,
        customClass: 'global-loading',
        text: 'Loading' //这里可以自定义loading文字
      })
      return loading
    }
    Vue.prototype.closeLoading = function (loading) {
      if (loading) {
        loading.close()
      } else {
        this.$nextTick(() => {
          const loading = document.querySelector('.global-loading')
          if (loading) {
            loading.close()
          }
        })
      }
    }
  }
}

//然后在vue实例中调用
import Vue from 'vue'
import App from './App.vue'

Vue.use(loadingPlugin)

new Vue({
  render: h => h(App)
}).$mount('#app')

如何应用统一loading图？

有了上面的方法，我们在需要使用loading的地方就可以非常简单地调用loading方法和closeLoading方法了。下面是一个示例：

import Vue from 'vue'

export default {
  methods: {
    async loadData () {
      //需要加载数据的时候
      const loading = Vue.prototype.loading() //调用loading方法开始loading
      try {
        const res = await this.$http('xxx') //假设是一个异步请求
        console.log(res.data)
      } catch (err) {
        console.log(err)
      }
      this.closeLoading(loading) //请求结束后调用closeLoading方法关闭loading
    }
  }
}