微信小程序 隐私协议弹窗授权

news2025/5/27 19:12:37

开发微信小程序的第一步往往是隐私协议授权,尤其是在涉及用户隐私数据时,必须确保用户明确知晓并同意相关隐私政策。我们才可以开发后续的小程序内容。友友们在按照文档开发时可能会遇到一些问题,我把所有的授权方法和可能遇到的问题都整理出来,欢迎大家一起交流哦!

前置准备:(在授权隐私协议弹窗前必须准备的,不能少!!!)

1.确保小程序管理后台填写的《用户隐私保护协议》已经通过,状态是下面这种就没问题了

2.在app.json中或者manifest.json中配置__usePrivacyCheck__:true(如果你使用微信小程序开发就用app.json,如果你使用uniapp开发,就在manifest.json中配置)下面是manifest.json中的配置,app.json李也一样加上__usePrivacyCheck__:true就好了

方法一:官方隐私弹窗

为了方便小程序开发者们开发,我们自己不用手写隐私弹窗啦,只要前置准备按照我说的做好,官方会自动寻找我们在小程序中使用的一个隐私相关接口,当小程序加载到第一个隐私相关接口时,就会自动弹窗。(微信内部逻辑就是微信方会自动判断此次调用是否需要触发wx.onNeedPrivacyAuthorization 事件,如果我们不做处理,微信就自己弹窗。这种方式适合简单的需求,如果我们要更改样式,还是建议友友们自定义隐私协议弹窗。)

方法二:自定义隐私协议弹窗

梳理流程逻辑:(tips:文章最下面有完整代码,直接复制粘贴就可以使用啦)

现在隐私协议弹窗有两种方式:第一种是需要调用隐私协议时弹窗,第二种是小程序进入页面就授权,只需要授权一次,授权之后就可以使用所有隐私接口了。现在我们一般都是用第二种,更符合用户体验。咱们先梳理下第二种方法的流程:注意接下来我使用的是uniapp

1.进入首页使用 uni.getPrivacySetting 接口判断是否需要授权,需要则展示弹窗;

2.弹窗弹开,用户点击查看隐私协议内容时,我们使用 uni.openPrivacyContract 接口打开隐私保护指引页面

3.用户点击同意关闭弹窗

4.用户点击拒绝,我们就直接让他退出小程序

1.进入首页使用 uni.getPrivacySetting 接口判断是否需要授权,需要则展示弹窗;

这里我写了一个弹窗,然后在onLoad函数里使用wx.getPrivacySetting去判断隐私协议弹窗是否授权,如果函数返回needAuthorization为true就代表用户还没授权,如果没授权就打开弹窗,返回false就是授权过了如果授权过了我们就不管它:

<template>
		<u-popup    :show="isPrivacy" mode="bottom"  :round="20" >
			<view class="privacyBox">
				<view class="privacyTit">用户隐私保护提示</view>
				<view class="privacyDesc">
					<view>
					感谢您的使用,在您使用Anywheel服务之前,请仔细阅读
					</view>
					<text @click="openClick" style="color:#20D169">《我的 小程序隐私保护指引》</text>
					<view >
						如您同意该指引,请点击"同意"开始使用本程序
					</view>
				</view>
				<view style="display:flex;margin-top:50rpx;height:92rpx;">
				    <button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒绝</button>
				    <button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button>
				</view>
			</view>
		</u-popup>
</template>
<script>
export default {
    data(){
        return {
            isPrivacy:false
        }
    },
    onLoad(){
        uni.getPrivacySetting({
		    success: res => {
			    // res.needAuthorization 为true代表用户还没授权,这时候就需要弹出授权弹窗
				if (res.needAuthorization) {
				    this.isPrivacy = true
				}else {
				// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,直接进行页面正常流程

				}
			},
			fail: () => {
			},
		})

    }
}

</script>
2.弹窗弹开,用户点击查看隐私协议内容时,我们使用 wx.openPrivacyContract 接口打开隐私保护指引页面

弹窗打开后,如果用户想点击弹窗里的隐私协议想查看具体内容怎么办,我这里绑定了openClick方法,openClick方法中调用uni.openPrivacyContract()方法就可以了。如果你们不能使用uni.openPrivacyContract()换成wx.openPrivacyContract()也行

<template>
		<u-popup    :show="isPrivacy" mode="bottom"  :round="20" >
			<view class="privacyBox">
				<view class="privacyTit">用户隐私保护提示</view>
				<view class="privacyDesc">
					<view>
					感谢您的使用,在您使用Anywheel服务之前,请仔细阅读
					</view>
					<text @click="openClick" style="color:#20D169">《我的 小程序隐私保护指引》</text>
					<view >
						如您同意该指引,请点击"同意"开始使用本程序
					</view>
				</view>
				<view style="display:flex;margin-top:50rpx;height:92rpx;">
				    <button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒绝</button>
				    <button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button>
				</view>
			</view>
		</u-popup>
</template>
<script>
export default {
    data(){
        return {
            isPrivacy:false
        }
    },
    onLoad(){
        uni.getPrivacySetting({
		    success: res => {
			    // res.needAuthorization 为true代表用户还没授权,这时候就需要弹出授权弹窗
				if (res.needAuthorization) {
				    this.isPrivacy = true
				}else {
				// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,直接进行页面正常流程

				}
			},
			fail: () => {
			},
		})

    },
    methods:{
		openClick() {
			wx.openPrivacyContract({
				success: () => {}, // 打开成功
				fail: () => {}, // 打开失败
				complete: () => {}
			})
		},
    }
}

</script>
3.用户点击同意关闭弹窗

注意,用户同意这块我用button按钮写的,button按钮上有open-type="agreePrivacyAuthorization"属性,当我们绑定 @agreeprivacyauthorization="handleAgree"时,就自动通知微信那边用户已经同意授权了,具体代码在下面:

<template>
		<u-popup    :show="isPrivacy" mode="bottom"  :round="20" >
			<view class="privacyBox">
				<view class="privacyTit">用户隐私保护提示</view>
				<view class="privacyDesc">
					<view>
					感谢您的使用,在您使用Anywheel服务之前,请仔细阅读
					</view>
					<text @click="openClick" style="color:#20D169">《我的 小程序隐私保护指引》</text>
					<view >
						如您同意该指引,请点击"同意"开始使用本程序
					</view>
				</view>
				<view style="display:flex;margin-top:50rpx;height:92rpx;">
				    <button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒绝</button>
				    <button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button>
				</view>
			</view>
		</u-popup>
</template>
<script>
export default {
    data(){
        return {
            isPrivacy:false
        }
    },
    onLoad(){
        uni.getPrivacySetting({
		    success: res => {
			    // res.needAuthorization 为true代表用户还没授权,这时候就需要弹出授权弹窗
				if (res.needAuthorization) {
				    this.isPrivacy = true
				}else {
				// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,直接进行页面正常流程

				}
			},
			fail: () => {
			},
		})

    },
    methods:{
		openClick() {
			wx.openPrivacyContract({
				success: () => {}, // 打开成功
				fail: () => {}, // 打开失败
				complete: () => {}
			})
		},
		handleAgree() {
			let that = this
		    // 如果用户之前已经同意过隐私授权,会立即返回success回调
		    wx.requirePrivacyAuthorize({
		        success: res => {
		            that.isPrivacy = false
					// 同意协议后,后面正常执行后续流程
					
		        }
		    });
		},
    }
}

</script>
4.用户点击拒绝,我们就直接让他退出小程序

用户拒绝隐私协议授权,代表着我们的小程序他是没法使用的,我们使用uni.exitMiniProgram给他退出小程序即可

下面是完整的代码:直接复制粘贴就可以使用:

<template>
		<u-popup    :show="isPrivacy" mode="bottom"  :round="20" >
			<view class="privacyBox">
				<view class="privacyTit">用户隐私保护提示</view>
				<view class="privacyDesc">
					<view>
					感谢您的使用,在您使用Anywheel服务之前,请仔细阅读
					</view>
					<text @click="openClick" style="color:#20D169">《我的 小程序隐私保护指引》</text>
					<view >
						如您同意该指引,请点击"同意"开始使用本程序
					</view>
				</view>
				<view style="display:flex;margin-top:50rpx;height:92rpx;">
				    <button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒绝</button>
				    <button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button>
				</view>
			</view>
		</u-popup>
</template>
<script>
export default {
    data(){
        return {
            isPrivacy:false
        }
    },
    onLoad(){
        uni.getPrivacySetting({
		    success: res => {
			    // res.needAuthorization 为true代表用户还没授权,这时候就需要弹出授权弹窗
				if (res.needAuthorization) {
				    this.isPrivacy = true
				}else {
				// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,直接进行页面正常流程

				}
			},
			fail: () => {
			},
		})

    },
    methods:{
		openClick() {
			wx.openPrivacyContract({
				success: () => {}, // 打开成功
				fail: () => {}, // 打开失败
				complete: () => {}
			})
		},
		handleAgree() {
			let that = this
		    // 如果用户之前已经同意过隐私授权,会立即返回success回调
		    wx.requirePrivacyAuthorize({
		        success: res => {
		            that.isPrivacy = false
					// 同意协议后,后面正常执行后续流程
					
		        }
		    });
		},
		closePopup() {
		    this.isPrivacy = false
			uni.exitMiniProgram({
				success: function() {
					console.log('退出小程序成功');
				},
				fail: function(err) {
					console.log('退出小程序失败', err);
				}
			})
		},
    }
}

</script>
<style>
privacyBox {
		/* width: 600rpx; */
		padding: 60rpx 60rpx 80rpx 60rpx;
		box-sizing: border-box;
		line-height: 1.5;
	}
 
	.privacyTit {
		font-size: 32rpx;
		font-weight: bold;
		// color: $uni-text-main;
		text-align: center;
		overflow: hidden;
	}
 
	.privacyDesc {
		font-size: 28rpx;
		// color: $uni-text-sub;
		overflow: hidden;
		margin-top: 30rpx;
	}
 
	.privacyDesc text {
		// color: $uni-primary;
	}
 
	.privacyPost {
		overflow: hidden;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
 
	.privacyPost .refuseBtn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		border-radius: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.privacyPost .agreeBtn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		border-radius: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-left: 20rpx;
	}
</style>

遇到的问题及解决:

1.官方隐私协议弹窗和自己开发的自定义协议弹窗同时出现:

我在开发的过程中出现了官方隐私协议弹窗和自定义隐私协议弹窗同是出现的情况,原因是我在app.vue中使用到了隐私相关接口,官方检测到隐私协议接口就会弹隐私协议弹窗,而我们自定义隐私协议弹窗一般在首页index.vue中处理,所以就会出现两次。我们可以在app.vue页面的onLaunch函数中加入下面这段代码,就只展示我们自定义的弹窗啦

onLaunch() {
			// 隐私协议前置
			if(uni.onNeedPrivacyAuthorization){
				uni.onNeedPrivacyAuthorization((resolve)=>{
					console.log('onNeedPrivacyAuthorization',resolve)
				})
			}
}
2.needAuthorization一直返回false

这个时候就看下我写的前置准备工作有没有做好,一般出现在隐私协议被拒的情况,审核不通过是进行不了下一步的,只有下面这种状态才可以,一定别忘了哦!

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

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

相关文章

金众诚业财一体化解决方案如何提升项目盈利能力?

在工程项目管理领域&#xff0c;复杂的全生命周期管理、成本控制的精准性以及业务与财务的高效协同&#xff0c;是决定项目盈利能力的核心要素。随着数字化转型的深入&#xff0c;传统的项目管理方式已难以满足企业对效率、透明度和盈利能力的需求。基于金蝶云星空平台打造的金…

LabVIEW中EtherCAT从站拓扑离线创建及信息查询

该 VI 主要用于演示如何离线创建 EtherCAT 从站拓扑结构&#xff0c;并查询从站相关信息。EtherCAT&#xff08;以太网控制自动化技术&#xff09;是基于以太网的实时工业通信协议&#xff0c;凭借其高速、高效的特性在自动化领域广泛应用。与其他常见工业通讯协议相比&#xf…

Flutter 3.32 新特性

2天前&#xff0c;Flutter发布了最新版本3.32&#xff0c;我们来一起看下29到32有哪些变化。 简介 欢迎来到Flutter 3.32&#xff01;此版本包含了旨在加速开发和增强应用程序的功能。准备好在网络上进行热加载&#xff0c;令人惊叹的原生保真Cupertino&#xff0c;以及与Fir…

windows和mac安装虚拟机-详细教程

简介 虚拟机&#xff1a;Virtual Machine&#xff0c;虚拟化技术的一种&#xff0c;通过软件模拟的、具有完整硬件功能的、运行在一个完全隔离的环境中的计算机。 在学习linux系统的时候&#xff0c;需要安装虚拟机&#xff0c;在虚拟机上来运行操作系统&#xff0c;因为我使…

【C++】vector容器实现

目录 一、vector的成员变量 二、vector手动实现 &#xff08;1&#xff09;构造 &#xff08;2&#xff09;析构 &#xff08;3&#xff09;尾插 &#xff08;4&#xff09;扩容 &#xff08;5&#xff09;[ ]运算符重载 5.1 迭代器的实现&#xff1a; &#xff08;6&…

使用Docker Compose部署Dify

目录 1. 克隆项目代码2. 准备配置文件3. 配置环境变量4. 启动服务5. 验证部署6. 访问服务注意事项 1. 克隆项目代码 首先&#xff0c;克隆Dify项目的1.4.0版本&#xff1a; git clone https://github.com/langgenius/dify.git --branch 1.4.02. 准备配置文件 进入docker目录…

杰发科技AC7840——CSE硬件加密模块使用(1)

1. 简介 2. 功能概述 3. 简单的代码分析 测试第二个代码例程 初始化随机数 这里的CSE_CMD_RND在FuncID中体现了 CSE_SECRET_KEY在17个用户KEY中体现 最后的读取RNG值&#xff0c;可以看出计算结果在PRAM中。 总的来看 和示例说明一样&#xff0c;CSE 初次使用&#xff0c;添加…

前端地图数据格式标准及应用

前端地图数据格式标准及应用 坐标系EPSGgeojson标准格式基于OGC标准的地图服务shapefile文件3D模型数据常见地图框架 坐标系EPSG EPSG&#xff08;European Petroleum Survey Group&#xff09;是一个国际组织&#xff0c;负责维护和管理地理坐标系统和投影系统的标准化编码 E…

threejs几何体BufferGeometry顶点

1. 几何体顶点位置数据和点模型 本章节主要目的是给大家讲解几何体geometry的顶点概念,相对偏底层一些&#xff0c;不过掌握以后&#xff0c;你更容易深入理解Threejs的几何体和模型对象。 缓冲类型几何体BufferGeometry threejs的长方体BoxGeometry、球体SphereGeometry等几…

向量数据库选型实战指南:Milvus架构深度解析与技术对比

导读&#xff1a;随着大语言模型和AI应用的快速普及&#xff0c;传统数据库在处理高维向量数据时面临的性能瓶颈日益凸显。当文档经过嵌入模型处理生成768到1536维的向量后&#xff0c;传统B-Tree索引的检索效率会出现显著下降&#xff0c;而现代应用对毫秒级响应的严苛要求使得…

java方法重写学习笔记

方法重写介绍 子类和父类有两个返回值&#xff0c;参数&#xff0c;名称都一样的方法&#xff0c; 子类的方法会覆盖父类的方法。 调用 public class Overide01 {public static void main(String[] args) {Dog dog new Dog();dog.cry();} }Animal类 public class Animal {…

TensorBoard安装与基本操作指南(PyTorch)

文章目录 什么是TensorBoard&#xff1f;TensorBoardX与TensorBoard的依赖关系易混关系辨析Pytorch安装TensorBoard并验证1. TensorBoard安装和访问2. TensorBoard主要界面介绍实用技巧 什么是TensorBoard&#xff1f; TensorBoard是TensorFlow生态系统中的一款强大的可视化工…

2025/5/25 学习日记 linux进阶命令学习

tree:以树状结构显示目录下的文件和子目录&#xff0c;方便直观查看文件系统结构。 -d&#xff1a;仅显示目录&#xff0c;不显示文件。-L [层数]&#xff1a;限制显示的目录层级&#xff08;如 -L 2 表示显示当前目录下 2 层子目录&#xff09;。-h&#xff1a;以人类可读的格…

【MPC控制 - 从ACC到自动驾驶】4 MPC的“实战演练”:ACC Simulink仿真与结果深度解读

【MPC控制 - 从ACC到自动驾驶】MPC的“实战演练”&#xff1a;ACC Simulink仿真与结果深度解读 在过去的几天里&#xff0c;我们一起&#xff1a; Day 1: 认识了ACC这位聪明的“跟车小能手”和MPC这位“深谋远虑的棋手”。Day 2: 给汽车“画了像”&#xff0c;建立了它的纵向…

OPENEULER搭建私有云存储服务器

一、关闭防火墙和selinux 二、下载相关软件 下载nginx&#xff0c;mariadb、php、nextcloud 下载nextcloud&#xff1a; sudo wget https://download.nextcloud.com/server/releases/nextcloud-30.0.1.zip sudo unzip nextcloud-30.0.1.zip -d /var/www/html/ sudo chown -R…

卷积神经网络(CNN)深度讲解

卷积神经网络&#xff08;CNN&#xff09; 本篇博客参考自大佬的开源书籍&#xff0c;帮助大家从头开始学习卷积神经网络&#xff0c;谢谢各位的支持了&#xff0c;在此期待各位能与我共同进步​ 卷积神经网络&#xff08;CNN&#xff09;是一种特殊的深度学习网络结构&#x…

Docker部署Zookeeper集群

简介 ZooKeeper 是一个开源的分布式协调服务&#xff0c;由 Apache 软件基金会开发和维护。它主要用于管理和协调分布式系统中的多个节点&#xff0c;以解决分布式环境下的常见问题&#xff0c;如配置管理、服务发现、分布式锁等。ZooKeeper 提供了一种可靠的机制&#xff0c;…

数据结构—(概述)

目录 一 数据结构&#xff0c;相关概念 1. 数据结构&#xff1a; 2. 数据(Data): 3. 数据元素(Data Element): 4. 数据项&#xff1a; 5. 数据对象(Data Object): 6. 容器&#xff08;container&#xff09;&#xff1a; 7. 结点&#xff08;Node&#xff09;&#xff…

华为OD机试真题—— 流水线(2025B卷:100分)Java/python/JavaScript/C/C++/GO最佳实现

2025 B卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式; 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析; 本文收录于专栏:《2025华为OD真题目录+全流程解析+备考攻略+经验分…

【数据架构01】数据技术架构篇

✅ 9张高质量数据架构图&#xff1a;大数据平台功能架构、数据全生命周期管理图、AI技术融合架构等&#xff1b; &#x1f680;无论你是数据架构师、治理专家&#xff0c;还是数字化转型负责人&#xff0c;这份资料库都能为你提供体系化参考&#xff0c;高效解决“架构设计难、…