微信小程序——弹出隐私指引教程（含代码）

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序学习分享
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序——弹出隐私指引教程（含代码）

一、效果图

二、功能介绍

涉及处理用户个人信息的小程序开发者，需通过弹窗等明显方式提示用户阅读隐私政策等收集使用规则。

为规范开发者的用户个人信息处理行为，保障用户合法权益，微信要求开发者主动同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则，方可调用微信提供的隐私接口。

特别注意：

2023.08.22更新：

以下指南中涉及的 getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 等接口目前可以正常接入调试。调试说明：

在 2023年9月15日之前，在 app.json 中配置 usePrivacyCheck: true 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用。

在 2023年9月15日之后，不论 app.json 中是否有配置 usePrivacyCheck，隐私相关功能都会启用。

接口用法可参考下方完整示例demo

2023.09.14更新：

隐私相关功能启用时间延期至 2023年10月17日。在 2023年10月17日之前，在 app.json 中配置 usePrivacyCheck: true 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用。在 2023年10月17日之后，不论 app.json 中是否有配置 usePrivacyCheck，隐私相关功能都会启用。

新增官方隐私授权弹窗功能，相关功能参考下方官方隐私弹窗功能说明。

三、接入流程

1. 配置《小程序用户隐私保护指引》
   开发者需在「小程序管理后台」配置《小程序用户隐私保护指引》，详细指引可见：用户隐私保护指引填写说明。
   
   需要注意的是，仅有在指引中声明所处理的用户信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将直接禁用。隐私接口与对应的处理的信息关系可见：小程序用户隐私保护指引内容介绍。
   
   配置完成后，对于每个使用小程序的用户，开发者均需要同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则后，才可以调用已声明的接口或组件。同步的开发方式见下文。
   
   对于已经同步过的用户，后续若开发者更新了配置，对于旧版本已经有接口或组件，不需要重新同步；对于更新后产生的新的接口或组件，需要重新同步。例如，7月11日更新的版本中包含「收集你选择的位置信息」，7月12日同步用户同意状态，7月13日更新后新增了「收集你的微信运动步数」，则在未再次同步的情况下，可以调用 wx.chooseLocation 接口，无法调用 wx.getWeRunData 接口。

2. 主动查询隐私授权同步状态以及展示隐私协议
   从基础库 2.32.3 开始支持
   
   开发者可通过 wx.getPrivacySetting 接口，查询微信侧记录的用户是否有待同意的隐私政策信息。该信息可通过返回结果 res 中的 needAuthorization 字段获取。
   
   同时，wx.getPrivacySetting 接口会返回开发者在小程序管理后台配置的《小程序用户隐私保护指引》名称信息，开发者可以调用 wx.openPrivacyContract 接口打开该页面。
   
   如果存在有待用户同意的隐私政策信息，开发者需要主动提示用户阅读隐私政策等收集使用规则，对于提示方式，小程序开发者可自行设计，同时需要在相关界面中使用 组件，当用户轻触该 组件后，表示用户已阅读并同意小程序的隐私政策等收集使用规则，微信会收到该同步信息，此时开发者可以在该组件的 bindagreeprivacyauthorization 事件回调后调用已声明的隐私接口。

3. 清空历史同步状态
   当用户从「微信下拉-最近-最近使用的小程序」中删除小程序，将清空历史同步状态。下次访问小程序后，需要重新同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则。
   
   开发者可通过此方式进行调试，也可以在开发者工具中「清除模拟器缓存-清除授权数据」清空历史同步状态。

四、详细代码展示

在微信小程序中添加privacy目录，如上图！

在app.json添加如下代码：

"usingComponents": {    "privacy": "/privacy/privacy"  
},  
"__usePrivacyCheck__": true,

然后在想添加弹窗的页面的wxml文件中引入插件

<privacy/>

privacy.js 代码如下：

// component/privacy/privacy.js
Component({/*** 组件的初始数据*/data: {privacyContractName: '',showPrivacy: false},/*** 组件的生命周期*/pageLifetimes: {show() {const that = thisif( wx.getPrivacySetting){wx.getPrivacySetting({success(res) {console.log("是否需要授权：",res.needAuthorization,  "\n隐私协议的名称为：", res.privacyContractName)if (res.errMsg == "getPrivacySetting:ok") {that.setData({privacyContractName: res.privacyContractName,showPrivacy: res.needAuthorization})}}})}else{console.log("基础库低于2.23.3版本")}}},/*** 组件的方法列表*/methods: {// 打开隐私协议页面openPrivacyContract() {wx.openPrivacyContract({fail: () => {wx.showToast({title: '遇到错误',icon: 'error'})}})},// 拒绝隐私协议handleDisagree() {console.log("拒绝协议")wx.showToast({title: '需要同意后，才能继续使用小程序',icon: 'none'})},// 同意隐私协议handleAgree() {const that= thisthat.setData({showPrivacy: false})},}
})

privacy.json 代码如下：

{"component": true,"usingComponents": {}
}

privacy.wxml 代码如下：

<view class="privacy" wx:if="{{showPrivacy}}"><view class="content"><view class="title">隐私保护指引</view><view class="des">在使用当前小程序服务之前，请仔细阅读<text class="link" bind:tap="openPrivacyContract">{{privacyContractName}}</text>。如你同意{{privacyContractName}}，请点击“同意”开始使用。</view><view class="btns"><button class="item reject" bind:tap="handleDisagree">拒绝</button><button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgree">同意</button></view></view>
</view>

privacy.wxss 代码如下：

/* component/privacy/privacy.wxss */
.privacy {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, .5);z-index: 9999999;display: flex;align-items: center;justify-content: center;
}.content {width: 632rpx;padding: 48rpx;box-sizing: border-box;background: #fff;border-radius: 16rpx;
}.content .title {text-align: center;color: #333;font-weight: bold;font-size: 32rpx;
}.content .des {font-size: 26rpx;color: #666;margin-top: 40rpx;text-align: justify;line-height: 1.6;
}.content .des .link {color: #07c160;text-decoration: underline;
}.btns {margin-top: 48rpx;display: flex;
}.btns .item {justify-content: space-between;width: 244rpx;height: 80rpx;display: flex;align-items: center;justify-content: center;border-radius: 16rpx;box-sizing: border-box;border: none;
}.btns .reject {background: #f4f4f5;color: #909399;
}.btns .agree {background: #07c160;color: #fff;
}

五、常见错误说明

{ “errMsg”: “A:fail api scope is not declared in the privacy agreement”, “errno”: 112 } 使用到了 A 隐私接口，但是开发者未在「MP后台-设置-服务内容声明-用户隐私保护指引」中声明收集 A 接口对应的隐私类型。补充的隐私类型声明, 将在5分钟后生效。

{ “errMsg”: “A:fail appid privacy api banned” } 使用到了 A 隐私接口，但是开发者在 mp 提审时勾选了“未采集隐私”，或者未声明隐私协议，被平台回收了接口调用权限。

六、官方隐私弹窗功能说明

为了让开发者能更便利地完成小程序隐私合规要求，除了通过以上指引进行隐私协议开发外，平台还提供了官方隐私授权弹窗。此弹窗在隐私相关功能启用后（2023年10月17日后或开发者在 app.json 中配置 usePrivacyCheck: true 后），无需开发者适配开发，自动向 C 端用户展示。具体逻辑为：

当开发者调用隐私相关接口时，微信会判断此次调用是否需要触发 wx.onNeedPrivacyAuthorization 事件，若触发后开发者未进行响应，微信将主动弹出官方弹窗。若用户同意，该接口将正常执行后续调用逻辑；若用户拒绝，将进行报错。

需要注意的是，用户可能拒绝官方隐私授权弹窗，为了避免过度弹窗打扰用户，开发者再次调用隐私相关接口时，若距上次用户拒绝不足10秒，将不再触发弹窗，直接给到开发者用户拒绝隐私授权弹窗的报错。

官方隐私弹窗将有两种样式：

与授权弹窗耦合样式：用户在此弹窗下需要勾选隐私协议才可以进行允许操作，若用户在弹窗中拒绝，报错信息为用户拒绝（错误码为 103）。

直接弹窗样式：用户侧直接针对隐私协议的授权，若用户在弹窗中拒绝，报错信息为用户未同意隐私协议（错误码为 104）。

与授权弹窗耦合样式将会在后续版本的基础库中支持（支持版本将在后续更新），在低版本基础库中所有弹窗均将采用直接弹窗样式。
  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。