uniapp 开发微信小程序之新版隐私协议-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 开发微信小程序之新版隐私协议。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

自从微信小程序官方更新隐私协议，用户必须同意之后，才能获取个人信息，这就导致在获取用户信息之前，需要有个隐私协议弹窗

大致如下图：

微信小程序隐私协议,uniapp,小程序,uni-app,微信小程序,小程序

微信小程序官方提供的API和 uniapp 开发的稍微有点区别，这里只记录 uniapp 开发的，如果需要微信原生的，请自行官网查看。

首先创建一个弹窗组件privacyPopup.vue，代码如下：

<template>
	<uni-popup ref="popup" type="center" :is-mask-click="false">
		<view class="popup-box">
			<view class="weui-half-screen-dialog__hd">
				{{title}}
			</view>
			<view class="weui-half-screen-dialog__bd">
				<text class="weui-half-screen-dialog__tips">{{desc1}}</text>
				<text class="weui-half-screen-dialog__tips color-8BC21F" @click="openPrivacyContract">
					{{urlTitle}}
				</text>
				<text class="weui-half-screen-dialog__tips">{{desc2}}</text>
			</view>
			<view class="weui-half-screen-dialog__ft">
				<button class="weui-btn" @click="handleDisagree">拒绝</button>
				<button id="agree-btn" type="default" open-type="agreePrivacyAuthorization" class="weui-btn agree"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				title: "用户隐私保护提示",
				desc1: "感谢您使用本产品，您使用本产品前应当仔细阅读并同意",
				urlTitle: "《小程序隐私保护指引》",
				desc2: "当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法更好的体验产品。",
			};
		},
		methods: {
			openPrivacyContract() {
				uni.openPrivacyContract({});
			},
			handleAgreePrivacyAuthorization() {
				getApp().globalData.showPrivacy = false;
				this.$emit('confirm');
				this.$refs.popup.close();
			},
			handleDisagree() {
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 80vw;
		// height: 40vh;
		overflow: hidden;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 24rpx;

		.weui-half-screen-dialog__hd {
			font-size: 48rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: #000000;
			line-height: 56rpx;
		}

		.weui-half-screen-dialog__bd {
			margin-top: 48rpx;
			text-indent: 2em;
			.weui-half-screen-dialog__tips {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Normal, Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				line-height: 33rpx;
			}
		}

		.weui-half-screen-dialog__ft {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin-top: 48rpx;
			.weui-btn {
				padding: 0 60rpx;
				margin: 0;
				background: none;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Normal, Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				line-height: 80rpx;
				// border: 2rpx solid #8BC21F;
			}

			.agree {
				color: #ffffff;
				background: linear-gradient(90deg, #8BC21F 0%, #7AB30A 100%);
			}
		}

		.color-8BC21F {
			color: #8BC21F !important;
		}
	}
</style>

到这里有人可能会疑问，你也没有使用this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })相关代码，微信那边如何知道用户同意了？其实在button按钮上有扩展事件open-type="agreePrivacyAuthorization" 点击后, 微信那边会有记录的。

然后在 App.vue 文件中添加全局变量，这里使用uni.getPrivacySetting（亲测有用），微信新增的几个隐私api，uniapp也是支持的，放心使用：

export default {
		globalData: {
			showPrivacy: false
		},
		onLaunch: function(options) {
			if (uni.getPrivacySetting) {
				uni.getPrivacySetting({
					success: res => {
						console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
						if (res.needAuthorization) {
							getApp().globalData.showPrivacy = true;
						} else {
							getApp().globalData.showPrivacy = false;
						}
					},
					fail: () => {
					},
					complete: () => {},
				})
			}
		},
		
	}

使用阶段，因为我这里是获取手机号登录的，这个时候就会出现一个问题，隐私弹窗和获取手机号弹窗冲突，目前是通过判断，操作不同的按钮（如果有好的方案，欢迎评论区告知）。

<template>
	<view class="page">
		<button v-if="showPrivacy" class="btn" @click="getPrivacy">手机号快捷登录</button>
		<button v-else class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号快捷登录</button>
		<privacy-popup ref="privacyPopup" @confirm="confirm"></privacy-popup>
	</view>
</template>

<script>
	import PrivacyPopup from "@/components/privacyPopup/index.vue";

	export default {
		components: {
			PrivacyPopup
		},
		data() {
			return {
				showPrivacy: getApp().globalData.showPrivacy,
			}
		},
		onLoad(options) {},
		methods: {
			confirm() {
				this.showPrivacy = false;
			},
			getPrivacy() {
				if (getApp().globalData.showPrivacy) {
					this.$refs.privacyPopup.$refs.popup.open();
					return;
				}
			},
			// 获取手机号
			onGetPhoneNumber(e) {
				// 用户拒绝授权
				if (e.detail.errMsg == "getPhoneNumber:fail:user deny") {
					uni.showToast({
						icon: 'none',
						title: '用户拒绝'
					});
				} else if (e.detail.code) { // 允许授权
					this.loginWeiXin(e.detail.code);
				}
			},
		}
	}
</script>

最后比较重要的一点，需要在manifest.json源码视图添加："__usePrivacyCheck__": true，基础库：3.0.0

微信小程序隐私协议,uniapp,小程序,uni-app,微信小程序,小程序