自從微信小程序官方更新隱私協(xié)議，用戶必須同意之后，才能獲取個人信息，這就導(dǎo)致在獲取用戶信息之前，需要有個隱私協(xié)議彈窗

大致如下圖：

微信小程序官方提供的API和 uniapp 開發(fā)的稍微有點區(qū)別，這里只記錄 uniapp 開發(fā)的，如果需要微信原生的，請自行官網(wǎng)查看。

首先創(chuàng)建一個彈窗組件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: "感謝您使用本產(chǎn)品，您使用本產(chǎn)品前應(yīng)當(dāng)仔細(xì)閱讀并同意",
				urlTitle: "《小程序隱私保護指引》",
				desc2: "當(dāng)您點擊同意并開始使用產(chǎn)品服務(wù)時，即表示你已理解并同意該條款內(nèi)容，該條款將對您產(chǎn)生法律約束力。如您拒絕，將無法更好的體驗產(chǎn)品。",
			};
		},
		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' })相關(guān)代碼，微信那邊如何知道用戶同意了？其實在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("是否需要授權(quán)：", res.needAuthorization, "隱私協(xié)議的名稱為：", res.privacyContractName)
						if (res.needAuthorization) {
							getApp().globalData.showPrivacy = true;
						} else {
							getApp().globalData.showPrivacy = false;
						}
					},
					fail: () => {
					},
					complete: () => {},
				})
			}
		},
		
	}

使用階段，因為我這里是獲取手機號登錄的，這個時候就會出現(xiàn)一個問題，隱私彈窗和獲取手機號彈窗沖突，目前是通過判斷，操作不同的按鈕（如果有好的方案，歡迎評論區(qū)告知）。

<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) {
				// 用戶拒絕授權(quán)
				if (e.detail.errMsg == "getPhoneNumber:fail:user deny") {
					uni.showToast({
						icon: 'none',
						title: '用戶拒絕'
					});
				} else if (e.detail.code) { // 允許授權(quán)
					this.loginWeiXin(e.detail.code);
				}
			},
		}
	}
</script>

最后比較重要的一點，需要在manifest.json源碼視圖添加："__usePrivacyCheck__": true，基礎(chǔ)庫：3.0.0

?文章來源地址http://www.zghlxwxcb.cn/news/detail-696890.html

到了這里，關(guān)于uniapp 開發(fā)微信小程序之新版隱私協(xié)議的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！