创建 privacyPopup 组件
<view class="popup_bg" wx:if="{{show}}"></view>
<view class="popup" wx:if="{{show}}">
<view class="content">
<view class="text1">用户隐私保护提示</view>
<view class="text2">感谢您使用本小程序,您使用本小程序前应当阅读并同意</view>
<view class="text3" bind:tap="openPrivacyContract">{{obj.title?obj.title:'《用户隐私保护指引》' }}</view>
<view class="text4">当您点击同意并开始使用产品服务时,即表示你已理解并同意改条款内容,该条款将对您产生法律约束力,如您拒绝,将无法使用小程序</view>
<view class="commit">
<button id="disagree-btn" class="mybotton" bindtap="handleDisagree">不同意并退出</button>
<button id="agree-btn" class="mybotton" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgree">同意</button>
</view>
</view>
</view>
/* components/privacyPopup/index.wxss */
.popup_bg{
position: fixed;
top:0;
width:100%;
height:100%;
background: #000000;
opacity: 0.7;
z-index: 999999999999;
display: flex;
align-items: center;
justify-content: center;
}
.popup{
position: fixed;
top:0;
width:100%;
height:100%;
z-index: 999999999999;
display: flex;
align-items: center;
justify-content: center;
}
.content{
width:600rpx;
/* height:300px; */
border-radius: 20rpx;
background: #ffffff;
padding:60rpx 40rpx;
box-sizing: border-box;
}
.text1{
color:rgba(0, 0, 0, 0.9);
font-size: 30rpx;
}
.text2{
margin:20rpx 0 ;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.5);
}
.text3{
margin:20rpx 0;
font-size: 28rpx;
color:blue;
}
.text4{ margin:20rpx 0; font-size: 28rpx;color: rgba(0, 0, 0, 0.5);}
.commit{
display: flex;
align-items: center;
justify-content: space-between;
}
.mybotton{
padding:0;
margin:0;
width:250rpx;
box-sizing: border-box;
font-weight: 700;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
user-select: none;
font-size: 34rpx;
}
.mybotton::after{
border:none;
background-color:rgba(0, 0, 0, 0.1);
border-radius: 16rpx;
}
// components/privacyPopup/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
show:false,
obj:{},
},
/**
* 组件的方法列表
*/
methods: {
//查看用户隐私保护指引
openPrivacyContract(){
wx.openPrivacyContract({
success: res => {
console.log('openPrivacyContract success')
},
fail: res => {
console.error('openPrivacyContract fail', res)
}
})
},
//同意
handleAgree(){
this.setData({
show:false,
})
},
// 不同意并退出
handleDisagree(){
wx.exitMiniProgram()
}
},
lifetimes:{
attached:function(){
let that = this;
if (wx.getPrivacySetting) {
wx.getPrivacySetting({
success: res => {
console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
if (res.needAuthorization) {
that.setData({
show:true,
[`obj.title`]:res.privacyContractName
})
} else{
that.setData({
show:false
})
this.triggerEvent("agree")
}
},
fail: () => { },
complete: () => { },
})
} else {
// 低版本基础库不支持 wx.getPrivacySetting 接口,隐私接口可以直接调用
this.triggerEvent("agree")
}
}
}
})
直接在需要指引的页面 <privacy-popup></privacy-popup>