uni-app 开发App 口令弹窗

我们用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(); //关闭
		}
	}
}