没怎么写过文档,有疑问可以评论,写的不好勿喷,小菜鸡一枚。
- 在mainfest.json的源码视图中(mp-weixin下)添加(9月15号后可以不考虑添加)
"__usePrivacyCheck__": true,
- 创建组件(components中)privacySet,组件中使用了弹出层组件(uni-popup),没有下载的可以自行在官网下载,并在组件中设置如下代码
<template>
<uni-popup ref="popupPrivacy" type="center">
<view class="contents">
<view class="Mask-cnontent">
<view class="title">用户隐私协议提示</view>
<view class="text">
感谢您使用XXX小程序,您在使用小程序前请应当阅读并同意
</view>
<view class="privacyText" @click="goRule">
{{privacyContractName}}
</view>
<view class="text">
当您点击同意并开始时用产品服务时,即表示你已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,部分功能可能将不会展示。
</view>
<view class="btn-box">
<button class="btn-one" id="agree-btn" type="default" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgree">同意协议</button>
<view class="btn-tow" @click="disagree()">不同意</view>
</view>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
name: "privacySet",
data() {
return {
innerShow: false,
privacyContractName: '《XXX小程序隐私政策》',
};
},
// 组件创建即执行
created() {
//可以视情况关闭
this.getPrivacySet()
},
methods: {
//查看协议
goRule: function(e) {
wx.openPrivacyContract({
success: res => {
console.log('隐式协议成功')
},
fail: res => {
console.error('隐式协议失败', res)
}
})
},
handleAgree() {
this.$refs.popupPrivacy.close()
},
//同意协议
disagree() {
this.$refs.popupPrivacy.close()
//同意协议后本组件调用父组件方法
this.$emit('initData', true)
// uni.navigateBack() //可以视情况打开
},
// 检测用户是否需要开启权限
getPrivacySet() {
var _this = this
wx.getPrivacySetting({
success: res => {
console.log('组件检测授权状况', res)
if (res.needAuthorization) {
uni.hideLoading()
// 需要弹出隐私协议
_this.showPrivacy = !res.needAuthorization || false
_this.$nextTick(function() {
_this.$refs.popupPrivacy.open()
})
_this.privacyContractName = res.privacyContractName
} else {
// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用隐私接口
_this.showPrivacy = true
_this.privacyContractName = res.privacyContractName
}
}
})
}
}
}
</script>
<style lang="scss">
.contents {
width: 100%;
min-height: 680rpx;
// background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
// display: ;
.Mask-cnontent {
width: 70%;
padding: 30rpx;
background-color: #ffffff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-size: 36rpx;
margin-bottom: 15rpx;
}
.privacyText {
color: #C0AD94;
}
.text {
margin: 20rpx 0;
color: #B5B5B5;
}
.btn-box {
.btn-one {
margin: 40rpx auto 38rpx;
width: 400rpx;
height: 96rpx;
background-color: #C0AD94;
box-shadow: -4rpx -8rpx 16rpx 0rpx rgba(255, 255, 255, 0.6),
4rpx 8rpx 16rpx 0rpx #d3b8a2;
border-radius: 48rpx;
font-size: 35rpx;
line-height: 96rpx;
letter-spacing: 6rpx;
text-align: center;
color: #fff;
}
.btn-tow {
text-align: center;
font-size: 30rpx;
line-height: 40rpx;
text-decoration: underline;
color: #B5B5B5;
}
}
}
}
</style>
- 使用组件
- 在需要使用的页面且需要在父组件中执行相应的数据加载或权限的获取
<privacySet ref="privacy" @initData="init()"></privacySet>
如果需要在某些权限获取失败后执行可以在获取权限执行的结果回调中加入
if (res.detail.errMsg == "privacy permission is not authorized") {
console.log('手机号授权状况', res)
this.$refs.privacy.getPrivacySet()
return
}