uni-app 新增 微信小程序之新版隐私协议

news/2024/7/20 3:35:01 标签: uni-app, 微信小程序, 小程序

一、manifest.json中配置

"__usePrivacyCheck__": true

二、编写封装后的组件

<template>
	<view class="privacy" v-if="showPrivacy">
		<view class="content">
			<view class="title">隐私保护指引</view>
			<view class="des">
				在使用当前小程序服务之前,请仔细阅读
				<text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>
				。如果你同意{{ privacyContractName }},请点击“同意”开始使用。
			</view>
			<view class="btns">
				<button class="item reject" @click="exitMiniProgram">拒绝</button>
				<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			privacyContractName: '', //需要弹窗展示的隐私协议名称
			showPrivacy: false,  //全局控制弹窗显隐
		};
	},
	created() {
		this.getPrivacySet();
	},
	methods: {
		getPrivacySet(){
			let that = this;
			uni.getPrivacySetting({
			    success(res) {
					if (res.needAuthorization) {
					   that.privacyContractName = res.privacyContractName;
					   that.showPrivacy = true;
					} else that.showPrivacy = false;
			    }
			});
		},
		// 同意隐私协议
		handleAgreePrivacyAuthorization() {
			const that = this;
			wx.requirePrivacyAuthorize({
				success: res => {
					that.showPrivacy = false;
					getApp().globalData.showPrivacy = false;
				}
			});
		},
		// 拒绝隐私协议
		exitMiniProgram() {
			const that = this;
			uni.showModal({
				content: '如果拒绝,我们将无法获取您的信息, 包括手机号、位置信息、相册等该小程序十分重要的功能,您确定要拒绝吗?',
				success: res => {
					if (res.confirm) {
						that.showPrivacy = false;
						uni.exitMiniProgram({
							success: () => {
								console.log('退出小程序成功');
							}
						});
					}
				}
			});
		},
		// 跳转协议页面  
        // 点击高亮的名字会自动跳转页面 微信封装好的不用操作
		openPrivacyContract() {
			wx.openPrivacyContract({
				fail: () => {
					uni.showToast({
						title: '网络错误',
						icon: 'error'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.privacy {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999999;
	display: flex;
	align-items: center;
	justify-content: center;
	.content {
		width: 85vw;
		padding: 50rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
		.title {
			text-align: center;
			color: #333;
			font-weight: bold;
			font-size: 34rpx;
		}
		.des {
			font-size: 26rpx;
			color: #666;
			margin-top: 40rpx;
			text-align: justify;
			line-height: 1.6;
			.link {
				color: #07c160;
				text-decoration: underline;
			}
		}
		.btns {
			margin-top: 60rpx;
			display: flex;
			justify-content: space-between;
			.item {
				justify-content: space-between;
				width: 244rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 16rpx;
				box-sizing: border-box;
				border: none;
			}
			.reject {
				background: #f4f4f5;
				color: #909399;
			}
			.agree {
				background: #07c160;
				color: #fff;
			}
		}
	}
}
</style>

三、页面引入试用

import privacyPopup from '../components/privacyPopup.vue';

components:{privacyPopup},


<!-- #ifdef MP-WEIXIN -->
	<privacyPopup></privacyPopup>
<!-- #endif -->


http://www.niftyadmin.cn/n/5026338.html

相关文章

word文档怎么转换成pdf?几个实用文档转换方法

word文档怎么转换成pdf&#xff1f;PDF文档可以保护文档的格式和布局。如果你将Word文档发送给他人&#xff0c;他人可能会使用不同版本的Word软件打开文档&#xff0c;导致格式和布局发生变化。但是&#xff0c;如果你将Word文档转换为PDF文档&#xff0c;无论对方使用什么软件…

LabVIEW使用巴特沃兹低通滤波器过滤噪声

LabVIEW使用巴特沃兹低通滤波器过滤噪声 设备采集到的数据往往都有噪声&#xff0c;有时候这些数据要做判断使用&#xff0c;如果不处理往往会影响最终的结果。可以使用动态平滑&#xff0c;或者中值滤波等方法。这里介绍使用巴特沃斯低通滤波&#xff0c;也是非常方便的。 下…

Python 环境搭建,集成开发环境IDE: PyCharm

Python 环境搭建,集成开发环境IDE: PyCharm 一、Python 环境搭建二、Python下载三、Python安装四、环境变量配置五、Python 环境变量六、运行Python1、交互式解释器&#xff1a;2、命令行脚本3、集成开发环境&#xff08;IDE&#xff1a;Integrated Development Environment&am…

力扣106 补9.11

106.从中序与后序遍历序列构造二叉树 做不出来&#xff0c;这题能用哈希有个条件就是&#xff0c;每个节点的值都不一样。 先根据后序遍历找到根结点&#xff0c;在根据根结点的数组下标&#xff0c;把中序遍历序列分成2部分&#xff0c;就这样递归不断地分&#xff0c;直到左…

Flutter 挖孔屏的状态栏占用问题怎么解决,横屏后去掉了状态栏,还是会有一块黑色的竖条

使用下方代码后依旧有一条黑色的区域 overridevoid initState() {// TODO: implement initStatesuper.initState();///关闭状态栏&#xff0c;与底部虚拟操作按钮SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);//隐藏状态栏&#xff0c;底部按钮栏S…

CentOS 搭建k8s

目录 1.下载CentOS ISO镜像 (一) https://preparedata.blog.csdn.net/article/details/132878013 2.Hyper-V 安装 CentOS (二) https://preparedata.blog.csdn.net/article/details/132878766 附录&#xff1a;

小剧场短剧影视小程序源码分享,搭建自己的短剧小程序

拥有一个属于自己的短剧小程序&#xff0c;是现代人追求创作梦想和与观众互动的新方式。近年来&#xff0c;小剧场短剧影视小程序的兴起为广大创作者提供了展示才华和与观众互动的平台。如果你也渴望搭建一个自己的短剧小程序&#xff0c;那么你来对地方了&#xff01;在本文中…

前后端开发接口联调对接参数

前言 一个完整的互联网系统项目,需要前后端配合,进行上线,针对前端开发者,现在互联网主流的项目都是前后端分离 也就是后端负责提供数据接口,前端负责UI界面数据渲染 凡是在前台数据展示与用户交互的,都是由前端来实现的,而数据来源是由后台服务提供的 在浏览器c端能够发送后端…