记录下工作中常用的原生小程序隐私政策弹窗文件模板
privacy.js
const app = getApp()
Component({
/**
* 组件的初始数据
*/
data: {
privacyContractName: '',
showPrivacy: false,
resolvePrivacyAuthorization: null
},
/**
* 组件的生命周期
*/
pageLifetimes: {
show() {
const _ = this
// const version = wx.getAppBaseInfo().SDKVersion
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
console.log('触发本次事件的接口是:' + eventInfo.referrer)
_.setData({
resolvePrivacyAuthorization: resolve
})
});
}
if (wx.getPrivacySetting) {
wx.getPrivacySetting({
success(res) {
console.log(res, 'res')
if (res.errMsg == "getPrivacySetting:ok") {
_.setData({
privacyContractName: res.privacyContractName,
showPrivacy: res.needAuthorization
})
}
}
})
}
}
},
/**
* 组件的方法列表
*/
methods: {
// 打开隐私协议页面
openPrivacyContract() {
const _ = this
wx.openPrivacyContract({
fail: () => {
wx.showToast({
title: '遇到错误',
icon: 'error'
})
}
})
},
// 拒绝隐私协议
exitMiniProgram() {
wx.showToast({
title: '必须同意后才可以继续使用当前小程序',
icon: 'none'
})
},
// 同意隐私协议
handleAgreePrivacyAuthorization() {
const {
resolvePrivacyAuthorization
} = this.data
this.setData({
showPrivacy: false
}, () => {
if (typeof resolvePrivacyAuthorization === 'function') {
resolvePrivacyAuthorization({
buttonId: 'agree-btn',
event: 'agree',
});
}
})
},
// 通过绑定空事件禁止滑动事件的穿透
handleCatchtouchMove() {
return
}
},
})
privacy.wxml
<view class="privacy" wx:if="{{showPrivacy}}" catchtouchmove="handleCatchtouchMove">
<view class="content">
<view class="title">用户隐私保护提示</view>
<view class="des">
感谢您使用本小程序,<br />
您使用本小程序前应当阅读并同意,<br />
<text class="link" bindtap="openPrivacyContract">
《用户隐私保护指引》
</text><br />当您点击同意并开始使用产品服务时,<br />即表示你已理解并同意该条款内容,<br />该条款内容将对您产生法律约束力,<br />如您拒绝,将无法进入小程序。<br />
</view>
<view class="btns">
<button class="item reject" bindtap="exitMiniProgram">拒绝</button>
<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
</view>
</view>
</view>
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 {
position: relative;
width: 240px;
padding: 48rpx;
height: auto;
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;
text-align: center;
}
.content .des .link {
color: #07c160;
/* text-decoration: underline; */
}
.btns {
margin-top: 48rpx;
margin-bottom: 12rpx;
display: flex;
}
.btns .item {
width: 200rpx;
height: 72rpx;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
/* border-radius: 16rpx; */
box-sizing: border-box;
border: none !important;
}
.btns .reject {
background: #f4f4f5;
color: #666;
font-size: 14px;
font-weight: 300;
margin-right: 16rpx;
}
.btns .agree {
width: 320rpx;
background: #07c160;
color: #fff;
font-size: 16px;
}
privacy.json
{
"component": true,
"usingComponents": {}
}
如何使用
以在首页中使用为例 home-page.json
{
"usingComponents": {
"privacy": "/component/privacy/privacy"
}
}
home-page.wxml
<privacy />
app.json
"__usePrivacyCheck__": true