uniapp使用wx.requirePrivacyAuthorize实现微信小程序隐私政策

一、前言

微信小程序官方出了一个公告《关于小程序隐私保护指引设置的公告》。不整的话,后果很多授权无法使用,详见《小程序用户隐私保护指引内容介绍》

二、操作流程

1、在 微信小程序后台【设置】- 【服务内容与声明】 ,设置好用户隐私保护指引。

2、打开uniapp 项目的 manifest.json ,选择【源码视图】, 添加配置如下配置

复制代码
"mp-weixin": {
    "__usePrivacyCheck__": true, //隐私政策
 },

3、设置微信开发者工具的调试基础库,最好>=2.33.0

4、验证用户是否已经隐私授权

使用wx.requirePrivacyAuthorize() 接口,验证用户之前已经同意过隐私授权

复制代码
onReady() {
	var _this = this;
			
	// 隐私政策
	wx.getPrivacySetting({
		success: res => {
			// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
			console.log(res)
			if (res.needAuthorization) {
				// 需要弹出隐私协议
				_this.$refs.privacy.privacyShow = true;
				return;
			} else {
				// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用隐私接口
			}
		},
		fail: () => {},
		complete:() => {}
	})
},

5、隐私组件源码及效果图

复制代码
<template>
	<view>

		<!-- 隐私保护指引弹窗 -->
		<u-popup v-model="privacyShow" mode="center" width="600rpx" border-radius="20" :mask-close-able="false">
			<view class="privacyBox">
				<view class="privacyTit">用户隐私保护提示</view>
				<view class="privacyDesc">
					感谢您的使用,在使用本小程序前,应当阅读并同意<text
						@click="openClick">《用户隐私保护指引》</text>。当您点击同意并开始使用程序服务时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入小程序。
				</view>
				<view class="privacyPost">
					<view class="refuseBtn">
						<navigator target="miniProgram" open-type="exit">不同意并退出</navigator>
					</view>
					<button class="agreeBtn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="agreeClick">同意并继续</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 隐私设置弹窗开关
				privacyShow: true,
			}
		},
		onReady() {

		},
		methods: {
			// 打开隐私协议
			openClick() {
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			
			// 同意
			agreeClick() {
				// 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了
				this.privacyShow = false;
			},

		}
	}
</script>

<style scoped lang="scss">
	.privacyBox {
		width: 600rpx;
		padding: 60rpx;
		box-sizing: border-box;
	}

	.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;
		background: $uni-info-dark;
		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;
		background: $uni-primary;
		border-radius: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-left: 20rpx;
	}
</style>
相关推荐
2501_915106325 小时前
iPhone 文件管理,如何进行应用沙盒文件查看
android·ios·小程序·https·uni-app·iphone·webview
说私域5 小时前
以非常6+1体系为支撑 融入AI智能名片商城小程序 提升组织建设效能
大数据·人工智能·小程序·流量运营·私域运营
是梦终空6 小时前
计算机毕业设计267—基于Springboot+vue3+小程序的医院挂号系统(源代码+数据库)
spring boot·小程序·vue·毕业设计·课程设计·医院挂号系统·源代码
kyh10033811207 小时前
微信小游戏《找茬找汉字闯关王》源码赠送
microsoft·微信·微信小程序·微信小游戏·找茬小游戏·微信找茬消除
码云数智-园园8 小时前
小程序制作平台有哪些?2026微信小程序制作平台综合评测
微信小程序
低代码布道师9 小时前
【教培管家】小程序实战(八)——我的课表
低代码·小程序·云开发
码云数智-大飞10 小时前
小程序快速开发平台有哪些?微信小程序制作平台综合评测
微信小程序
一匹电信狗11 小时前
【Linux我做主】从 fopen 到 open:Linux 文件 I/O 的本质与内核视角
linux·运维·服务器·c++·ubuntu·小程序·开源
2501_9159214311 小时前
Fastlane 结合 AppUploader 来实现 CI 集成自动化上架
android·运维·ci/cd·小程序·uni-app·自动化·iphone
云游云记11 小时前
vue2 vue3 uniapp (微信小程序) v-model双向绑定
微信小程序·uni-app·vue