小程序添加隐私保护指引弹框（包含配置隐私保护指引方法）

news2024/11/19 5:55:20

实现效果：

在这里插入图片描述

目录

  • 前言
    • 一、 涉及到使用了隐私接口的小程序必须在「小程序管理后台」设置《小程序用户隐私保护指引》，微信一共提供了 4 个接口给开发者使用，分别是:
    • 二、 配置隐私协议弹框组件
    • 三、在页面中使用协议弹窗组件
    • 四、uniapp开发，在manifest.json中添加"__usePrivacyCheck__" : true；
    • 五、测试方法
    • 六、配置隐私指引

前言

从 2023 年 9 月 15 日起必须用户点击同意隐私保护政策并同步给微信之后，开发者才可以调用微信提供的隐私接口。

9 月 15 号之后涉及隐私的接口将无法使用,严重影响业务逻辑。开发者要做的就是做一个弹窗提示用户阅读隐私保护指引，在用户点击“同意”按钮之后同步给微信，之后微信才允许开发者调用隐私接口，并且还会检测用户是否点击了按钮。

一、 涉及到使用了隐私接口的小程序必须在「小程序管理后台」设置《小程序用户隐私保护指引》，微信一共提供了 4 个接口给开发者使用，分别是:

wx.getPrivacySetting：查询隐私授权情况
wx.openPrivacyContract：跳转到隐私协议页面
wx.onNeedPrivacyAuthorization：监听隐私接口需要用户授权事件
wx.requirePrivacyAuthorize ：模拟隐私接口调用，并触发隐私弹窗逻辑

其中隐私保护接口有哪些？
隐私接口链接：https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html
在这里插入图片描述
凡是涉及到以上隐私接口的，必须添加隐私弹框，方可使用

二、 配置隐私协议弹框组件

使用uniapp开发小程序，在项目根目录下创建components组件文件夹，创建组件xc-privacyPopup(组件名称可以自己定义)
在这里插入图片描述
在xc-privacyPopup.vue文件中，添加如下代码:

<template>
	<view v-if="showPrivacy" :class="privacyClass">
		<view :class="contentClass">
			<view class="title">用户隐私保护指引</view>
			<view class="des">
				感谢您选择使用xxxx小程序，我们非常重视您的个人信息安全和隐私保护。使用我们的产品前，请您仔细阅读“
				<text class="link" @tap="openPrivacyContract">{{privacyContractName}} </text>”，
				如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益，感谢您的信任！<br />
			</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 {
		name: 'PrivacyPopup',
		data() {
			return {
				isRead: false,
				showPrivacy: false,
				privacyContractName: '',
				resolvePrivacyAuthorization: null,
			};
		},
		props: {
			position: {
				type: String,
				default: 'center'
			}
		},
		computed: {
			privacyClass() {
				return this.position === 'bottom' ? 'privacy privacy-bottom' : 'privacy';
			},
			contentClass() {
				return this.position === 'bottom' ? 'content content-bottom' : 'content';
			}
		},
		mounted() {
			if (uni.onNeedPrivacyAuthorization) {
				uni.onNeedPrivacyAuthorization((resolve) => {
					this.resolvePrivacyAuthorization = resolve;
				});
			}

			if (uni.getPrivacySetting) {
				uni.getPrivacySetting({
					success: (res) => {
						if (res.needAuthorization) {
							this.privacyContractName = res.privacyContractName;
							this.showPrivacy = true;
						} else {
							this.showPrivacy = false;
						}
					},
				});
			}
		},

		methods: {
			openPrivacyContract() {
				uni.openPrivacyContract({
					success: () => {
						this.isRead = true;
					},
					fail: () => {
						uni.showToast({
							title: '遇到错误',
							icon: 'error',
						});
					},
				});
			},
			exitMiniProgram() {
				// uni.navigateBack();
				wx.exitMiniProgram();

			},
			handleAgreePrivacyAuthorization() {
				this.showPrivacy = false;
				this.$emit('allowPrivacy');
				if (typeof this.resolvePrivacyAuthorization === 'function') {
					this.resolvePrivacyAuthorization({
						buttonId: 'agree-btn',
						event: 'agree',
					});
				}
			},
			closePrivacy() {
				this.showPrivacy = false;
			}
		},
	};
</script>

<style scoped>
	.privacy {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 9999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.privacy-bottom {
		align-items: flex-end;
	}

	.content {
		width: 632rpx;
		padding: 48rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
	}

	.content-bottom {
		position: absolute;
		bottom: 0;
		width: 96%;
		padding: 36rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 16rpx 16rpx 0 0;
	}

	.content .title {
		text-align: center;
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.content .des {
		font-size: 26rpx;
		color: #666;
		margin-top: 40rpx;
		text-align: justify;
		line-height: 1.6;
	}

	.content .des .link {
		color: #1989ff;
		text-decoration: underline;
	}

	.btns {
		margin-top: 48rpx;
		margin-bottom: 12rpx;
		display: flex;
	}

	.btns .item {
		width: 200rpx;
		height: 72rpx;
		overflow: visible;
		display: flex;
		align-items: center;

		justify-content: center;
		/* border-radius: 16rpx; */
		box-sizing: border-box;
		border: none !important;
	}

	.btns .reject {
		background: #f4f4f5;
		color: #1989ff;
		font-size: 14px;
		background: #edf5fe;
		font-weight: 300;
		margin-right: 16rpx;
	}

	.btns .agree {
		width: 200rpx;
		background: #1989ff;
		color: #fff;
		font-size: 16px;

	}

	.privacy-bottom .btns .agree {
		width: 440rpx;

	}
</style>

三、在页面中使用协议弹窗组件

在页面中直接引用<xc-privacyPopup ref=“privacyComponent” position=“center” @allowPrivacy=“allowPrivacy”>即可

1、普通页面使用协议弹窗：

<template>
	<view>
		<!-- 用户隐私保护指引 -->
		<xc-privacyPopup ref="privacyComponent" position="center"></xc-privacyPopup>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		}
	}
</script>

<style lang="scss" scoped>

</style>

2、存在条件判断的页面使用协议弹窗：

<template>
	<view>
		<!-- 用户隐私保护指引 -->
		<xc-privacyPopup ref="privacyComponent" position="center" @allowPrivacy="allowPrivacy"></xc-privacyPopup>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		onLoad() {},
		onShow() {
			// 查询隐私协议
			wx.getPrivacySetting({
				success: res => {
					if (!res.needAuthorization) {
						this.$refs.privacyComponent.closePrivacy();
						// 查询授权，针对有tab切换的页面，可以在onshow中查询隐私授权状态，判断在tab切换后是否需要关闭授权弹框
						console.log('已经同意隐私授权，不需要再次授权')
					}
				},
				fail: () => {},
				complete: () => {}
			})
		},
		methods: {
			// 同意隐私协议
			allowPrivacy() {
				// 同意隐私协议触发事件，有些接口需要同意授权后才能执行，比如获取手机号授权接口，可以在同意隐私协议后，再执行授权获取手机号接口，如果不需要可以不添加该方法
				console.log('同意隐私授权')
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

四、uniapp开发，在manifest.json中添加"usePrivacyCheck" : true；

官方说明：https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

隐私相关功能启用时间延期至 2023年10月17日。在 2023年10月17日之前，在 app.json 中配置 usePrivacyCheck: true 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用。在 2023年10月17日之后，不论 app.json 中是否有配置 usePrivacyCheck，隐私相关功能都会启用。

添加方法，点击manifest.json，再点击源码视图，在mp-weixin模块下添加"usePrivacyCheck" : true；
在这里插入图片描述

五、测试方法

当用户从「微信下拉-最近-最近使用的小程序」中删除小程序，将清空历史同步状态。下次访问小程序后，需要重新同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则。

开发者可通过此方式进行调试，也可以在开发者工具中「清除模拟器缓存-清除授权数据」清空历史同步状态。

线上版本，拉起一次授权同意后，不会再次拉起授权弹框。
在这里插入图片描述

六、配置隐私指引

登录小程序公众平台，点击设置–>基本信息设置
小程序公众平台链接：https://mp.weixin.qq.com/
在这里插入图片描述
找到用户隐私保护指引，点击更新，配置方法，可以参照微信提供的《标准化用户隐私保护指引》
在这里插入图片描述
选择在项目中使用到的隐私接口涉及到的小程序功能，并填写使用的理由，根据要求将隐私保护指引填写完成，并点击确定并生成协议
在这里插入图片描述
在这里插入图片描述
配置完成后，会有微信官方审核，大约需要15分钟-1小时审核完成。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

自己开发一个VSCode插件，快速生成Flex布局代码

自己开发一个VSCode插件，快速生成Flex布局代码

插件CSS Flex 安装地址&#xff1a;VSCode插件安装 GitHub&#xff1a;https://github.com/xutao-o/css-flex-code &#x1f4a1;介绍 这是一个快捷生成CSS Flex布局代码的VS Code插件&#xff0c;类似于Google开发者控制台里的Flex布局工具&#xff0c;就是看谷歌的布局工具…
阅读更多...
stm32之软件模拟IIC

stm32之软件模拟IIC

在之前的文章中分析过在52上的IIC时序&#xff0c;也测试过stm32的自带IIC功能&#xff0c;这里大致写下如何模拟stm32上的IIC。实验硬件基于stm32f103c8t6 废话不多说&#xff0c;先直接上代码。 一、源码 头文件 #include "stdint.h" #include "gpio.h&quo…
阅读更多...
编译u-boot的过程中遇到的问题

编译u-boot的过程中遇到的问题

我使用的是uboot-2016.tar.bz2这个压缩包&#xff0c;将其解压之后进入这个文件夹&#xff0c;里面所包含的文件如下图所示。 这个文件夹下包含着三个Shell脚本文件&#xff0c;都是可执行的&#xff0c;打开其中一个其内容如下。 根据自己的开发板类型决定执行哪一个Shell脚…
阅读更多...
基于Python实现的快递管理系统源码+数据库，采用PyQt6实现GUI界面

基于Python实现的快递管理系统源码+数据库，采用PyQt6实现GUI界面

快递管理系统 完整代码下载地址&#xff1a;快递管理系统 介绍 通过对传统的快递收发流程进行分析&#xff0c;完成网上快递管理系统的分析设计与开发&#xff0c;使客户能方便在网站上查询自己的快件信息以及网上寄件&#xff0c;同时管理员又能对每天的收到快件进行登记和…
阅读更多...
一步步教你如何搭建K8S集群

一步步教你如何搭建K8S集群

一、环境配置 三台CentOS7虚拟机&#xff0c;默认配置&#xff0c;内存2GB、处理器2核心。 先更新下系统 1 sudo yum update 2 sudo yum upgrade 二、安装并启动 docker 1 yum -y install wget 2 wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo …
阅读更多...
Unity中Shader需要了解的点与向量

Unity中Shader需要了解的点与向量

文章目录 前言一、点和向量的区别二、向量加法减法1、向量加法2、向量减法(可以把向量减法转化为向量加法) 三、向量的模四、标量![在这里插入图片描述](https://img-blog.csdnimg.cn/03df81df3cdf47989a11605d5f5e7da5.png)1、向量与标量的乘法 前言 Unity中Shader了解使用的…
阅读更多...
3个变化3秒区别MT4和MT5

3个变化3秒区别MT4和MT5

自从mt5上市以来&#xff0c;很多投资者无法快速区别MT4和MT5&#xff0c;其实很简单&#xff0c;通过3个变化anzo capital昂首资本3秒一眼区别。 外观区别 很难从视觉上定义MT4和MT5的区别。在新的平台版本中&#xff0c;开发者专注于平台功能的升级&#xff0c;几乎没有改变…
阅读更多...
node 解决多版本配置 error:03000086:digital 引起的问题 已解决

node 解决多版本配置 error:03000086:digital 引起的问题 已解决

在日常后端工作中&#xff0c;难免会安装前端的项目&#xff0c;今天有旧项目需要维护&#xff0c;但是 提示 node版本过高&#xff0c;或者不是长维护版本&#xff0c;部分分享说&#xff0c;加 opensll 过滤能解决&#xff0c;但是 还是不行&#xff0c;索性来这个 底朝天的找…
阅读更多...
阿里云服务器共享型和企业级独享有什么区别？

阿里云服务器共享型和企业级独享有什么区别？

阿里云ECS云服务器共享型和企业级有什么区别&#xff1f;企业级就是独享型&#xff0c;共享型和企业级云的主要区别CPU调度模式&#xff0c;共享型是非绑定CPU调度模式&#xff0c;企业级是固定CPU调度模式&#xff0c;共享型云服务器在高负载时计算性能可能出现波动不稳定&…
阅读更多...
XC1336 高侧过压保护器 30V过压保护IC 可做OVP、高压开关

XC1336 高侧过压保护器 30V过压保护IC 可做OVP、高压开关

XC1336是一个高压30V过电压保护器&#xff08;OVP&#xff09;&#xff0c;其电阻较低&#xff0c;只需改变外部连接。它可以用作OVP设备或高压开关。 XC1336由一个电荷泵、一个可配置的功率MOSFET、一个电压参考、一个栅极驱动器和一些逻辑和保护模块组成。 XC1336可以对输入浪…
阅读更多...
Linux发行版X华为鲲鹏openEuler

Linux发行版X华为鲲鹏openEuler

前言 作为硬件和软件之间的桥梁&#xff0c;我接触的最多的就是Windows和Centos&#xff0c;还记得最初的鸟哥的Linux私房菜&#xff0c;而Centos即将停止维护更新&#xff08;Centos7维护到2024&#xff09;&#xff0c;对于个人学习来说没有任何影响&#xff0c;但是对于企业…
阅读更多...
算法通过村第十关-快排|白银笔记|快排实战

算法通过村第十关-快排|白银笔记|快排实战

一个程序员一生中可能会邂逅各种各样的算法&#xff0c;但总有那么几种&#xff0c;是作为一个程序员一定会遇见且大概率需要掌握的算法。今天就来聊聊这些十分重要的“必抓&#xff01;”算法吧~ 文章目录 前言数组第K大总结 前言 这是快排中的经典算法题&#xff0c;但是很多…
阅读更多...
C语言 Cortex-A7核 SPI 实验

C语言 Cortex-A7核 SPI 实验

1 实验目的 1、数码管显示相同的值0000 1111 2222 .... 9999 2、数码管不同的值1234 2 代码 include/spi.h #ifndef __SPI_H__ #define __SPI_H__ #includ…
阅读更多...
ROS2 从头开始​​：第 2 部分 - 包、发布者和订阅者

ROS2 从头开始​​：第 2 部分 - 包、发布者和订阅者

一、说明 在这篇文章中，我们将重点关注 ROS 2 包、发布者和订阅者。具体来说，我们将涵盖以下主题：1. 什么是 ROS 2 包以及为什么它很重要？2.如何使用ros2 pkg create命令创建ROS 2包？ 3. 如何使用该rclcpp库在ROS 2中创建发布者和订阅者？ 让我们开始吧！ 二、套…
阅读更多...
世界第一ERP厂商SAP，推出类ChatGPT产品—Joule

世界第一ERP厂商SAP，推出类ChatGPT产品—Joule

9月27日&#xff0c;世界排名第一ERP厂商SAP在官网宣布&#xff0c;推出生成式AI助手Joule&#xff0c;并将其集成在采购、供应链、销售、人力资源、营销、数据分析等产品矩阵中&#xff0c;帮助客户实现降本增效。 据悉&#xff0c;Joule是一款功能类似ChatGPT的产品&#xf…
阅读更多...
HONEYWELL 05704-A-0144 端子模块

HONEYWELL 05704-A-0144 端子模块

HONEYWELL 05704-A-0144 端子模块用于连接电缆、导线或连接器&#xff0c;以便将电信号或电源引出到不同的部件或设备中。这些模块在各种工业和电子应用中都有广泛的用途&#xff0c;通常具有以下特点&#xff1a; 连接性&#xff1a;HONEYWELL 05704-A-0144 端子模块提供可靠的…
阅读更多...
[C++ 网络协议] I/O流分离所带来的半关闭问题

[C++ 网络协议] I/O流分离所带来的半关闭问题

1.问题和解决方法 根据所学内容&#xff0c;I/O流分离现如今有如下2种方法&#xff1a; 1.调用进程fork函数&#xff0c;分离出子进程&#xff0c;主进程和子进程分别进行输入流的读和输出流的写。 2.用FILE指针按读模式和写模式将输入流和输出流进行区分。 第一种方法&#…
阅读更多...
【word密码】为什么word设置只读模式之后，还能编辑？

【word密码】为什么word设置只读模式之后，还能编辑？

Word文档设置了只读模式&#xff0c;是可以编辑的&#xff0c;但是当我们进行保存的时候就会发现&#xff0c;word提示需要重命名并选择新路径才能够保存。 这种操作&#xff0c;即使可以编辑文字&#xff0c;但是原文件是不会受到影响的&#xff0c;编辑之后的word文件会保存到…
阅读更多...
外汇天眼：Patrick Wonsey挪用340万美元！涉嫌外汇和二元期权欺诈

外汇天眼：Patrick Wonsey挪用340万美元！涉嫌外汇和二元期权欺诈

美国衍生品市场监管机构商品期货交易委员会&#xff08;CFTC&#xff09;宣布&#xff0c;已在佛罗里达州中区地区法院对佛罗里达州里维尤(Riverview)的Patrick Wonsey提起民事执法诉讼。 诉状指控Wonsey涉嫌欺诈和挪用资金&#xff0c;与一项涉及杠杆或保证金的零售外汇&…
阅读更多...
变电站无人值守方案：提升效率与增强安全性

变电站无人值守方案：提升效率与增强安全性

随着信息技术、人工智能、大数据的发展进步&#xff0c;电力行业正逐步向智能化转型。其中&#xff0c;无人值守变电站成为了现代电力系统的明显趋势。这种新型的运营模式不仅提高了效率&#xff0c;还极大地增强了电力系统的安全性。 无人值守变电站的核心概念是在没有人类现场…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023