[uni-app]微信小程序隐私保护指引用户同意窗口代码

为规范开发者的用户个人信息处理行为，保障用户合法权益，微信要求开发者主动同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则，方可调用微信提供的隐私接口。

必须要知道的 4 个Api

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

uniapp代码实现

1、首页在components目录下创建名为：ws-privacy-popup文件夹和ws-privacy-popup.vue文件，代码如下：

<template>
	<u-popup v-model="show" mode="center" border-radius="14">
		<view class="ws-privacy-popup">
			<view class="ws-privacy-popup__header">
				<view class="ws-picker__title">用户隐私保护提示</view>
			</view>
			<view class="ws-privacy-popup__container">
				<text>感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意</text>
				<text class="ws-privacy-popup__container-protocol"
					@click="openPrivacyContract">《xxxx小程序隐私保护指引》</text>
				<text>。当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。</text>
			</view>
			<view class="ws-privacy-popup__footer">
				<button class="is-agree" id="agree-btn" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgree">
					同意并继续
				</button>
				<button class="is-disagree" id="disagree-btn" @click="handleDisagree">
					不同意
				</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "privacyWxPop",
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		mounted() {},
		methods: {
			handleAgree() {
				this.$emit("handleAgree")
				this.$emit("update:show", false)

			},
			handleDisagree() {
				uni.exitMiniProgram({
					success: () => {
						console.log("exit success")
					}
				})
				this.$emit("update:show", false)
			},
			/**
			 * 打开隐私协议
			 */
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: (res) => {
						console.log('openPrivacyContract success')
					},
					fail: (res) => {
						console.error('openPrivacyContract fail', res)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ws-privacy-popup {
		width: 600rpx;
		padding: 48rpx;
		box-sizing: border-box;
		overflow: hidden;
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;

		&__header {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #1a1a1a;
			line-height: 52rpx;
			margin-bottom: 48rpx;
		}

		&__container {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 48rpx;

			&-protocol {
				font-weight: 550;
				color: #4EBA86;
			}
		}

		&__footer {
			display: flex;
			flex-direction: column;

			.is-disagree,
			.is-agree {
				width: 100%;
				height: 88rpx;
				background: #ffffff;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.is-agree {
				background: #4EBA86;
				color: #ffffff;
				margin-bottom: 18rpx;
			}

			button {
				border: none;
				outline: none;

				&::after {
					border: none;
				}
			}
		}
	}
</style>

2、在首页使用以下代码引用

		<!-- #ifdef MP-WEIXIN -->
		<privacy-wx-pop :show.sync="privacyWxPopShow" @handleAgree="handleAgree"></privacy-wx-pop>
		<!-- #endif -->

		// #ifdef MP-WEIXIN
			// 登录前检测是否隐私授权
			wx.getPrivacySetting({
				success: res => {
					console.log(res)
					// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						this.privacyWxPopShow = true;
						return
					}
					// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
					this.handleAgree();
				},
				fail: () => {

				},
			})
			// #endif

效果展示

温馨提示

在 2023年9月15号之前，在 app.json 中配置 usePrivacyCheck: true 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用。
在 2023年9月15号之后，不论 app.json 中是否有配置 __usePrivacyCheck__，隐私相关功能都会启用。

参考资料

https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

https://blog.amujoe.top/#/main/miniprogram/mini08

如需转载请保留本文出处: https://zhe94.com/948.html