uni-app 开发App 口令弹窗

悠悠 2022-11-20 03:55 343阅读 0赞

我们用uni-app开发APP 电商类总有口令弹窗的需求  
首先我们写弹窗首先就要想到`uni-popup` 写弹窗非常方便

<uni-popup ref="popup" round="true" type="bottom">
    		
    </uni-popup>
    在页面引入一下uniPopup 就可与使用了里面的样式和正常写一样
    type 值可以选择下面出来或者 在中间center
    this.$refs.popup.open();//打开弹窗
    this.$refs.popup.close();//关闭弹窗

在商品详情页面或者其他页面需要弹窗的页面都可以这样操作  
最容易出问题的就是当拿到口令进入页面的时候如何弹窗 应该在哪里弹 uni-APP 在App.vue中我测试一下没有效果 就用了另一种办法

#### 1. 创建一个页面页面为透明背景 ####

写在pages。json中
    { 
    			"path": "pages/share",
    			"style": { 
    				"navigationStyle": "custom", // 取消本页面的导航栏
    				"app-plus": { 
    					"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型
    					"background": "transparent", // 背景透明
    					"backgroundColor": "rgba(0,0,0,0)", // 背景透明
    					"webviewBGTransparent":true,
    					"mask":"none",
    					"popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
    				}
    			}
    		}

#### 2. 在app.vue中onShow函数中判断剪切板中信息要不要跳转 ####

onShow: function() { 
    			
    			// 获取信息 分享弹窗
    			// #ifdef APP-PLUS
    			uni.getClipboardData({ 
    				success: function (res) { 
    					console.log(res.data); //剪切板信息
    					},
    				complete: function(){  //结束之后清空剪切板
    					uni.setClipboardData({ 
    						data: '',
    						success: ()=>{ uni.hideToast()}
    					});
    				}
    			});
    			// #endif
    			
    		},

#### 3. 在页面中弹窗，进行相应弹窗 记得返回页面 `页面样式中不要用scoped 否则会影响pages里面样式` ####

<uni-popup ref="sharePopup" type="center">
    			
    
    </uni-popup>
    
    import uniPopup from '@'
    export default { 
    	methods:{ 
    		open(){ 
    			this.$refs.sharePopup.open(); //打开
    		},
    		close(){ 
    			this.$refs.sharePopup.close(); //关闭
    		}
    	}
    }