自己寫一個uniapp全域性彈窗(APP端)

2022-10-20 14:01:24

效果圖：

uniapp自帶的提示框不符合我們的要求，需要自己寫一個提示框，且全域性通用。

解決思路:

使用 plus.nativeObj 來繪製視窗以及事件監聽。官方檔案

方法如下：

1. 首先建立一個整個螢幕的控制元件，作為一個父容器。

此時還看不到任何東西

let screenHeight = uni.getSystemInfoSync().screenHeight;
let style = {
    width:'100%',
    height: (screenHeight + 'px'),
    left:'0px',
    top:'0px'
};
 
// 建立原生控制元件物件
// 引數1: id
// 引數2: 控制元件的樣式
let view = new plus.nativeObj.View('showModalView',style);

2. 繪製遮罩層

view.draw([
	{tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}}
]);
 
 
{
    tag:'rect',                        // 繪製矩形
    id:'modal',                        // 控制元件id
    color:`rgba(0,0,0,0.4)`,            // 背景色
    position:{top:'0px',left:'0px',width:'100%',height:'100%'}        // 位置和大小樣式
}

view.draw(tags); 在控制元件上繪製，傳入繪製物件。

繪製物件檔案可繪製圖片、矩形區域、文字等內容。

3.繪製通知框樣式

view.draw([
	{tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
    {tag:'rect',id:'content',rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:height+'px'}},
]);
 
{
    tag:'rect',
    id:'content',
    // 矩形的樣式
    rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},
    // 位置和大小. 下面的變數是根據螢幕寬高手動計算的
    position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:height+'px'}
}
 
interface RectStyles {
	attribute String color;
	attribute String radius;
	attribute String borderColor;
	attribute String borderWidth;
}

4. 繪製標題和內容

view.draw([
	{tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
    {tag:'rect',id:'content',rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:height+'px'}},
    {tag:'font',id:'title',text:modelInfo.tit,textStyles:{size:'16px',color:'#fff'},position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'}},
	{tag:'font',id:'text',text:modelInfo.content,textStyles:{size:'14px',color:'#fff',whiteSpace:'normal',align:modelInfo.align},position:{top:contentTop+'px',left:startLeft+'px',width:width+'px',height:contentHeight+'px'}},
    // 這個是內容和底部按鈕的分割線
	{tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:startLeft+'px',width:width+'px',height:'0.5px'}},
]);
 
{
    tag:'font',                    // 繪製文字
    id:'title',
    text:modelInfo.tit,            // 文字內容
    textStyles:{size:'16px',color:'#fff'},
    position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'}
},

5. 建立確認按鈕控制元件

我們需要給確認按鈕設定點選事件，所以它要作為一個新的控制元件，而不是再剛剛的控制元件上繼續繪製。

// 確認
let viewconfirm=new plus.nativeObj.View('confirm',
	{
		width:modelInfo.delCancel?width+'px':'40%',
		height:buttonHeight+'px',
		top:lineTop+'px',
		left:modelInfo.delCancel?startLeft+'px':halfWidthForGlobal +'px',
		backgroundColor:'rgba(255,255,255,0)',
	},
);
viewconfirm.draw([
	{tag:'font',id:'confirm',text:modelInfo.confirmVal,textStyles:{color:modelInfo.confirmColor,size:'14px'}},
]);

設定點選事件

viewconfirm.addEventListener("click",(e)=>{
    // 傳送事件
	this.$event({res:true,types:'confirm'});
    // 隱藏當前控制元件(關閉)
	this.hide();
},false);

將 viewconfirm和view顯示出來:

function show(){
    this.view.show();
    this.confirmModel.show();
}

下面就是將這些掛載到Uni上就可以了。

下面是專案中的完整程式碼:

index.js 用於繪製

// show_modal/index.js
export class show_model{
	constructor(option={}) {
		this.bodyModel=null;
		this.cancelModel=null;
		this.confirmModel=null;
		this.pageHeight=uni.getSystemInfoSync().screenHeight;
		this.pageWidth = uni.getSystemInfoSync().screenWidth;
		let opacity = option.opacity || 0.4;
		let model_tit=option.title||'溫馨提示';
		let model_content=option.content||"內容"
		let clickEvent=option.IsclickEvent||false;
		let cancelVal=option.cancelVal||'取消';
		let confirmVal=option.confirmVal||'確認';
		let cancelColor=option.cancelColor||'#fff';				// 取消
		let confirmColor=option.confirmColor||'#fff';			// 確認
		let delCancel=option.delCancel||false;
		let align=option.align||"center";
		let fn = ()=>{};
		this.$event = option.$event || fn;
		let backOff=option.backOff||false;
		
		//#ifdef APP-PLUS
		this.creatView({height:`${this.pageHeight}px`,top:0},opacity,clickEvent,{'tit':model_tit,'content':model_content,cancelVal,confirmVal,confirmColor,cancelColor,delCancel,align})
		if(!backOff){
			this.backbtn();
		}
		//#endif
	}
    backbtn(){
		let that=this;
		plus.key.addEventListener('backbutton', function (e) {
			that.hide();
		},false)
	}
	//生成提示框view
	creatView(style,opa,clickEvent,modelInfo){
		style = {
			left:'0px',
			width:'100%',
			...style
		}
        let platform = plus.os.name.toLowerCase();
		let view = new plus.nativeObj.View('showModalView',style);
		
		let width = 300;
		let height = 150;
		let titleHeight = 20;
		let contentHeight = 60;
		let startTop = (this.pageHeight - height) / 2;
		let startLeft = (this.pageWidth - width) / 2;
		let titleTop = startTop + 10;
		let contentTop = titleTop+30;
		let lineTop = startTop + height - 40;
		let buttonHeight = 40;
		let halfWidth = width / 2;
		let halfWidthForGlobal = startLeft + halfWidth;
		
		if(platform == "ios"){
			view.draw([
				{tag:'rect',id:'modal',color:`rgba(0,0,0,${opa})`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
			    {tag:'rect',id:'content',rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:height+'px'}},
			    {tag:'font',id:'title',text:modelInfo.tit,textStyles:{size:'16px',color:'#fff'},position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'}},
			    {tag:'font',id:'text',text:modelInfo.content,textStyles:{size:'14px',color:'#fff',whiteSpace:'normal',align:modelInfo.align},position:{top:contentTop+'px',left:startLeft+'px',width:width+'px',height:contentHeight+'px'}},
			    {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:startLeft+'px',width:width+'px',height:'0.5px'}},
				{tag:'rect',id:'line2',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:+halfWidthForGlobal+'px',width:modelInfo.delCancel?'0px':'0.5px',height:modelInfo.delCancel?'0px':buttonHeight+'px'}}
			]);
		}else{
			view.draw([
				{tag:'rect',id:'modal',color:`rgba(0,0,0,${opa})`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
			    {tag:'rect',id:'content',rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},position:{top:startTop+'px',left:startLeft+'px',width:width+'px',height:height+'px'}},
			    {tag:'font',id:'title',text:modelInfo.tit,textStyles:{size:'16px',color:'#fff'},position:{top:titleTop+'px',left:startLeft+'px',width:width+'px',height:titleHeight+'px'}},
			    {tag:'font',id:'text',text:modelInfo.content,textStyles:{size:'14px',color:'#fff',whiteSpace:'normal',align:modelInfo.align},position:{top:contentTop+'px',left:startLeft+'px',width:width+'px',height:contentHeight+'px'}},
			    {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:startLeft+'px',width:width+'px',height:'0.5px'}},
				{tag:'rect',id:'line2',color:'rgba(255,255,255,0.3)',position:{top:lineTop+'px',left:halfWidthForGlobal+'px',width:modelInfo.delCancel?'0px':'0.5px',height:modelInfo.delCancel?'0px':buttonHeight+'px'}}
			]);
		}
		
		var num = 0.55;
		if(platform == "ios"){
			num = 0.57
		}
		if(!modelInfo.delCancel){
			// 取消	
			let viewCancel=new plus.nativeObj.View('cancel',{width:halfWidth+'px',height:buttonHeight+'px',top:lineTop+'px',left:startLeft+'px',backgroundColor:'rgba(255,255,255,0)'});
			    viewCancel.draw([
				  {tag:'font',id:'cancel',text:modelInfo.cancelVal,textStyles:{color:modelInfo.cancelColor,size:'14px'}},
				]);
				
				viewCancel.addEventListener("click",(e)=>{
					this.$event({res:false,types:'cancel'});
					this.hide();
				},false);
				this.cancelModel=viewCancel;
		}
		// 確認
		let viewconfirm=new plus.nativeObj.View('confirm',
			{
				width:modelInfo.delCancel?width+'px':'40%',
				height:buttonHeight+'px',
				top:lineTop+'px',
				left:modelInfo.delCancel?startLeft+'px':halfWidthForGlobal +'px',
				backgroundColor:'rgba(255,255,255,0)',
			},
		);
		viewconfirm.draw([
			{tag:'font',id:'confirm',text:modelInfo.confirmVal,textStyles:{color:modelInfo.confirmColor,size:'14px'}},
		]);
	
		viewconfirm.addEventListener("click",(e)=>{
			this.$event({res:true,types:'confirm'});
			this.hide();
		},false);
		  //點選蒙布
		if(clickEvent){
			 view.addEventListener("click", (e) => {
				this.$event({res:false,types:'cover'});
				this.hide();
			}, false);
		}
	   this.bodyModel=view;
	   this.confirmModel=viewconfirm;
	}
    showModalAnimationClose(){
		var options = {type:'pop-out',duration:300};
			plus.nativeObj.View.startAnimation(options,{view:this.bodyModel},{view:this.cancelModel},{view:this.viewconfirm},function(){
				console.log('plus.nativeObj.View.startAnimation動畫結束');
				// 關閉原生動畫
				plus.nativeObj.View.clearAnimation();
			});
	}
	showModalAnimationOpen(){
		var options = {type:'pop-in',duration:1000};
		
			plus.nativeObj.View.startAnimation(options,{view:this.bodyModel},{view:this.cancelModel},{view:this.viewconfirm},function(){
				console.log('plus.nativeObj.View.startAnimation動畫結束');
				// 關閉原生動畫
				plus.nativeObj.View.clearAnimation();
			});
	}
	show(){
		this.showModalAnimationOpen();
		this.bodyModel.show();
		if(this.cancelModel){
			this.cancelModel.show();
		}
		this.confirmModel.show();
	
	}
	hide(){
		this.showModalAnimationClose();
		this.bodyModel.hide();
		if(this.cancelModel){
	      this.cancelModel.hide();	
		}
		this.confirmModel.hide();
	}
}
 
export default show_model

show_modal.js: 用於建立promise物件並掛載

// show_modal/xt_show_modal.js
import show_modal from './index.js'
 
const xt_show_modal = {
	install: function(Vue) {
        const show_modal_fun=function(op={}){
			//#ifdef APP-PLUS
			return	new Promise((resolve, reject)=>{
			   let ssm=new show_modal({
					...op,
					$event:function(e){
						if(e.res){
							resolve(e);
						}else{
							reject(e);
						}
					 }
				})；
				ssm.show();
				Vue.prototype.$hide=function(){
					ssm.hide();
				}
			})
			//#endif
			
            // 適應H5
			//#ifdef H5
				var promise=uni.showModal({
					title: op.title,
					content: op.content,
					showCancel: !op.delCancel,
					cancelText: op.cancelVal,
					confirmText: op.confirmVal,
				});
				
				return new Promise((resolve,reject)=>{
					promise.then(data=>{
						var [err, res] = data;
						if(res.confirm){
							resolve()
						}else{
							reject();
						}
					})
				})
				
			//#endif
            
		}
        // $showModal掛載到uni物件上
        uni.$showModal = show_modal_fun
        Vue.prototype.$showModal = show_modal_fun
	}
};
 
export default xt_show_modal;

main.js中掛載

// 自定義showModal元件
import xt_show_modal from '@/component/show_modal/xt_show_modal.js'
Vue.use(xt_show_modal);

使用:

// showModel的使用
uni.$showModal({
	title:"",				//可選,不填則不顯示
    content:'未知錯誤，請聯絡管理員！',
    delCancel: true,
    confirmVal: '知道了',	// 可選
	cancelVal:'取消',		// 可選
}).then(res=>{
	// 點選確認按鈕點選事件
}).catch(res=>{
	// 點選取消按鈕點選事件
});