在开发功能的使用时,有关个人用户信息的调用,需要提前向用户询问(需要配置隐私指引)并得以肯定才可调用
点击进入微信小程序说明文档
写个隐私协议的privacy.vue
组件,并引入到文件中使用(uniapp中使用到的vue的文件)
// privacy.vue
<template>
<van-popup
:show="innerShow"
custom-style="background-color: transparent;overflow:visible;"
:z-index="100"
:catchtouchmove="true"
>
<view class="content">
<image class="privacy_icon" src="" mode="scaleToFill"></image>
<view class="title">用户隐私保护提示</view>
<view class="des">
感谢您使用本小程序,请您在使用前阅读完整版<text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>了解详细信息。
</view>
<view class="des">
当您点击同意开始使用我们的产品和服务,即表示您已理解并同意该条款内容,我们将保护您的个人信息安全,并为您提供完整的服务。
</view>
<view class="btns">
<button id="disagree-btn" class="item reject" @click="handleDisagree">不同意</button>
<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree">同意
</button>
</view>
</view>
</van-popup>
</template>
<script>
let privacyHandler;
let privacyResolves = new Set();
let closeOtherPagePopUpHooks = new Set();
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization(resolve => {
if (typeof privacyHandler === 'function') {
privacyHandler(resolve)
}
});
}
const closeOtherPagePopUp = (closePopUp) => {
closeOtherPagePopUpHooks.forEach(hook => {
if (closePopUp !== hook) {
hook()
}
})
}
export default {
data() {
return {
innerShow: false,
privacyContractName: '《***小程序隐私保护指引》',
currentPage: '', // 当前页面地址
// 不同意授权页面的判断 - 用于不同意授权的页面就回退的使用(如:页面需要定位才可进行)
disagreePrivacyPageList: [
'pages/tabBar/discounts/index'
],
}
},
mounted() {
const pageList = getCurrentPages();
const currentPageObj = pageList[pageList.length - 1];
this.currentPage = currentPageObj.route;
const closePopUp = () => {
this.disPopUp()
}
privacyHandler = resolve => {
privacyResolves.add(resolve)
this.popUp();
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
closeOtherPagePopUp(closePopUp);
}
closeOtherPagePopUpHooks.add(closePopUp)
this.closePopUp = closePopUp;
// 低版本基础库不支持 wx.getPrivacySetting 接口,隐私接口可以直接调用
if (!wx.getPrivacySetting) return;
wx.getPrivacySetting({
success: res => {
this.privacyContractName = res.privacyContractName; // 隐私协议的名称
if (res.needAuthorization) {
return this.popUp()
}
},
fail: () => { },
complete: () => { },
})
},
beforeDestroy() {
closeOtherPagePopUpHooks.delete(this.closePopUp);
},
methods: {
handleAgree(e) {
this.disPopUp()
// 这里演示了同时调用多个wx隐私接口时要如何处理:让隐私弹窗保持单例,点击一次同意按钮即可让所有pending中的wx隐私接口继续执行 (看page/index/index中的 wx.getClipboardData 和 wx.startCompass)
privacyResolves.forEach(resolve => {
resolve({
event: 'agree',
buttonId: 'agree-btn'
})
})
privacyResolves.clear()
},
// 不同意授权
handleDisagree(e) {
this.disPopUp()
privacyResolves.forEach(resolve => {
const isBack = this.disagreePrivacyPageList.includes(this.currentPage);
if(isBack) {
// 用于回退 或者跳转到首页的使用
// this.$switchTab('/pages/tabBar/shopMall/index');
}
resolve({
event: 'disagree',
});
});
privacyResolves.clear();
},
popUp() {
if (this.innerShow === false) {
this.innerShow = true;
}
},
disPopUp() {
if (this.innerShow === true) {
this.innerShow = false;
}
},
// 打开翻看协议
openPrivacyContract() {
wx.openPrivacyContract();
},
LifetimesShow() {
if (this.closePopUp) {
privacyHandler = resolve => {
privacyResolves.add(resolve)
this.popUp()
// 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
closeOtherPagePopUp(this.closePopUp)
}
}
}
},
}
</script>
<style scoped lang="scss">
.content {
width: 648rpx;
padding: 64rpx 58rpx 66rpx;
box-sizing: border-box;
background: linear-gradient(180deg,#ffe7dd, #ffffff 28%);
border: 4rpx solid #ffddc4;
border-radius: 52rpx;
box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(255,255,255,0.99) inset;
overflow: hidden;
text-align: center;
.privacy_icon{
width: 110rpx;
height: 172rpx;
margin: 0 auto 22rpx;
display: block;
background: gray;
}
.title{
font-size: 40rpx;
font-family: Source Han Sans CN, Source Han Sans CN-Bold;
font-weight: 700;
color: #000;
}
.des {
color: #666;
margin-top: 40rpx;
font-size: 28rpx;
text-align: left;
color: #6c6c6c;
line-height: 1.5;
.link{
color: #FF492D;
}
}
}
.btns {
margin-top: 76rpx;
display: flex;
.item {
justify-content: space-between;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: none;
width: 220rpx;
height: 76rpx;
background: #ffffff;
border: 2rpx solid transparent;
border-radius: 40rpx;
&.reject {
color: #676767;
border-color: #B6B6B6;
}
&.agree {
background: #EB2C0E;
color: #fff;
}
}
}
</style>
将此组件注册为全局组件,并以全局的形式的引入到main.js文件中
// 用户隐私权限的嵌入
import privacy from '@/components/privacy/privacy.vue';
Vue.component('privacy', privacy);
在需要使用到协议的页面,直接使用即可;
<privacy ref='privacy'></privacy>
如果在项目中,每个页面都需要引用到<privacy ref='privacy'></privacy>
的组件使用,但却难以在每个文件中添加,使用全局的方式引用,在pages.json
中使用insetLoader
的形式导入,使用此方式可在页面的根目录中导入此组件使用
// pages.json
{
"insetLoader": {
"config": {
"privacy": "<privacy ref='privacy'></privacy>"
},
"label": [
"privacy"
],
"rootEle": "view"
}
}
但如果uniapp的项目中存在分包的形式,此组件不会引入到分包的文件中,还是需要在页面的.vue
的文件中添加使用