微信小程序隐私协议弹窗授权

开发微信小程序的第一步往往是隐私协议授权，尤其是在涉及用户隐私数据时，必须确保用户明确知晓并同意相关隐私政策。我们才可以开发后续的小程序内容。友友们在按照文档开发时可能会遇到一些问题，我把所有的授权方法和可能遇到的问题都整理出来，欢迎大家一起交流哦！

前置准备：(在授权隐私协议弹窗前必须准备的，不能少！！！）

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)})}
}