<template>
<view v-if="innerShow" class="mask">
<view class="container">
<view class="title">
<text>用户隐私政策</text>
</view>
<view class="content">
<view class="desc">{{desc1}}</view>
<view class="desc_link" style="color:blue" @tap="openPrivacyContract">{{linkTitle}}</view>
<view class="desc">{{desc2}}</view>
</view>
<view class="oper_container">
<view class="oper_btns">
<navigator open-type="exit" target="miniProgram" style="width: 50%;">
<button id="disagree-btn" type="default" class="disagree" @tap="disagree">不同意并退出</button>
</navigator>
<button id="agree-btn" type="default" open-type="agreePrivacyAuthorization" class="agree" @tap="agree">同意并继续</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
innerShow: {
type: Boolean,
default: false
},
linkTitle: {
type: String,
default: '用户隐私保护提示'
}
},
data() {
return {
title: '用户隐私保护提示',
desc1: '感谢您使用本小程序,您使用本小程序前应当阅读井同意',
desc2: '当您点击同意并开始时用产品服务时,即表示你已理解并同息该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入小程序。'
}
},
methods: {
disagree() {
this.$emit("update:innerShow", false)
},
agree() {
this.$emit("update:innerShow", false)
},
// 阅读协议
openPrivacyContract(){
if(wx.openPrivacyContract){
wx.openPrivacyContract({
success: res => {
console.log('openPrivacyContract success')
},
fail: res => {
console.error('openPrivacyContract fail', res)
}
})
}else{
uni.showToast({
title: '请下载最新的微信客户端', icon: 'none'
})
}
}
},
}
</script>
<style scoped lang="scss">
button::after{
border-radius: 0;
border: 0px solid #fff;
}
.mask{
position: absolute;
top: 0;
left: 0;
z-index: 99999;;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.2);
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 560rpx;
background-color: #fff;
z-index: 99999;
border-radius: 20rpx;
overflow: hidden;
.title{
padding: 30rpx 30rpx 0rpx;
text-align: center;
}
.content{
padding: 20rpx 30rpx 20rpx;
box-sizing: border-box;
font-size: 30rpx;
line-height: 48rpx;
.desc{
color: #c4c4c4;
padding: 20rpx 0;
}
}
.oper_container{
.oper_btns{
display: flex;
justify-content: space-around;
font-size: 30rpx;
font-weight: 700;
font-size: 28rpx;
}
.disagree{
margin: 0;
width: 100%;
color: #999;
border-radius: 0;
background-color: #F8F8F8;
font-size: 32rpx;
}
.agree{
margin: 0;
width: 50%;
background-color: #FFC042;
color: #fff;
border-radius: 0;
font-size: 32rpx;
}
}
}
</style>
官网提供了三种接口用于相关调整内容的测试开发,分别是getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize。
// 2023-9-15起,微信要求涉及用户隐私相关的政策原因必须需要用户授权隐私政策协议,此为授权检测api
if(wx.getPrivacySetting){
wx.getPrivacySetting({
success: res => {
console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
if(res.needAuthorization){
this.innerShow = true;
this.linkTitle = res.privacyContractName || '用户隐私保护指引'
}else{
this.innerShow = false;
}
},
fail: () => {},
complete: () => {},
})
}