記錄一下微信隱私信息授權(quán)接口相關(guān)配置使用。小程序是uniapp+vue2開發(fā)

1.首先需要去到微信公眾平臺，申請小程序中用到的所有隱私接口?？蓞⒖?/p>

用戶隱私保護指引填寫說明 | 微信開放文檔

小程序用戶隱私保護指引內(nèi)容介紹 | 微信開放文檔 在這里配置和查看需要申請的接口。

2.需要在manifest.json中配置 "__usePrivacyCheck__": true，正式開始使用的時候不配置也是可以的。

?

?

3.封裝一個組件方便后續(xù)在每一個用到隱私接口的頁面中引入使用

? 其中uniapp中注意button上使用的是@agreeprivacyauthorization來觸發(fā)隱私授權(quán)方法

<template>
	<view class="privacy-box">
		<u-popup :show="show" @close="close" @open="open" :round="10">
			<view class="popup-box">
				<view class="">
					隱私指引彈窗
				</view>
				<view class="" @click="openPrivacyPolicy">
					在您使用xxx小程序前，請仔細(xì)閱讀<text style="color: #2F74ED;">《xxxx隱私保護協(xié)議》</text>。
					如您同意《xxxxx隱私保護協(xié)議》，請點擊“同意”，開始使用xxxx小程序。
				</view>
				<view class="btn-group">
					<button @click="refuse">拒絕</button>
					<button id="agree-btn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization" type="primary">同意</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

js部分直接在mounted中調(diào)用api即可

export default {
		data() {
			return {
				show: false
			}
		},
		mounted() {
			wx.onNeedPrivacyAuthorization(resolve => {
				console.log("done");
				// 需要用戶同意隱私授權(quán)時
				// 彈出開發(fā)者自定義的隱私授權(quán)彈窗
				this.show = true
				this.resolvePrivacyAuthorization = resolve
			})
		},
		methods: {
			openPrivacyPolicy() {
				wx.openPrivacyContract()
			},
			handleAgreePrivacyAuthorization() {
				console.log("用戶點擊同意授權(quán)");
				this.resolvePrivacyAuthorization({
					buttonId: 'agree-btn',
					event: 'agree'
				})
				this.show = false
			},
			refuse() {
				this.show = false
				this.resolvePrivacyAuthorization({
					event: 'disagree'
				})
				console.log("不同意");
			},
			close() {
				this.show = false
			},
		}
	}

tips：如果到進(jìn)入頁面時候就調(diào)用授權(quán)位置信息，也不會和隱私授權(quán)彈窗沖突。這里會自動判斷是否授權(quán)過隱私授權(quán)，先彈出隱私授權(quán)的彈窗后再彈出授權(quán)位置信息。同理獲取手機號組件。

獲取手機號和復(fù)制這種只有在用戶點擊的時候才會觸發(fā)彈出隱私授權(quán)彈框。

另外獲取用戶昵稱 input type=“nickname”無法觸發(fā)隱私授權(quán)，可以通過wx.requirePrivacyAuthorize來輔助驗證。

///以下vue3封裝組件寫法

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from "vue"
	import {
		paramasUserStore
	} from "@/store/params.js"
	const paramsStore = paramasUserStore()
	const {
		proxy
	} = getCurrentInstance()
	onMounted(() => {
		wx.onNeedPrivacyAuthorization(resolve => {
			console.log("done");
			// 需要用戶同意隱私授權(quán)時
			// 彈出開發(fā)者自定義的隱私授權(quán)彈窗
			show.value = true
			proxy.resolvePrivacyAuthorization = resolve
		})
	})
	const show = ref(false)

	//跳轉(zhuǎn)到隱私授權(quán)介紹頁面
	function openPrivacyPolicy() {
		wx.openPrivacyContract()
	}

	function handleAgreePrivacyAuthorization() {
		console.log("用戶點擊同意授權(quán)");
		proxy.resolvePrivacyAuthorization({
			buttonId: 'agree-btn',
			event: 'agree'
		})
		show.value = false
	}

	function refuse() {
		proxy.resolvePrivacyAuthorization({
			event: 'disagree'
		})
		show.value = false
		console.log("不同意");
	}

	function close() {
		show.value = false
	}
</script>

.privacy-box {
		// width: 100%;
		// height: 540rpx;

		.popup-box {
			width: 94%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 auto;

			// justify-content: center;
			>view:first-child {
				font-size: 36rpx;
				font-weight: bold;
				color: #1AAD19;
				padding: 40rpx 0;
			}

			>view:nth-child(2) {
				text-indent: 40rpx;
				line-height: 60rpx;
				margin-bottom: 40rpx;
			}

			.btn-group {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;
				>button {
					width: 240rpx;
					height: 100rpx;
				}
			}
		}
	}

?

官方新增隱私彈窗功能

--不用開發(fā)者自己書寫彈窗組件和邏輯，只需要在manifest.json中配置 "__usePrivacyCheck__": true即可啟用。（目前最新項目本人使用該模式進(jìn)行隱私授權(quán)的提示）

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

到了這里，關(guān)于小程序隱私信息授權(quán)wx.onNeedPrivacyAuthorization vue2+uniapp / vue3的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！