uni-app全局弹窗(APP端)

 uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。

解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听。    官方文档

1. 首先创建一个整个屏幕的控件，作为一个父容器。 此时还看不到任何东西

1.  
   let screenHeight = uni.getSystemInfoSync().screenHeight;
2.  
   let style = {
3.  
   width:'100%',
4.  
   height: (screenHeight 'px'),
5.  
   left:'0px',
6.  
   top:'0px'
7.  
   };
8.  
    
9.  
   // 创建原生控件对象
10.  
    // 参数1: id
11.  
    // 参数2: 控件的样式
12.  
    let view = new plus.nativeObj.View('showModalView',style);

2. 绘制遮罩层

1.  
   view.draw([
2.  
   {tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}}
3.  
   ]);
4.  
    
5.  
    
6.  
   {
7.  
   tag:'rect', // 绘制矩形
8.  
   id:'modal', // 控件id
9.  
   color:`rgba(0,0,0,0.4)`, // 背景色
10.  
    position:{top:'0px',left:'0px',width:'100%',height:'100%'} // 位置和大小样式
11.  
    }

view.draw(tags); 在控件上绘制，传入绘制对象。

绘制对象文档 可绘制图片、矩形区域、文本等内容。  

3.绘制通知框样式

1.  
   view.draw([
2.  
   {tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
3.  
   {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'}},
4.  
   ]);
5.  
    
6.  
   {
7.  
   tag:'rect',
8.  
   id:'content',
9.  
   // 矩形的样式
10.  
    rectStyles:{borderWidth:'2px',radius:'8px',color:`rgba(36,34,56,1)`},
11.  
    // 位置和大小. 下面的变量是根据屏幕宽高手动计算的
12.  
    position:{top:startTop 'px',left:startLeft 'px',width:width 'px',height:height 'px'}
13.  
    }
14.  
     
15.  
    interface RectStyles {
16.  
    attribute String color;
17.  
    attribute String radius;
18.  
    attribute String borderColor;
19.  
    attribute String borderWidth;
20.  
    }

4. 绘制标题和内容

1.  
   view.draw([
2.  
   {tag:'rect',id:'modal',color:`rgba(0,0,0,0.4)`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
3.  
   {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'}},
4.  
   {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.  
   {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'}},
6.  
   // 这个是内容和底部按钮的分割线
7.  
   {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop 'px',left:startLeft 'px',width:width 'px',height:'0.5px'}},
8.  
   ]);
9.  
    
10.  
    {
11.  
    tag:'font', // 绘制文字
12.  
    id:'title',
13.  
    text:modelInfo.tit, // 文字内容
14.  
    textStyles:{size:'16px',color:'#fff'},
15.  
    position:{top:titleTop 'px',left:startLeft 'px',width:width 'px',height:titleHeight 'px'}
16.  
    },

5. 创建确认按钮控件

我们需要给确认按钮设置点击事件，所以它要作为一个新的控件，而不是再刚刚的控件上继续绘制。

1.  
   // 确认
2.  
   let viewconfirm=new plus.nativeObj.View('confirm',
3.  
   {
4.  
   width:modelInfo.delCancel?width 'px':'40%',
5.  
   height:buttonHeight 'px',
6.  
   top:lineTop 'px',
7.  
   left:modelInfo.delCancel?startLeft 'px':halfWidthForGlobal 'px',
8.  
   backgroundColor:'rgba(255,255,255,0)',
9.  
   },
10.  
    );
11.  
    viewconfirm.draw([
12.  
    {tag:'font',id:'confirm',text:modelInfo.confirmVal,textStyles:{color:modelInfo.confirmColor,size:'14px'}},
13.  
    ]);

设置点击事件

1.  
   viewconfirm.addEventListener("click",(e)=>{
2.  
   // 发送事件
3.  
   this.$event({res:true,types:'confirm'});
4.  
   // 隐藏当前控件(关闭)
5.  
   this.hide();
6.  
   },false);

将 viewconfirm和view显示出来:

1.  
   function show(){
2.  
   this.view.show();
3.  
   this.confirmModel.show();
4.  
   }

下面就是将这些挂载到Uni上就可以了。

下面是项目中的完整代码:

index.js 用于绘制

1.  
   // show_modal/index.js
2.  
   export class show_model{
3.  
   constructor(option={}) {
4.  
   this.bodyModel=null;
5.  
   this.cancelModel=null;
6.  
   this.confirmModel=null;
7.  
   this.pageHeight=uni.getSystemInfoSync().screenHeight;
8.  
   this.pageWidth = uni.getSystemInfoSync().screenWidth;
9.  
   let opacity = option.opacity || 0.4;
10.  
    let model_tit=option.title||'温馨提示';
11.  
    let model_content=option.content||"内容"
12.  
    let clickEvent=option.IsclickEvent||false;
13.  
    let cancelVal=option.cancelVal||'取消';
14.  
    let confirmVal=option.confirmVal||'确认';
15.  
    let cancelColor=option.cancelColor||'#fff'; // 取消
16.  
    let confirmColor=option.confirmColor||'#fff'; // 确认
17.  
    let delCancel=option.delCancel||false;
18.  
    let align=option.align||"center";
19.  
    let fn = ()=>{};
20.  
    this.$event = option.$event || fn;
21.  
    let backOff=option.backOff||false;
22.  
     
23.  
    //#ifdef APP-PLUS
24.  
    this.creatView({height:`${this.pageHeight}px`,top:0},opacity,clickEvent,{'tit':model_tit,'content':model_content,cancelVal,confirmVal,confirmColor,cancelColor,delCancel,align})
25.  
    if(!backOff){
26.  
    this.backbtn();
27.  
    }
28.  
    //#endif
29.  
    }
30.  
    backbtn(){
31.  
    let that=this;
32.  
    plus.key.addEventListener('backbutton', function (e) {
33.  
    that.hide();
34.  
    },false)
35.  
    }
36.  
    //生成提示框view
37.  
    creatView(style,opa,clickEvent,modelInfo){
38.  
    style = {
39.  
    left:'0px',
40.  
    width:'100%',
41.  
    ...style
42.  
    }
43.  
    let platform = plus.os.name.toLowerCase();
44.  
    let view = new plus.nativeObj.View('showModalView',style);
45.  
     
46.  
    let width = 300;
47.  
    let height = 150;
48.  
    let titleHeight = 20;
49.  
    let contentHeight = 60;
50.  
    let startTop = (this.pageHeight - height) / 2;
51.  
    let startLeft = (this.pageWidth - width) / 2;
52.  
    let titleTop = startTop 10;
53.  
    let contentTop = titleTop 30;
54.  
    let lineTop = startTop height - 40;
55.  
    let buttonHeight = 40;
56.  
    let halfWidth = width / 2;
57.  
    let halfWidthForGlobal = startLeft halfWidth;
58.  
     
59.  
    if(platform == "ios"){
60.  
    view.draw([
61.  
    {tag:'rect',id:'modal',color:`rgba(0,0,0,${opa})`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
62.  
    {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'}},
63.  
    {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'}},
64.  
    {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'}},
65.  
    {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop 'px',left:startLeft 'px',width:width 'px',height:'0.5px'}},
66.  
    {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'}}
67.  
    ]);
68.  
    }else{
69.  
    view.draw([
70.  
    {tag:'rect',id:'modal',color:`rgba(0,0,0,${opa})`,position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
71.  
    {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'}},
72.  
    {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'}},
73.  
    {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'}},
74.  
    {tag:'rect',id:'line',color:'rgba(255,255,255,0.3)',position:{top:lineTop 'px',left:startLeft 'px',width:width 'px',height:'0.5px'}},
75.  
    {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'}}
76.  
    ]);
77.  
    }
78.  
     
79.  
    var num = 0.55;
80.  
    if(platform == "ios"){
81.  
    num = 0.57
82.  
    }
83.  
    if(!modelInfo.delCancel){
84.  
    // 取消
85.  
    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)'});
86.  
    viewCancel.draw([
87.  
    {tag:'font',id:'cancel',text:modelInfo.cancelVal,textStyles:{color:modelInfo.cancelColor,size:'14px'}},
88.  
    ]);
89.  
     
90.  
    viewCancel.addEventListener("click",(e)=>{
91.  
    this.$event({res:false,types:'cancel'});
92.  
    this.hide();
93.  
    },false);
94.  
    this.cancelModel=viewCancel;
95.  
    }
96.  
    // 确认
97.  
    let viewconfirm=new plus.nativeObj.View('confirm',
98.  
    {
99.  
    width:modelInfo.delCancel?width 'px':'40%',
100.  
     height:buttonHeight 'px',
101.  
     top:lineTop 'px',
102.  
     left:modelInfo.delCancel?startLeft 'px':halfWidthForGlobal 'px',
103.  
     backgroundColor:'rgba(255,255,255,0)',
104.  
     },
105.  
     );
106.  
     viewconfirm.draw([
107.  
     {tag:'font',id:'confirm',text:modelInfo.confirmVal,textStyles:{color:modelInfo.confirmColor,size:'14px'}},
108.  
     ]);
109.  
      
110.  
     viewconfirm.addEventListener("click",(e)=>{
111.  
     this.$event({res:true,types:'confirm'});
112.  
     this.hide();
113.  
     },false);
114.  
     //点击蒙布
115.  
     if(clickEvent){
116.  
     view.addEventListener("click", (e) => {
117.  
     this.$event({res:false,types:'cover'});
118.  
     this.hide();
119.  
     }, false);
120.  
     }
121.  
     this.bodyModel=view;
122.  
     this.confirmModel=viewconfirm;
123.  
     }
124.  
     showModalAnimationClose(){
125.  
     var options = {type:'pop-out',duration:300};
126.  
     plus.nativeObj.View.startAnimation(options,{view:this.bodyModel},{view:this.cancelModel},{view:this.viewconfirm},function(){
127.  
     console.log('plus.nativeObj.View.startAnimation动画结束');
128.  
     // 关闭原生动画
129.  
     plus.nativeObj.View.clearAnimation();
130.  
     });
131.  
     }
132.  
     showModalAnimationOpen(){
133.  
     var options = {type:'pop-in',duration:1000};
134.  
      
135.  
     plus.nativeObj.View.startAnimation(options,{view:this.bodyModel},{view:this.cancelModel},{view:this.viewconfirm},function(){
136.  
     console.log('plus.nativeObj.View.startAnimation动画结束');
137.  
     // 关闭原生动画
138.  
     plus.nativeObj.View.clearAnimation();
139.  
     });
140.  
     }
141.  
     show(){
142.  
     this.showModalAnimationOpen();
143.  
     this.bodyModel.show();
144.  
     if(this.cancelModel){
145.  
     this.cancelModel.show();
146.  
     }
147.  
     this.confirmModel.show();
148.  
      
149.  
     }
150.  
     hide(){
151.  
     this.showModalAnimationClose();
152.  
     this.bodyModel.hide();
153.  
     if(this.cancelModel){
154.  
     this.cancelModel.hide();
155.  
     }
156.  
     this.confirmModel.hide();
157.  
     }
158.  
     }
159.  
      
160.  
     export default show_model

show_modal.js: 用于创建promise对象并挂载

1.  
   // show_modal/xt_show_modal.js
2.  
   import show_modal from './index.js'
3.  
    
4.  
   const xt_show_modal = {
5.  
   install: function(Vue) {
6.  
   const show_modal_fun=function(op={}){
7.  
   //#ifdef APP-PLUS
8.  
   return new Promise((resolve, reject)=>{
9.  
   let ssm=new show_modal({
10.  
    ...op,
11.  
    $event:function(e){
12.  
    if(e.res){
13.  
    resolve(e);
14.  
    }else{
15.  
    reject(e);
16.  
    }
17.  
    }
18.  
    })；
19.  
    ssm.show();
20.  
    Vue.prototype.$hide=function(){
21.  
    ssm.hide();
22.  
    }
23.  
    })
24.  
    //#endif
25.  
     
26.  
    // 适应H5
27.  
    //#ifdef H5
28.  
    var promise=uni.showModal({
29.  
    title: op.title,
30.  
    content: op.content,
31.  
    showCancel: !op.delCancel,
32.  
    cancelText: op.cancelVal,
33.  
    confirmText: op.confirmVal,
34.  
    });
35.  
     
36.  
    return new Promise((resolve,reject)=>{
37.  
    promise.then(data=>{
38.  
    var [err, res] = data;
39.  
    if(res.confirm){
40.  
    resolve()
41.  
    }else{
42.  
    reject();
43.  
    }
44.  
    })
45.  
    })
46.  
     
47.  
    //#endif
48.  
     
49.  
    }
50.  
    // $showModal挂载到uni对象上
51.  
    uni.$showModal = show_modal_fun
52.  
    Vue.prototype.$showModal = show_modal_fun
53.  
    }
54.  
    };
55.  
     
56.  
    export default xt_show_modal;

main.js中挂载

1.  
   // 自定义showModal组件
2.  
   import xt_show_modal from '@/component/show_modal/xt_show_modal.js'
3.  
   Vue.use(xt_show_modal);

使用:

1.  
   // showModel的使用
2.  
   uni.$showModal({
3.  
   title:"", //可选,不填则不显示
4.  
   content:'未知错误，请联系管理员！',
5.  
   delCancel: true,
6.  
   confirmVal: '知道了', // 可选
7.  
   cancelVal:'取消', // 可选
8.  
   }).then(res=>{
9.  
   // 点击确认按钮点击事件
10.  
    }).catch(res=>{
11.  
    // 点击取消按钮点击事件
12.  
    });

这篇好文章是转载于：学新通技术网