首先了解官方提供demo:
demo1: 演示使用 wx.getPrivacySetting 和
demo2: 演示使用 wx.onNeedPrivacyAuthorization 和
demo3: 演示 wx.onNeedPrivacyAuthorization、wx.requirePrivacyAuthorize、
demo4: 演示使用 wx.onNeedPrivacyAuthorization 和
为规范开发者的用户个人信息处理行为,保障用户的合法权益,自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者, 微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私接口。 开发者首先需确定小程序是否涉及处理用户个人信息,如涉及,则需配置用户隐私授权弹窗, 且仅有在平台《小程序用户隐私保护指引》中声明了所处理的用户个人信息,才可以调用平台提供的对应接口或组件。
只有在指引中声明所处理的用户个人信息,才可以调用平台提供的对应接口或组件。若未声明,对应接口或组件将无法调用成功。
1.了解隐私协议所需相关API
01.wx.requirePrivacyAuthorize() 用于模拟隐私接口调用
02.wx.openPrivacyContract() 用于打开下面封装好隐私弹框中的隐私协议
03.wx.onNeedPrivacyAuthorization() 用于监听用户是否吊起相关的隐私协议
04.wx.getPrivacySetting() 用于查询微信侧记录用户隐私协议状态
基本流程为:03 -----> 04 -----> 02
2.封装微信侧用户隐私协议状态
//获取微信侧同步的用户隐私协议开关
function getPrivacySetting(callback){
if(wx.getPrivacySetting){
wx.getPrivacySetting({
success: result => {
console.log(result,"同步信息结果") // 返回结果为: result = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
if (result.needAuthorization) {
// 需要弹出隐私协议
console.log("获取微信储存的用户协议同步信息-用户未同意,请弹框处理")
callback && callback(result);
} else {
console.log("获取微信储存的用户协议同步信息-用户已同意,请忽略")
}
},
fail: () => {},
complete: () => {}
})
}
}
3.封装隐私协议弹框放置全局组件中
全局组件-wxml
用户隐私保护提示
亲爱的用户,感谢您的信任!您使用本小程序提供的产品服务前应当阅读并同意
{{urlTitle}}
当您点击同意并开始使用产品服务时,即表示你已理解并同息该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法使用本小程序提供的相关产品及服务。
全局组件-JS
JS//引入相关模块
const { getPrivacySetting } = require("../utils/utils")
//设置协议回调、关闭回调数组变量
let privacyHandler
let privacyResolves = new Set()
let closeOtherPagePopUpHooks = new Set()
//注册并监听隐私API调用
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization(resolve => {
//获取用户微信侧同步结果
getPrivacySetting(result=>{
console.log(result,"同步信息结果") // 返回结果为: result = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
if (result.needAuthorization) {
// 需要弹出隐私协议
if (typeof privacyHandler === 'function') privacyHandler(resolve,result)
console.log("获取微信储存的用户协议同步信息-用户未同意,请弹框处理-页面")
}
})
})
}
//处理关闭页面其他弹框
const closeOtherPagePopUp = (closePopUp) => {
closeOtherPagePopUpHooks.forEach(hook => {
if (closePopUp !== hook) {
hook()
}
})
}
Component({
options: {
styleIsolation: 'shared',
multipleSlots: true
},
data: {
urlTitle: "",
privacyFlag: false,
height: 0,
},
lifetimes: {
attached: function() {
const closePopUp = () => {
this.disPopUp()
}
privacyHandler = (resolve,result) => {
this.setUrlTitle(result);
console.log(result,"999999")
privacyResolves.add(resolve)
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
closeOtherPagePopUp(closePopUp)
}
closeOtherPagePopUpHooks.add(closePopUp)
this.closePopUp = closePopUp
},
detached: function() {
closeOtherPagePopUpHooks.delete(this.closePopUp)
}
},
methods: {
//处理隐私弹框内展示的隐私协议标题
setUrlTitle(result){
this.setData({urlTitle:result.privacyContractName})
},
//用户同意相关协议
handleAgree(e) {
this.disPopUp()
// 这里演示了同时调用多个wx隐私接口时要如何处理:让隐私弹窗保持单例,
点击一次同意按钮即可让所有pending中的wx隐私接口继续执行 (看page/index/index中的 wx.getClipboardData 和 wx.startCompass)
privacyResolves.forEach(resolve => {
resolve({
event: 'agree',
buttonId: 'agree-btn'
})
})
privacyResolves.clear()
this.triggerEvent('handleAgree', {result:true});
},
//用户拒绝相关协议
handleDisagree(e) {
this.disPopUp()
privacyResolves.forEach(resolve => {
resolve({
event: 'disagree',
})
})
privacyResolves.clear()
this.triggerEvent('handleAgree', {result:true});
},
//打开隐私弹框
popUp() {
if (this.data.privacyFlag === false) {
this.setData({
privacyFlag: true
})
}
},
//关闭隐私弹框
disPopUp() {
if (this.data.privacyFlag === true) {
this.setData({
privacyFlag: false
})
}
},
//打开微信提供的小程序侧隐私协议
openPrivacyContract() {
wx.openPrivacyContract({
success: res => {
console.log('openPrivacyContract success')
},
fail: res => {
console.error('openPrivacyContract fail', res)
}
})
},
checkPrivacyStatus() {
let that = this;
getPrivacySetting(result=>{
if (result.needAuthorization) {
that.setUrlTitle(result);
that.popUp();
} else {
console.log("微信侧已记录用户同意");
}
})
}
}
})
父组件监听全局隐私弹框时间回调
父组件-wxml
父组件-JS
//隐私协议弹框按钮回调
handleAgree(event){
let that = this;
console.log(event);
let {result} = event.detail;
// result 根据用户选择可处理后续相关逻辑
true 用户同意相关隐私 例如:因昵称组件弹出的框 为true之后就可将昵称组件设置为聚焦状态
false 用户拒绝 例如:音视频组件 用户拒绝之后可返回上级页面、继续弹框进行处理等
},
4.app.json中引入全局组件:
"privacy-popup": "/components/privacyPopup"
5.全局使用(隐私弹框)
全局隐私弹框相关代码如下:
首页wxml引入组件
首页onReady时触发检测隐私弹框逻辑
that.selectComponent("#privacyPop") && that.selectComponent("#privacyPop").checkPrivacyStatus();
6.按需使用(隐私弹框)进入单个隐私页面时优先检测(手机号授权API触发隐私弹框)
6-1.1.引入全局组件到手机号授权页面:
6-1.2.页面onReady的时候开始检测:that.selectComponent("#privacyPop") && that.selectComponent("#privacyPop").checkPrivacyStatus();
6-2.1.在用户点击按钮即将吊起隐私弹框时使用如下代码:
getPrivacySetting(result=>{
if (result.needAuthorization) {
// 需要弹出隐私协议
that.selectComponent("#privacyPop") &&
that.selectComponent("#privacyPop").setUrlTitle(result);
console.log("获取微信储存的用户协议同步信息-用户未同意,请弹框处理")
} else {
console.log("获取微信储存的用户协议同步信息-用户已同意,请忽略")
//走隐私允许之后的逻辑
}
})
特别说明:wx.authorize这个API在测试的时候并不会触发监听隐私弹框逻辑 跟微信文档有些出入,如果涉及到该API 可以使用6-2.1方式进行处理具体逻辑如下
1.先从微信侧获取用户隐私状态
2.根据状态处理不同的逻辑
2.1用户未同意则弹框提示
2.2用户已同意就可以调用wx.authorizeAPI或者走之后的隐私接口调用啦
1.微信下拉---最近---最近使用的小程序
2.开发工具---清除模拟器缓存---清除全部数据/授权数据
七、常见错误说明
八、微信文档指引:
用户隐私保护指引填写说明:用户隐私保护指引填写说明 | 微信开放文档
小程序用户隐私保护指引内容介绍:小程序用户隐私保护指引内容介绍 | 微信开放文档
小程序隐私协议开发指南:小程序隐私协议开发指南 | 微信开放文档