uniapp开发小程序实现全局弹窗,可在js中调用

一、效果图

二、背景

由于微信小程序API showModal 无法自定义样式，我们小程序的整体风格偏黑，所以不得不修改样式，但是我们的请求都进行了拦截，在拦截处弹出错误提示，在js中进行了showModal 的调用

三、实现步骤

1、安装插件vue-inset-loader

npm i vue-inset-loader

2、创建vue.config.js 文件

const path = require('path')
module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.vue$/,
				use: {
					loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
				},
			}]
		},
	}
}

3、创建全局组件

<template>
	<view class="modal" v-if="customShowModal.visible">
		<view class="modal-content">
			<view class="modal-header">
				<text>{{ customShowModal.title }}</text>
			</view>
			<view class="modal-body">
				<text>{{ customShowModal.content }}</text>
			</view>
			<view class="modal-footer">
				<view class="button_view cancel-btn " v-if="customShowModal.showCancel" @click="cancel">{{ customShowModal.cancelText }}</view>
				<view class="button_view confirm-btn" @click="confirm">{{ customShowModal.confirmText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(["customShowModal"])
		},
		methods: {
			show() {
				this.$store.commit("setCustomShowModal", {
					visible: true
				});
			},
			hide() {
				this.$store.commit("setCustomShowModal", {
					visible: false
				});
			},
			cancel() {
				this.customShowModal.cancelCallback();
				this.hide();
			},
			confirm() {
				this.customShowModal.sureCallback();
				this.hide();
			}
		}
	}
</script>

<style scoped>
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal-content {
		width: 90%;
		background-color: #ffffff;
		border-radius: 15px;
		overflow: hidden;
	}

	.modal-header {
		padding: 20px 15px 9px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		color: #000000;
	}

	.modal-body {
		padding: 10px 15px;
		text-align: center;
		font-size: 16px;
		color: #989292;
	}

	.modal-footer {
		display: flex;
		justify-content: center;
		border-top: 1px solid #e5e5e5;
	}

	.button_view {
		flex: 1;
		padding: 20px 0;
		font-size: 16px;
		border: none;
		outline: none;
		width:50%;
		background: #ffffff;
		text-align: center
	}

	.cancel-btn {
		color: #000000;
		border-right: 1px solid #e5e5e5;
	}

	.confirm-btn {
		color: #576B95;
	}
</style>

4、将组件引入到全局注册 也就是main.js

import showModal from '@/components/show-modal/index.vue';
Vue.component('showModal', showModal)

5、在pages.json文件中配置 insetLoader

	//在pages.json文件中新加insetLoader属性
	"insetLoader": {
		//配置
		"config": {
			//将需要引入的组件名起了个confirm的名字在下面label中使用
			//右侧"<test ref='confirm' />"为需要插入的组件标签
			"showModal": "<show-modal ref='showModal' />"
		},
		// 全局配置  
		//需要挂在的组件名
		"label": ["showModal"],
		//根元素的标签类型 也就是插入到页面哪个根元素下默认为div 但是uniapp中需要写为view
		"rootEle": "view"
	},

6、运行项目的时候就会在每个页面插入show-modal组件

6、我们用vuex控制自定义showModal的状态，

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
	customShowModal: {
			visible: false,
			title: '提示',
			content: '',
			showCancel: false,
			confirmText: "确定",
			cancelText: "取消",
			sureCallback:()=>{},
			cancelCallback:()=>{}
	},//自定义showModal对象
	mutations:{
	setCustomShowModal:(state, customShowModal) {
			let defaultOption = {
				visible: false,
				title: '提示',
				content: '',
				showCancel: false,
				confirmText: "确定",
				cancelText: "取消",
				sureCallback:()=>{},
				cancelCallback:()=>{}
			}
			state.customShowModal = {
			...defaultOption,
			...customShowModal
			};
			if(customShowModal.visible){
				uni.hideTabBar()
			}else{
				uni.showTabBar();
			}

		},
	}
}
})

7、在js中的调用

    import vm from "@/main.js"
    vm.$store.commit("setCustomShowModal", {
        content:"您的车联网服务即将到期，请前往【我的】->【服务订阅】进行订阅",
        visible: true,
        showCancel: true,
        sureCallback: () => {
            console.log('我点击了确定')
        },
        cancelCallback: () => {
            console.log("我点击了取消");
        }
    });