Uniapp微信小程序项目，当你有一个加载动画组件loading.vue，希望在整个项目任意地方调用，并且不想在每个页面都编写组件插槽＜loading＞＜/loading＞时，按照以下方法即可实现

1.创建components文件夹，编写loading.vue组件

定义showLoading用于展示加载动画，可自定义text属性显示加载提示文字

定义hideLoading用于关闭加载动画

<template>
  <view class="loading" v-if="isLoading">
    <!-- 此处编写加载动画 -->
  </view>
</template>

<script>

export default {
  data() {
    return {
      text: "",
      isLoading: false,
    };
  },
  methods: {
    showLoading(text) {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  
}
</style>

2.编写loading.js将其注册到全局 

import loading from './loading.vue';

export default {
  install(Vue) {
    Vue.component('loading', loading);
  },
};

3.在main.js中引入，实现全局注册，确保每个页面无需引入就可以直接编写组件插槽进行使用

import loading from "./components/loading/loading"

Vue.use(loading);

至此，在每个页面中只需要编写组件插槽
<loading ref="loading"></loading>
即可通过
this.$refs.loading.showLoading(text);打开加载动画
this.$refs.loading.hideLoading();关闭加载动画 

但如果有100个页面，就要编写一百次组件插槽

继续往下，即可实现一次编写，所有页面自动引入组件插槽

4.在vue.config.js中加入如下代码（没有可以自己创建）

module.exports = {
  chainWebpack: config => {
    config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
      const compile = options.compiler.compile
      options.compiler.compile = (template, ...args) => {
        if (args[0].resourcePath.match(/^pages/)) {
          template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
	        <loading ref="loading" />
	  `)
        }
        return compile(template, ...args)
      }
      return options
    })
  }
}

现在，你可以删除所有页面中的组件插槽了

5.如何在JS文件中直接调用（前提是至少有一个页面已经被加载）

封装一个message.js文件，通过获取页面栈的方式获取页面中的refs，从而直接调用loading组件中的方法，此方法必须确保至少有一个页面已经被加载，否则无法获取到当前页面栈，所以需要处理页面栈为空时，使用uni默认的加载动画

const loading = (message) => {
  uni.showLoading({
    title: message,
    mask: true,
  });
}

const hide = () => {
  uni.hideLoading();
}

const showLoading = (text) => {
  const pages = getCurrentPages();
  if (pages.length === 0) {
    loading(text);
    return;
  }
  let curPage = pages[pages.length - 1];
  curPage.$vm.$refs.loading.showLoading(text)
}

const hideLoading = () => {
  const pages = getCurrentPages();
  if (pages.length === 0) {
    hide();
    return;
  }
  let curPage = pages[pages.length - 1];
  curPage.$vm.$refs.loading.hideLoading()
}



export default {
  loading,
  hide,
  showLoading,
  hideLoading，
}

修改main.js，将message.js注册到全局

import message from "./common/js/message"

Vue.prototype.$message = message

6.在页面中和在JS中的调用示例

VUE页面示例：

//打开加载动画
this.$message.showLoading();

//-------逻辑代码-------//

//关闭加载动画
this.$message.hideLoading();

 JS文件示例：

//引入message
import message from "./message"

const request = () => {
    //打开加载动画    
    message.showLoading("加载中...");
    
    //-------逻辑代码-------//

    //关闭加载动画
    message.hideLoading();
}

export default {
  request
}

注意在逻辑代码中，必须处理所有异常情况，以确保形成闭环，否则页面会被加载动画一直遮挡