微信小程序隱私協議彈窗授權

開發微信小程序的第一步往往是隱私協議授權，尤其是在涉及用戶隱私數據時，必須確保用戶明確知曉并同意相關隱私政策。我們才可以開發后續的小程序內容。友友們在按照文檔開發時可能會遇到一些問題，我把所有的授權方法和可能遇到的問題都整理出來，歡迎大家一起交流哦！

前置準備：(在授權隱私協議彈窗前必須準備的，不能少！！！）

1.確保小程序管理后臺填寫的《用戶隱私保護協議》已經通過，狀態是下面這種就沒問題了

2.在app.json中或者manifest.json中配置usePrivacyCheck:true（如果你使用微信小程序開發就用app.json,如果你使用uniapp開發，就在manifest.json中配置）下面是manifest.json中的配置，app.json李也一樣加上usePrivacyCheck:true就好了

方法一：官方隱私彈窗

為了方便小程序開發者們開發，我們自己不用手寫隱私彈窗啦，只要前置準備按照我說的做好，官方會自動尋找我們在小程序中使用的一個隱私相關接口，當小程序加載到第一個隱私相關接口時，就會自動彈窗。（微信內部邏輯就是微信方會自動判斷此次調用是否需要觸發wx.onNeedPrivacyAuthorization 事件，如果我們不做處理，微信就自己彈窗。這種方式適合簡單的需求，如果我們要更改樣式，還是建議友友們自定義隱私協議彈窗。）

方法二：自定義隱私協議彈窗

梳理流程邏輯：（tips:文章最下面有完整代碼，直接復制粘貼就可以使用啦）

現在隱私協議彈窗有兩種方式:第一種是需要調用隱私協議時彈窗，第二種是小程序進入頁面就授權，只需要授權一次，授權之后就可以使用所有隱私接口了。現在我們一般都是用第二種，更符合用戶體驗。咱們先梳理下第二種方法的流程：注意接下來我使用的是uniapp

1.進入首頁使用 uni.getPrivacySetting 接口判斷是否需要授權，需要則展示彈窗；

2.彈窗彈開，用戶點擊查看隱私協議內容時，我們使用 uni.openPrivacyContract 接口打開隱私保護指引頁面

3.用戶點擊同意關閉彈窗

4.用戶點擊拒絕，我們就直接讓他退出小程序

1.進入首頁使用 uni.getPrivacySetting 接口判斷是否需要授權，需要則展示彈窗；

這里我寫了一個彈窗，然后在onLoad函數里使用wx.getPrivacySetting去判斷隱私協議彈窗是否授權，如果函數返回needAuthorization為true就代表用戶還沒授權，如果沒授權就打開彈窗，返回false就是授權過了如果授權過了我們就不管它：

<template><u-popup    :show="isPrivacy" mode="bottom"  :round="20" ><view class="privacyBox"><view class="privacyTit">用戶隱私保護提示</view><view class="privacyDesc"><view>感謝您的使用，在您使用Anywheel服務之前，請仔細閱讀</view><text @click="openClick" style="color:#20D169">《我的 小程序隱私保護指引》</text><view >如您同意該指引，請點擊"同意"開始使用本程序</view></view><view style="display:flex;margin-top:50rpx;height:92rpx;"><button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒絕</button><button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button></view></view></u-popup>
</template>
<script>
export default {data(){return {isPrivacy:false}},onLoad(){uni.getPrivacySetting({success: res => {// res.needAuthorization 為true代表用戶還沒授權，這時候就需要彈出授權彈窗if (res.needAuthorization) {this.isPrivacy = true}else {// 用戶已經同意過隱私協議，所以不需要再彈出隱私協議，直接進行頁面正常流程}},fail: () => {},})}
}</script>

2.彈窗彈開，用戶點擊查看隱私協議內容時，我們使用?wx.openPrivacyContract 接口打開隱私保護指引頁面

彈窗打開后，如果用戶想點擊彈窗里的隱私協議想查看具體內容怎么辦，我這里綁定了openClick方法，openClick方法中調用uni.openPrivacyContract()方法就可以了。如果你們不能使用uni.openPrivacyContract()換成wx.openPrivacyContract()也行

<template><u-popup    :show="isPrivacy" mode="bottom"  :round="20" ><view class="privacyBox"><view class="privacyTit">用戶隱私保護提示</view><view class="privacyDesc"><view>感謝您的使用，在您使用Anywheel服務之前，請仔細閱讀</view><text @click="openClick" style="color:#20D169">《我的 小程序隱私保護指引》</text><view >如您同意該指引，請點擊"同意"開始使用本程序</view></view><view style="display:flex;margin-top:50rpx;height:92rpx;"><button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒絕</button><button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button></view></view></u-popup>
</template>
<script>
export default {data(){return {isPrivacy:false}},onLoad(){uni.getPrivacySetting({success: res => {// res.needAuthorization 為true代表用戶還沒授權，這時候就需要彈出授權彈窗if (res.needAuthorization) {this.isPrivacy = true}else {// 用戶已經同意過隱私協議，所以不需要再彈出隱私協議，直接進行頁面正常流程}},fail: () => {},})}，methods:{openClick() {wx.openPrivacyContract({success: () => {}, // 打開成功fail: () => {}, // 打開失敗complete: () => {}})},}
}</script>

3.用戶點擊同意關閉彈窗

注意，用戶同意這塊我用button按鈕寫的，button按鈕上有open-type="agreePrivacyAuthorization"屬性，當我們綁定?@agreeprivacyauthorization="handleAgree"時，就自動通知微信那邊用戶已經同意授權了，具體代碼在下面：

<template><u-popup    :show="isPrivacy" mode="bottom"  :round="20" ><view class="privacyBox"><view class="privacyTit">用戶隱私保護提示</view><view class="privacyDesc"><view>感謝您的使用，在您使用Anywheel服務之前，請仔細閱讀</view><text @click="openClick" style="color:#20D169">《我的 小程序隱私保護指引》</text><view >如您同意該指引，請點擊"同意"開始使用本程序</view></view><view style="display:flex;margin-top:50rpx;height:92rpx;"><button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒絕</button><button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button></view></view></u-popup>
</template>
<script>
export default {data(){return {isPrivacy:false}},onLoad(){uni.getPrivacySetting({success: res => {// res.needAuthorization 為true代表用戶還沒授權，這時候就需要彈出授權彈窗if (res.needAuthorization) {this.isPrivacy = true}else {// 用戶已經同意過隱私協議，所以不需要再彈出隱私協議，直接進行頁面正常流程}},fail: () => {},})}，methods:{openClick() {wx.openPrivacyContract({success: () => {}, // 打開成功fail: () => {}, // 打開失敗complete: () => {}})},handleAgree() {let that = this// 如果用戶之前已經同意過隱私授權，會立即返回success回調wx.requirePrivacyAuthorize({success: res => {that.isPrivacy = false// 同意協議后，后面正常執行后續流程}});},}
}</script>

4.用戶點擊拒絕，我們就直接讓他退出小程序

用戶拒絕隱私協議授權，代表著我們的小程序他是沒法使用的，我們使用uni.exitMiniProgram給他退出小程序即可

下面是完整的代碼：直接復制粘貼就可以使用：

<template><u-popup    :show="isPrivacy" mode="bottom"  :round="20" ><view class="privacyBox"><view class="privacyTit">用戶隱私保護提示</view><view class="privacyDesc"><view>感謝您的使用，在您使用Anywheel服務之前，請仔細閱讀</view><text @click="openClick" style="color:#20D169">《我的 小程序隱私保護指引》</text><view >如您同意該指引，請點擊"同意"開始使用本程序</view></view><view style="display:flex;margin-top:50rpx;height:92rpx;"><button id="disagree-btn" @click="closePopup" size="mini" style="flex: 1;margin-right: 8px;line-height: 46px">拒絕</button><button id="agree-btn" size="mini" type="primary" style="flex: 1;line-height: 46px" open-type="agreePrivacyAuthorization"  @agreeprivacyauthorization="handleAgree">同意</button></view></view></u-popup>
</template>
<script>
export default {data(){return {isPrivacy:false}},onLoad(){uni.getPrivacySetting({success: res => {// res.needAuthorization 為true代表用戶還沒授權，這時候就需要彈出授權彈窗if (res.needAuthorization) {this.isPrivacy = true}else {// 用戶已經同意過隱私協議，所以不需要再彈出隱私協議，直接進行頁面正常流程}},fail: () => {},})}，methods:{openClick() {wx.openPrivacyContract({success: () => {}, // 打開成功fail: () => {}, // 打開失敗complete: () => {}})},handleAgree() {let that = this// 如果用戶之前已經同意過隱私授權，會立即返回success回調wx.requirePrivacyAuthorize({success: res => {that.isPrivacy = false// 同意協議后，后面正常執行后續流程}});},closePopup() {this.isPrivacy = falseuni.exitMiniProgram({success: function() {console.log('退出小程序成功');},fail: function(err) {console.log('退出小程序失敗', err);}})},}
}</script>
<style>
privacyBox {/* width: 600rpx; */padding: 60rpx 60rpx 80rpx 60rpx;box-sizing: border-box;line-height: 1.5;}.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;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;border-radius: 40rpx;box-sizing: border-box;overflow: hidden;margin-left: 20rpx;}
</style>

遇到的問題及解決：

1.官方隱私協議彈窗和自己開發的自定義協議彈窗同時出現：

我在開發的過程中出現了官方隱私協議彈窗和自定義隱私協議彈窗同是出現的情況，原因是我在app.vue中使用到了隱私相關接口，官方檢測到隱私協議接口就會彈隱私協議彈窗，而我們自定義隱私協議彈窗一般在首頁index.vue中處理，所以就會出現兩次。我們可以在app.vue頁面的onLaunch函數中加入下面這段代碼，就只展示我們自定義的彈窗啦

onLaunch() {// 隱私協議前置if(uni.onNeedPrivacyAuthorization){uni.onNeedPrivacyAuthorization((resolve)=>{console.log('onNeedPrivacyAuthorization',resolve)})}
}