近期,关于小程序隐私保护改动,让很多人头疼
官方公告地址:https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801
官方提供的交互方式是弹窗的形式,对于业务比较复杂的小程序,如果是这种方式,改动就比较多了,每个涉及的页面都得声明一个弹窗组件,比较繁琐。
所以,我灵机一动,想了另一种交互方式,页面的方式,在全局入口用onNeedPrivacyAuthorization监听,只要没授权,就跳转到授权页面去,然后所有逻辑就在页面里面去处理了,这种方式也有问了微信官方的人,说是可以这样实现,交互方式开发者自行设计,具体可看https://developers.weixin.qq.com/community/develop/doc/000a08b7af80484707404d60c61c00
下面是具体的实现代码(代码是从uni-app转过来的,可能有点小问题,自行调整哈)
- 在app.js入口监听,当用户点击需要授权的操作时,判断没授权就跳到授权的页面去(把当前的resolve保存在全局resolvePrivacyAuthorization)
App({
onLaunch (options) {
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization(resolve => {
this.globalData.resolvePrivacyAuthorization = resolve
wx.navigateTo({
url: '/pagesM/userPrivacyAuth/index'
})
console.log('需要隐私协议弹窗')
})
}
},
globalData: {
resolvePrivacyAuthorization: null
}
})
2. /pagesM/userPrivacyAuth/index页面
// wxml
<view class="privacy">
<view class="privacy-content">
<view class="privacy-content-title">隐私保护指引</view>
<view class="privacy-content-desc">
在使用当前小程序服务之前,请仔细阅读<text class="link" bindtap="openPrivacyContract">{{privacyContractName}}</text>。如你同意{{privacyContractName}},请点击“同意”开始使用。
</view>
<view class="privacy-footer">
<button
class="privacy-footer-button reject-button"
bindtap="handleDisagreePrivacyAuthorization">
拒绝
</button>
<button
class="privacy-footer-button agree-button"
id="agree-btn"
open-type="agreePrivacyAuthorization"
bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">
同意
</button>
</view>
</view>
</view>
// js
Page({
data: {
resolvePrivacyAuthorization: getApp().globalData.resolvePrivacyAuthorization,
privacyContractName: '《隐私保护指引》'
},
onLoad() {
wx.getPrivacySetting({
success: res => {
this.setData({
privacyContractName: res.privacyContractName
})
}
})
},
// 打开隐私政策
openPrivacyContract() {
wx.openPrivacyContract({
success: () => {},
fail: () => {}
})
},
disagreePrivacyAuthorizationFun() {
if (typeof this.resolvePrivacyAuthorization === 'function') {
this.resolvePrivacyAuthorization({
event: 'disagree'
})
this.setData({
handleDisagreePrivacyAuthorization: null
})
}
},
// 拒绝
handleDisagreePrivacyAuthorization() {
this.disagreePrivacyAuthorizationFun()
wx.navigateBack()
},
// 同意
handleAgreePrivacyAuthorization() {
if (typeof this.resolvePrivacyAuthorization === 'function') {
wx.showToast({
title: '授权成功',
icon: 'none'
})
setTimeout(() => {
this.resolvePrivacyAuthorization({
buttonId: 'agree-btn',
event: 'agree'
})
this.setData({
handleDisagreePrivacyAuthorization: null
})
wx.navigateBack()
}, 500)
}
},
onUnload() {
this.disagreePrivacyAuthorizationFun()
getApp().globalData.resolvePrivacyAuthorization = null
}
})
// wxss
.privacy-content {
width: 100%;
padding: 48rpx;
box-sizing: border-box;
background: #fff;
border-radius: 16rpx;
margin-top: 32rpx;
}
.privacy-content .privacy-content-title {
text-align: center;
color: #333;
font-weight: bold;
font-size: 32rpx;
}
.privacy-content .privacy-content-desc {
font-size: 26rpx;
color: #666;
margin-top: 40rpx;
text-align: justify;
line-height: 1.6;
}
.privacy-content .privacy-content-desc > .link {
color: #07c160;
text-decoration: underline;
}
.privacy-footer {
margin-top: 48rpx;
display: -webkit-flex;
display: flex;
justify-content: center;
}
.privacy-footer-button {
width: 244rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
box-sizing: border-box;
border: none;
margin: 0;
}
.privacy-footer-button::after {
border: none;
}
.privacy-footer-button.reject-button {
background: #f4f4f5;
color: #909399;
margin-right: 32rpx;
}
.privacy-footer-button.agree-button {
background: #07c160;
color: #fff;
}