uni-app编译H5端、PC端、微信小程序、全局组件配置（不需要在components中定义）

uni-app编译H5端、PC端、微信小程序、全局组件配置（不需要在components中定义）

也不需要在页面中 像这样写一遍 对于H5可能没感觉 但小程序尤为繁琐

<loading ref="loading"/>

应用场景：全局自定义Loading加载状态、全局弹框等等

该方法不适合加载很复杂的逻辑以及组件详情，否则会造成页面卡顿以及小程序包体积增长;

H5\PC端

原理是通过找到HTML根标签body添加某个组件然后就不用在components中定义组件了

代码

//定义loading组件
<template>
	<view class="loading" v-show="loading" @touchmove.stop="false">
		<image class="img" src="../static/pageIcon/loading.gif" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		name:"loading",
		data() {
			return {
				
			};
		},
		computed:{
			loading:function(){
                //记得在vuex中定义loadingFlag
				return this.$store.state.loadingFlag;
			}
		}
	}
</script>

<style lang="less" scoped>
.loading{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    z-index: 10000;
	.img{
        width: 70px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		
	}
}
</style>

接下来项目目录创建一个loading.js文件

//导入组件
import Loading from "../components/loading.vue"
//定义模型
const loadingModal={
	install:function(Vue){
		const Msg = Vue.extend(Loading)
		const msg = new Msg()
		document.body.innerHTML += "<div id='loading'><div id='loading'></div></div>" 
		msg.$mount("#loading")
	}
}
//导出模型
export default loadingModal

最后一步我们在main.js中导入该js文件

//根据自己的文件位置导入
import loadingModal from "./utils/loading.js";
//挂载
Vue.use(loadingModal);


//全局使用mixin挂载两个方法用来控制loading的显示和隐藏
Vue.mixin({
    methods: {
		showLoading(){
			store.commit('set_LoadingFlag', true);
		},
		hideLoading(){
			store.commit('set_LoadingFlag', false);
		},
    }
});

使用

//显示
this.showLoading();
//隐藏
this.hideLoading();

微信小程序

小程序的因为根标签只有page标签页面更换page中的内容就会全部被换掉了
所以通过操作DOM元素插入组件这种方法无法实现，小程序可以通过webpack来实现原理是uni-app编译的时候通过微信小程序打开直接编译到每个页面

打开项目根目录输入cmd回车

 打开小黑板输入

npm install webpack@4.44.1

我这里使用的是4.44.1版本大家根据自己版本安装 如果已经安装可以忽略这一步

组件代码

//loading组件
<template>
	<view class="loading" v-show="loading" @touchmove.stop="false">
		<image class="img" src="../static/pageIcon/loading.gif" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		name:"loading",
		data() {
			return {
				
			};
		},
		computed:{
			loading:function(){
                //别忘记在vuex中定义loadingFlag
				return this.$store.state.loadingFlag;
			}
		}
	}
</script>

<style lang="less" scoped>
.loading{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10000;
	.img{
        width: 140rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
}
</style>

在项目根目录创建vue.config.js

vue.config.js代码

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')

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) => {
                //注意这里使用正则匹配到项目pages文件夹下所有页添加该组件
                //如果大家有分包的情况下 而分包也需要加载该组件 记得修改正则
				if (args[0].resourcePath.match(/^(pages|epermarketSub)/)) {
					template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
						<loading ref="loading"/>
					`)
				}
				return compile(template, ...args)
			}
			return options
		})
	}
}

修改完之后 也可以在main.js中使用mixin混入两个全局方法用来控制loading的显示和隐藏

//全局使用mixin挂载两个方法用来控制loading的显示和隐藏
Vue.mixin({
    methods: {
		showLoading(){
			store.commit('set_LoadingFlag', true);
		},
		hideLoading(){
			store.commit('set_LoadingFlag', false);
		},
    }
});

使用

//显示
this.showLoading();
//隐藏
this.hideLoading();

作者是小菜逼，对您有帮助麻烦点个关注，有什么不懂的欢迎私信！杠精勿扰