1.新建公共组件privacy-popup，协议弹框组件。
index.js
// 隐私保护处理回调
let privacyHandler;
// 隐私协议方法回调
let privacyResolves = new Set();
// 关闭其他页面钩子函数
let closeOtherPagePopUpHooks = new Set()
// 判断基础库是否支持调用
if (wx.onNeedPrivacyAuthorization) {
// 当前基础库支持api wx.onNeedPrivacyAuthorization
wx.onNeedPrivacyAuthorization(resolve => {
console.log('触发 onNeedPrivacyAuthorization')
if (typeof privacyHandler === 'function') {
privacyHandler(resolve)
}
})
} else {
console.error('当前基础库不支持api wx.onNeedPrivacyAuthorization');
}
// 关闭其他页面隐私保护授权弹框
const closeOtherPagePopUp = (closePopUp) => {
closeOtherPagePopUpHooks.forEach(hook => {
if (closePopUp !== hook) {
hook()
}
})
}
Component({
data: {
title: "用户隐私保护提示",
urlTitle: "《滇约充电小程序隐私保护指引》",
showPrivacy: false
},
lifetimes: {
// 在组件实例进入页面节点树时执行
attached: function () {
// 关闭弹框
const closePopUp = () => {
this.disPopUp()
}
// 方法回调
privacyHandler = resolve => {
privacyResolves.add(resolve)
this.popUp()
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
closeOtherPagePopUp(closePopUp)
}
this.closePopUp = closePopUp
closeOtherPagePopUpHooks.add(this.closePopUp)
},
// 在组件实例销毁时执行
detached: function () {
closeOtherPagePopUpHooks.delete(this.closePopUp)
}
},
pageLifetimes: {
show() {
if (this.closePopUp) {
privacyHandler = resolve => {
privacyResolves.add(resolve)
this.popUp()
// 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
closeOtherPagePopUp(this.closePopUp)
}
}
}
},
methods: {
// 同意协议处理
handleAgree(e) {
this.disPopUp()
// 这里演示了同时调用多个wx隐私接口时要如何处理：让隐私弹窗保持单例，点击一次同意按钮即可让所有pending中的wx隐私接口继续执行
privacyResolves.forEach(resolve => {
resolve({
event: 'agree',
buttonId: 'agree-btn'
})
})
privacyResolves.clear()
},
// 拒绝协议处理
handleDisagree(e) {
this.disPopUp()
privacyResolves.forEach(resolve => {
resolve({
event: 'disagree',
})
})
privacyResolves.clear()
},
// 弹起授权弹框
popUp() {
if (this.data.showPrivacy === false) {
this.setData({
showPrivacy: true
})
}
},
// 关闭授权弹框
disPopUp() {
if (this.data.showPrivacy === true) {
this.setData({
showPrivacy: false
})
}
},
// 跳转协议地址
openPrivacyContract() {
wx.openPrivacyContract({
success: res => {
console.log('openPrivacyContract success')
},
fail: res => {
console.error('openPrivacyContract fail', res)
}
})
}
}
})
index.wxml
<!--components/privacy-popup/index.wxml-->
<van-popup show="{{ showPrivacy }}" z-index="{{999}}" round custom-style="margin-top: -100rpx;">
<view class="privacy-title" bindtap="deno">
{{title}}
</view>
<view class="privacy-content">
<view class="privacy-text">
我们非常重视您的个人信息和隐私保护。为了更好地保障您的个人权益，在您使用【滇约充电小程序】前，请您充分阅读并理解
<text class="privacy-text-name" bindtap="openPrivacyContract">{{urlTitle}}</text>。如果您同意以上隐私政策条款，请点击“同意”开始使用小程序。我们将严格遵照经您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
</view>
</view>
<view class="privacy-but">
<button class="refuse-but" bindtap="handleDisagree">
拒绝
</button>
<button class="agree-but" id="agree-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgree">
同意
</button>
</view>
</van-popup>
index.json 和 index.wxss 文件自行编写
2.在需要使用的页面引入 privacy-popup 组件：例如 test页面引入，这样即可完成隐私协议弹框授权，会在你点击同意以后继续执行原来的业务逻辑
<view >
<button bindtap="selectImage">选择图片</button>
</view>
<!-- 隐私协议保护授权 -->
<privacy-popup>
</privacy-popup>
3.参考图
使用了wx.login获取code，后端用code获取openid需要做这个吗？
这个意思是不是有n个页面隐私授权, 这个弹出框要弹出n次, 那如果一个页面有n个隐私授权, 那是弹出一次还是n次