微信小程序（uniapp）隐私授权弹窗

于 2025-04-24 11:53:38 发布
阅读量989 收藏 22
点赞数 43
分类专栏： 微信小程序开发实战全攻略 文章标签： 微信小程序 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rocky_Time/article/details/147460664
版权

微信小程序（uniapp）隐私授权弹窗实现指南

在微信小程序开发中，隐私授权是保障用户权益的重要环节。随着用户对隐私保护的重视，微信官方提供了相关接口，如 uni.getPrivacySetting 和 uni.openPrivacyContract，帮助开发者规范隐私授权流程。本文将详细介绍如何在 uniapp 中实现隐私授权弹窗，并提供完整的实现思路和代码示例。

一、隐私授权的背景与重要性

  1. 隐私授权的背景
    根据相关法律法规和微信平台要求，小程序在收集、使用用户个人信息前，必须明确告知用户并获得其授权。

  2. 隐私授权的重要性

    • 保障用户知情权，提升用户信任度。
    • 避免因违规收集用户信息导致的法律风险。
    • 提升小程序通过审核的概率，确保合规运营。
二、uniapp 隐私授权相关接口

  1. uni.getPrivacySetting
    该接口用于获取用户的隐私设置，包括是否同意隐私协议。

  2. uni.openPrivacyContract
    该接口用于打开隐私协议详情页面，用户可查看具体的隐私条款。

三、实现隐私授权弹窗的完整步骤
1. 检查用户隐私授权状态

在小程序启动时或需要收集用户信息前，调用 uni.getPrivacySetting 检查用户是否已同意隐私协议。

2. 弹出隐私授权提示

如果用户未同意隐私协议，弹出自定义弹窗，提示用户阅读并同意隐私协议。

3. 引导用户查看隐私协议

在弹窗中提供按钮，用户点击后可调用 uni.openPrivacyContract 打开隐私协议详情页面。

4. 用户同意后继续操作

用户同意隐私协议后，记录授权状态，并继续后续操作。

四、详细实现代码
1. 检查隐私授权状态

在App.vue globalData中定义 privacyContractName 和 showPrivacy 两个变量。使用uni.getPrivacySetting 检查是否需要隐私协议授权。

注意：uni.getPrivacySetting 方法 小程序基础版本库必须高于或等于3.0.0，不然方法报错。

	// App.vue
	globalData: {
		privacyContractName: '', //隐私协议的名字
		showPrivacy: false //控制隐私弹窗显隐
	},
	onLaunch(option) {
		// 隐私授权弹窗
		uni.getPrivacySetting({
			success: res => {
				console.log('是否需要授权：', res.needAuthorization, '隐私协议的名称为：', res.privacyContractName);
				if (res.needAuthorization) {
					this.globalData.privacyContractName = res.privacyContractName;
					this.globalData.showPrivacy = true;
				} else {
					this.globalData.showPrivacy = false;
				}
			}
		});
	}
2. 封装隐私授权弹窗组件

创建一个名为 PrivacyPopup.vue 的组件文件。添加以下代码：

<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>

export default {
		name: 'privacyPopup',
		data() {
			return {
				privacyContractName: '',
				showPrivacy: false
			};
		},
		created() {
			setTimeout(() => {
				this.showPrivacy = getApp().globalData.showPrivacy;
				this.privacyContractName = getApp().globalData.privacyContractName;
			}, 500);
		},
		methods: {
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				const that = this;
				uni.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() {
				uni.openPrivacyContract({
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'error'
						});
					}
				});
			}
		}
	};

.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;
					box-sizing: border-box;
					border: none;
				}

				.reject {
					background: #f4f4f5;
					color: #909399;
				}

				.agree {
					background: #07c160;
					color: #fff;
				}
			}
		}
	}

完整代码：

<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 {
		name: 'privacyPopup',
		data() {
			return {
				privacyContractName: '',
				showPrivacy: false
			};
		},
		created() {
			setTimeout(() => {
				this.showPrivacy = getApp().globalData.showPrivacy;
				this.privacyContractName = getApp().globalData.privacyContractName;
			}, 500);
		},
		methods: {
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				const that = this;
				uni.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() {
				uni.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;
					box-sizing: border-box;
					border: none;
				}

				.reject {
					background: #f4f4f5;
					color: #909399;
				}

				.agree {
					background: #07c160;
					color: #fff;
				}
			}
		}
	}
</style>
五、代码解析
  1. uni.getPrivacySetting
    该接口用于获取用户的隐私设置。如果 res.privacyContractName 为空，表示用户未同意隐私协议。
  2. 自定义弹窗
    使用 v-if 控制弹窗的显示，提供“查看隐私协议”、“同意”和“不同意”按钮。
  3. uni.openPrivacyContract
    用户点击“查看隐私协议”按钮后，调用该接口打开隐私协议详情页面。
  4. 用户同意或不同意
    根据用户的选择，记录授权状态并提示相应信息。
六、注意事项
  1. 隐私协议的合规性
    确保隐私协议内容符合相关法律法规要求，并在微信后台进行备案。
  2. 用户体验
    隐私授权弹窗应简洁明了，避免过度打扰用户。
  3. 接口调用频率
    避免频繁调用 uni.getPrivacySetting，建议在必要时（如首次启动、收集用户信息前）调用。
  4. 错误处理
    在调用接口时，做好错误处理，确保用户体验。
  5. 小程序基础版本库
    版本库必须高于或等于3.0.0，否则 uni.getPrivacySetting 会报错。
七、总结

通过 uniapp 提供的 uni.getPrivacySetting 和 uni.openPrivacyContract 接口，开发者可以轻松实现隐私授权弹窗功能，确保小程序合规运营。

微信小程序接入隐私弹窗说明及详细过程
小创果技术交流博客
09-08 4444
相信各位做小程序的小伙伴在微信小程序后台应该都接到了官方通知的小程序隐私新规，如果还未收到的小程序可以看一下：为规范开发者的用户个人信息处理行为，保障用户合法权益，自2023年9月15日起，对于涉及处理用户个人信息的小程序开发者，微信要求，仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后，方可调用微信提供的隐私接口。如未在规定时间内完成操作，后续代码提审与线上版本相应...
uniapp开发小程序实现全局弹窗,可在js中调用
weixin_40466351的博客
07-30 3498
由于微信小程序API showModal 无法自定义样式，我们小程序的整体风格偏黑，所以不得不修改样式，但是我们的请求都进行了拦截，在拦截处弹出错误提示，在js中进行了showModal 的调用。
uniapp微信隐私授权弹窗、隐私保护协议弹窗组件（vue3最新版本，DCloud插件市场导入即可使用）
最新发布
阿Q
03-22 978
由于微信官网的隐私保护指引更新，在需要用户授权时，需要弹出隐私授权弹窗才可正常使用；uniapp微信隐私授权弹窗组件（vue3最新版本，DCloud插件市场导入即可使用）
uni-app开发微信小程序,常用的几种弹窗
weixin_45395283的博客
09-02 1062
【代码】uni-app开发微信小程序,常用的几种弹窗。
uniapp微信小程序《隐私保护协议》弹窗处理流程
你好！刘斩仙
09-11 1万+
3.本示例采用方法2，因为就一个页面需要用到音视频授权，流程为进入需要使用的页面，弹出隐私授权，等待用户确认后，依次弹出音频授权、视频授权确认，让用户一次性点完，以免多处导致用户不耐烦。很多人前两步没做或者做的不对，导致出现needAuthorization一直为false情况。2.在使用到的页面弹出（繁琐，但是用户体验好，有些小程序可能就一两个页面涉及）uniapp在manifest.json中添加！1.进入小程序就弹（对开发来说好，就是用户体验不好）必须设置且审核通过！
微信小程序新版隐私协议弹窗实现最新版
大爱仙尊
09-02 9871
以下指南中涉及的 getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 等接口目前可以正常接入调试。用户初始化进入小程序时，弹出授权窗口，用户点击登录按钮时，如果未授权也弹出此窗口。
9月15日之前微信小程序-隐私协议弹窗组件,即插即用
09-01
8 月 10 日微信官方发布公告 ,关于小程序隐私保护指引设置的公告，从 2023 年 9 月 15 日起必须用户点击同意隐私保护政策并同步给微信之后，开发者才可以调用微信提供的隐私接口。 注意事项： 1.先在小程序后台设置...
uniapp微信隐私保护弹出框 隐私协议弹出框
09-10
在使用uniapp开发微信小程序或H5应用时，为了符合微信的隐私政策，开发者需要为用户提供明确的隐私协议提示。本教程将详细介绍如何在uniapp中实现微信隐私保护弹出框以及隐私协议的展示。 uniapp是一个基于Vue.js的...
微信环境下uniapp隐私弹窗组件快速集成指南
本篇资源摘要信息介绍了如何在uniapp开发的微信小程序中引入并实现一个隐私保护弹出框。通过明确的步骤和开源组件的使用，开发者可以轻松解决隐私政策的展示问题，同时符合微信小程序对用户隐私保护的要求。文档强调...
uniapp微信小程序端实现微信登录
m0_51431448的博客
07-08 3435
从网上看了一些，好像说是要先调用uni.getUserProfile 或者uni.getUserInfo获取用户信息后，然后再调用uni.login才行，但是我看着uni.getUserProfile和uni.getUserInfo 返回的都是一些匿名信息（nickName: "微信用户", 头像也是统一的灰色头像），不知道有啥用哦，应该是之前是可以正常返回的，后来不知哪个版本后应该是为了用户的隐私、安全啥的，就都返回匿名信息了。（提前向用户发起授权请求。
小程序隐私保护授权处理方式之弹窗组件
热门推荐
SunnyRun
08-30 1万+
调用wx.getUserProfile进行授权时，返回错误信息：{errMsg: “getUserProfile:fail api scope is not declared in the privacy agreement”, errno: 112} 是因为微信小程序登录，增加了用户是否查看隐私协议的验证，不跳转到隐私协议，就不让用户登录。当前组件做了隐私保护指引弹窗界面，直接引用，需要授权时展示弹窗，当用户点击“拒绝”直接退出小程序，点击“同意”同步结果给微信且以后不再弹窗，之后可以正常使用隐私接口。
小程序添加隐私保护指引弹框（包含配置隐私保护指引方法）
m0_47791238的博客
09-27 1万+
9 月 15 号之后涉及隐私的接口将无法使用,严重影响业务逻辑。开发者要做的就是做一个弹窗提示用户阅读隐私保护指引，在用户点击“同意”按钮之后同步给微信，之后微信才允许开发者调用隐私接口，并且还会检测用户是否点击了按钮。
微信小程序添加用户授权《隐私保护协议》
keke11211的博客
09-05 3790
小程序隐私保护协议
【微信小程序 uniapp】 ws-wx-privacy 微信隐私保护弹出框 隐私协议弹出框
AAAXiaoApple的博客
09-05 1973
【微信小程序 uniapp】 ws-wx-privacy 微信隐私保护弹出框 隐私协议弹出框
uniapp 微信小程序最新隐私弹窗更新方案，更新后无法登录问题解决方案
小马总的博客
09-08 1936
若出现确认隐私后无法登录情况，请使用微信开发者工具推送低版本调试基础库降低到。
小程序实现隐私权限政策提示
student_zz的博客
08-19 1027
大概效果如下图所示：在未同意时弹出该提示框，然后可以勾选同意或者点击不同意，同时可以跳转查看【用户协议】或【隐私政策】。当你选择后将结果保存至本地。
微信小程序隐私保护指引弹框实现（uniApp）
Jarvan_I的博客
03-15 1909
从 2023 年 9 月 15 日起必须用户点击同意隐私保护政策并同步给微信之后，开发者才可以调用微信提供的隐私接口。data函数声明变量showPrivacy，methods添加close方法。如有技术问题，可在公众号联系我或评论留意。微信公众平台更新用户隐私保护指引。配置manifest.json。
微信小程序-增加隐私协议弹窗
lmy_loveF的博客
09-15 1485
看一下components 文件夹下边有没有uni-popup文件夹，如果有，一定要删掉！Hbuilder x 工具更新到最新版本，导入最新版本uni-popup组件。如果到这里了还没有成功！再来，检查一下弹窗控件对不对。增加隐私协议组件，增加到components文件夹下。如果有页面引用到了，引用的代码也删掉。找到 uni-popup插件，点击安装。再次运行，就会弹隐私协议的窗口啦。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值