uinapp微信小程序隐私政策授权

🚀 隐私弹窗效果图:

在这里插入图片描述

1、启用隐私相关功能在manifest.json文件中配置 usePrivacyCheck: true
"mp-weixin" : {
    "__usePrivacyCheck__" : true,
},
2、创建组件
<template>
	<view>
		<!-- 隐私政策弹窗 -->
		<uni-popup ref="popup">
			<view class="popup-wrap">
				<view class="pop-title">用户隐私保护提示</view>
				<view class="popup-txt">
					感谢您使用本小程序,在使用前您应当阅读井同意
					<text class="blue-color" @click="handleOpenPrivacyContract">{{privacyContractName}}</text>
					,当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用小程序相关功能。
				</view>
				<view class="popup-bot">
					<button id="disagree-btn" type="default" @click="handleDisagree">不同意</button>
					<button id="agree-btn" type="primary" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
 
<script>
	export default {
		name: "privacyPopup",
		data() {
			return {
				privacyContractName: "" //协议名称
			};
		},
		mounted() {
			this.checkPrivacy()
		},
		methods: {
			// 判断是否授权协议
			checkPrivacy() {
				return new Promise((resolve,reject) => {
					uni.getPrivacySetting({
						success: res => {
							if (res.needAuthorization) {
								this.privacyContractName = res.privacyContractName;
								this.$refs.popup.open('center')
							} else {
								resolve(res)
							}
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			// 关闭协议
			handleDisagree(e) {
				this.$refs.popup.close()
			},
			handleAgreePrivacyAuthorization(res) {
				// 用户同意隐私协议事件回调
				// 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了
				this.$refs.popup.close()
                //通知父组件
				this.$emit("agreePrivacy")
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				uni.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: (res) => {
						console.log(res, "openPrivacyContract complete");
					}
				})
			},
		}
	}
</script>
 
<style lang="scss" scoped>
	.popup-wrap {
		width: 540upx;
		box-sizing: border-box;
		padding: 42upx;
		background: white;
		border-radius: 30upx;
		.pop-title {
			text-align: center;
			font-size: 31upx;
			color: #000;
			font-weight: bold;
			margin-bottom: 20upx;
		}
 
		.blue-color {
			color: rgba(39, 152, 240, 1);
		}
 
		.popup-txt {
			line-height: 48upx;
			font-size: 28upx;
		}
 
		.popup-bot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30upx;
			>button {
				color: #FFF;
				font-size: 26rpx;
				font-weight: 500;
				line-height: 80rpx;
				width: 46%;
				text-align: center;
				height: 80rpx;
				border-radius: 16rpx;
				border: none;
				background: #07c160;
			}
			>button:nth-of-type(1){
			  color: #07c160;
			  background: #f2f2f2;
			}
		}
	}
</style>
3、组件使用
<privacyPopup @agreePrivacy="执行同意协议后的逻辑"></privacyPopup>

🚀 扩展:

因小程序中各个地方都会涉及到授权问题,依次引入组件过繁琐
1、可以将组件放置App.vue页面
2、通过vuex进入监听全局是否需要弹窗授权,可利用vux state变量进行触发
3、写一个公共方法判断是否授权协议去设置vuex即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/116121.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

高德地图撒点组件

一、引入amap地图库 - public/index.html <script type"text/javascript">window._AMapSecurityConfig {securityJsCode: 地图密钥 }</script><scripttype"text/javascript"src"https://webapi.amap.com/maps?v1.4.8&key111111…

回归预测 | Matlab实现MPA-BP海洋捕食者算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现MPA-BP海洋捕食者算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现MPA-BP海洋捕食者算法优化BP神经网络多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现MPA-BP海洋捕食者算法优化BP神经网络多变量回归预测&…

基于单片机的自动感应门设计

博主主页&#xff1a;单片机辅导设计 博主简介&#xff1a;专注单片机技术领域和毕业设计项目。 主要内容&#xff1a;毕业设计、简历模板、学习资料、技术咨询。 文章目录 主要介绍一、自动感应门设计的功能概述二、系统总体方案2.1系统的总体计划2.2元器件的介绍2.2.1单片机的…

【程序员日记】一行console.log引发的血案

▒ 目录 ▒ &#x1f6eb; 导读需求开发环境 1️⃣ 艰难的排查过程1. 程序闪退2. 确定为内存泄漏3. 误入歧途4. 二分法注释代码5. 猿脑猜想 2️⃣ 排查procexp.exePerformance 和 Memory 3️⃣ 剔除生产环境中的console.logwebpack插件terser-webpack-plugin &#x1f6ec; 文章…

VX-3R APRS发射试验

VX-3R本身是不带APRS功能的&#xff0c;不过可能通过外加TNC实现APRS功能。 有大佬已经用Arduino实现了相应的发射功能&#xff1a; https://github.com/handiko/Arduino-APRS 我要做的&#xff0c;就是简单修改一下代码&#xff0c;做一个转接板。 YEASU官方没有给出VX-3R的音…

ch0_OSI 七层网络协议介绍

目录 概述 1、三网融合的概念 三网&#xff1a;电信网络、有线电视网络、计算机网络 概念&#xff1a;把上述三种网络融合成一种网络 2、计算机网络的定义、分类 定义&#xff1a;计算机网络是将地理位置不同的独立计算机系统&#xff0c;通过传输介质链接起来&#xff0c…

7-4 修理牧场 分数 15

#include<iostream> #include<queue> using namespace std; #define maxn 10005int main() {int n 0, data 0;cin >> n;//建小堆: //上调建堆中用greater: 父大子小 父子交换 小的上去 大的下去 priority_queue<int, vector<int>, greater<int…

vue+asp.net Web api前后端分离项目发布部署

一、前后端项目介绍 1.前端项目是使用vue脚手架进行创建的。 脚手架版本&#xff1a;vue/cli 5.0.8 编译器版本&#xff1a;vs code 1.82.2 2.后端是一个asp.net Core Web API 项目 后端框架版本&#xff1a;.NET 6.0 编译器版本&#xff1a;vs 2022 二、发布部署步骤 第…

静态链表的定义与实现(数据结构与算法)

1. 静态链表 用数组的方式实现的链表 单链表&#xff1a; 各个结点在内存中星罗棋布、散落天涯 静态链表&#xff1a;分配一整片连续的内存空间&#xff0c; 各个结点集中安置。 1.1 静态链表的优点 不需要像动态链表那样频繁地进行内存分配和释放&#xff0c;可以节省内存…

缺陷之灵魂操作bug

一、前言 正常来说&#xff0c;我们在测试缺陷的时候都是按照case来测试的&#xff0c;但是有些场景&#xff0c;例如说发散思维这种场景&#xff0c;就会找到一些比较不太正常、不好复现的缺陷&#xff0c;然后如果要辅助研发修复&#xff0c;就会极为痛苦。 二、场景描述 大…

mysql迁移data目录(Linux-Centos)

随着时间的推移&#xff0c;mysql的数据量越越大&#xff0c;使用yum默认安装的目录为系统盘 /var/lib/mysql&#xff0c;现重新挂载了一个硬盘&#xff0c;需要做数据目录的迁移到 /mnt/data/。以解决占用系统盘过高情况。 1.强烈建议这种操作。镜像一个一样的Centos系统&…

掌控你的Mac性能:System Dashboard Pro,一款专业的系统监视器

作为Mac用户&#xff0c;你是否曾经想要更好地了解你的电脑性能&#xff0c;以便优化其运行&#xff1f;是否想要实时监控系统状态&#xff0c;以便及时发现并解决问题&#xff1f;如果你有这样的需求&#xff0c;那么System Dashboard Pro就是你的不二之选。 System Dashboar…

sitespeedio.io 前端页面监控安装部署接入influxdb 到grafana

1.docker部署influxdb,部署1.8一下&#xff0c;不然语法有变化后面用不了grafana模板 docker run -d -p 8086:8086 --name influxdb -v $PWD/influxdb-data:/var/lib/influxdb influxdb:1.7.11-alpine docker exec -it influxdb_id bash #influx create user admin with pass…

JavaScript从入门到精通系列第二十九篇:正则表达式初体验

大神链接&#xff1a;作者有幸结识技术大神孙哥为好友&#xff0c;获益匪浅。现在把孙哥视频分享给大家。 孙哥链接&#xff1a;孙哥个人主页 作者简介&#xff1a;一个颜值99分&#xff0c;只比孙哥差一点的程序员 本专栏简介&#xff1a;话不多说&#xff0c;让我们一起干翻J…

modesim verilog仿真验证基本流程(新建工程方式)

文章目录 环境搭建一、在modelsim里创建一个新的工程二、新建verilog设计文件及仿真激励文件三、仿真结果本文演示如何使用modelsim新建工程进行功能仿真。 环境搭建 本文中采用的modelsim版本如下: modelsim altera 10.3d一、在modelsim里创建一个新的工程 打开modelsim软…

基于java+springboot+vue在线选课系统

项目介绍 本系统结合计算机系统的结构、概念、模型、原理、方法&#xff0c;在计算机各种优势的情况下&#xff0c;采用JAVA语言&#xff0c;结合SpringBoot框架与Vue框架以及MYSQL数据库设计并实现的。员工管理系统主要包括个人中心、课程管理、专业管理、院系信息管理、学生…

学习经验分享【NO.18】YOLOv5可视化特征图教程(持续更新)

YOLOv5项目的6.0以上版本中的detect.pt中集成了可视化相关模块&#xff0c;直接调用即可。 一、可视化特征提取网络中所有模块的可视化图 添加形参如下所示&#xff0c;加载相应的权值文件后&#xff0c;选择相应的图片。 运行detect.py文件后得到如下所示&#xff1a; 以stag…

stm32 DMA

目录 简介 框图 DMA请求 DMA通道 DMA优先级 DMA 数据 外设到存储器 存储器到外设 存储器到存储器 传多少&#xff0c;单位是什么 传输完成 hal库代码 标准库代码 简介 CPU根据代码内容执行指令&#xff0c;这些众多指令中&#xff0c;有的用于计算、有的用于控制程…

汽车标定技术(一):XCP概述

目录 1.汽车标定概述 2.XCP协议由来及版本介绍 3.XCP技术通览 3.1 XCP上下机通信模型 3.2 XCP指令集 3.2.1 XCP帧结构定义 3.2.2 标准指令集 3.2.3 标定指令集 3.2.4 页切换指令集 3.2.5 数据采集指令集 3.2.6 刷写指令集 3.3 ECU描述文件(A2L)概述 3.3.1 标定上位…

python把Word题库转成Excle题库

又到了一年一度的背题时刻&#xff0c;但是收到的题库是Word版的&#xff0c;页数特别多 话不多说&#xff0c;上代码&#xff0c;有图有真相&#xff0c;代码里面备注的很详细 # 导入所需库 import csv import os import refrom docx import Document from win32com import c…