1、需要在小程序后台更新用户隐私保护指引如图:
1.1.1、涉及到隐私协议的api:小程序用户隐私保护指引内容介绍 | 微信开放文档
1.1.2、官方文档:小程序隐私协议开发指南 | 微信开放文档
2、需要把开发者工具的基础库调整到2.33.0
3、需要在manifest.json中配置__usePrivacyCheck__: true,隐私相关功能都会启用。
4、代码如下:
4.1.1 隐私保护指引弹窗:文件名 privacy-popup
<template>
<view>
<view class="privacy-popup" v-show="showPrivacy"></view>
<view :class="['popup', showPrivacy?'show':'']"
:style="{ 'height': popupHeight, 'max-height': popupMaxHeight,}">
<!-- 头部 -->
<view class="popup-header">
<slot name="header"></slot>
</view>
<!-- 标题 -->
<view class="title" v-if="title" >
{{ title }}
</view>
<!-- 内容区域 -->
<view class="" >
<slot></slot>
</view>
<!-- 底部区域 -->
<view class="popup-footer">
<view class="relative">
<view @click="openPrivacyContract">
在使用前请仔细阅读<text style="color: royalblue;">{{ privacyContractName }}</text>。
</view>
<view >
当您点击同意即表示你已理解并同意该条款内容。如拒绝,将无法正常使用小程序。
</view>
<view class="flex justify-content-between" style="padding-bottom: 20rpx;">
<view class=""></view>
<view class="flex items-center">
<view class="btn" @click="handleDisagreePrivacyAuthorization">
<view class=""> 拒绝 </view>
</view>
<view class="" style="width: 40rpx;"></view>
<button id="agree-btn" class="transparent-btn" open-type="agreePrivacyAuthorization" @click="handleAgreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">
<view class="btn" style="width: 168rpx;height: 74rpx;">
<view class=""> 允许 </view>
</view>
</button>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
popupHeight: {
type: String,
default: () => 'auto'
},
popupMaxHeight: {
type: String,
default: () => '1130rpx'
},
backgroundSize: {
type: String,
default: () => 'cover'
},
value: {
type: Boolean,
default: () => true
},
title: String,
},
data() {
return {
resolvePrivacyAuthorization: null,
}
},
created() {
// #ifdef MP-WEIXIN
// 兼容低版本
console.log("wx.onNeedPrivacyAuthorization:....", wx.onNeedPrivacyAuthorization,)
if (wx.onNeedPrivacyAuthorization) {
// 需要用户同意隐私授权时
wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
console.log('触发本次事件的接口:' + eventInfo.referrer)
this.resolvePrivacyAuthorization = resolve;
this.$store.dispatch('SET_SHOW_PRIVACY');
})
}
// #endif
},
computed: {
privacyContractName() {
return this.$store.getters.privacyContractName;
},
showPrivacy: {
get() {
return this.$store.getters.showPrivacy;
},
set(v) {
this.$emit('input', v)
},
},
},
methods: {
close() {
this.showPrivacy = false
},
// 小程序隐私保护指引设置 相关方法 Start
openPrivacyContract() {
wx.openPrivacyContract({
success: (res) => {
}
});
},
async handleAgreePrivacyAuthorization() {
if(this.resolvePrivacyAuthorization) {
// 告知平台用户已经同意,参数传同意按钮的id
await this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
}
await this.$store.dispatch('SET_SHOW_PRIVACY', {
handOper: true, // 是否主动操作
isPrivacy: false, // 是否关闭弹框
});
},
async handleDisagreePrivacyAuthorization() {
if(this.resolvePrivacyAuthorization) {
// 告知平台用户已经拒绝
await this.resolvePrivacyAuthorization({ event: 'disagree' })
};
await this.$store.dispatch('SET_SHOW_PRIVACY', {
handOper: true, // 是否主动操作
isPrivacy: false, // 是否关闭弹框
});
},
// 小程序隐私保护指引设置 相关方法 End
},
options: {
virtualHost: false,
},
}
</script>
<style scoped lang="scss">
.privacy-popup {
position: fixed;
background-color: rgba(0, 0, 0, 0.3);
z-index: 10000;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
.popup {
left: 0;
width: 100vw;
background-color: #000;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
z-index: 10000;
position: fixed;
bottom: 0;
transition: .3s all;
transform: translateY(calc(100% + 100rpx));
display: flex;
flex-direction: column;
.title {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-size: 32rpx;
color: #fff;
height: 68rpx;
}
}
.popup.show {
transform: translateY(0%);
}
.popup-footer {
position: relative;
color: #fff;
margin-bottom: 30rpx;
font-size: 26rpx;
bottom: 0;
padding: 30rpx;
.btn{
width: 168rpx;
height: 74rpx;
line-height: 74rpx;
text-align: center;
border-radius: 40rpx;
font-size: 34rpx;
color: #fff;
background-color: royalblue;
}
}
}
</style>
4.1.2、文件store/modules/user.js
export const MUTATIONS = {
SET_PRIVACY_SHOW: "SET_PRIVACY_SHOW", // 是否显示隐私保护指引弹窗
SET_PRIVACY_NAME: "SET_PRIVACY_NAME", // 隐私保护指引名称由官方返回
};
export const ACTIONS = {
SET_SHOW_PRIVACY: 'SET_SHOW_PRIVACY', // 隐私保护指引逻辑
}
export default {
state: {
showPrivacy: false, // 是否显示隐私保护指引弹窗
privacyContractName: '', // 隐私保护指引名称
},
getters: {
showPrivacy: state => state.showPrivacy, // 是否显示隐私保护指引弹窗
privacyContractName: state => state.privacyContractName, // 隐私保护指引名称
},
mutations: {
// 是否显示隐私保护指引弹窗
[MUTATIONS.SET_PRIVACY_SHOW](state, data) {
state.showPrivacy = data;
},
// 隐私保护指引名称
[MUTATIONS.SET_PRIVACY_NAME](state, data) {
state.privacyContractName = data;
},
},
actions: {
async [ACTIONS.SET_SHOW_PRIVACY](store, data){
// 兼容低版本
if(!wx.getPrivacySetting) {
return false;
}
return new Promise(async (resolve, reject) => {
if(data && data.handOper) {
store.commit(MUTATIONS.SET_PRIVACY_SHOW, data.isPrivacy);
return resolve(false);
}else{
// 小程序隐私保护指引
wx.getPrivacySetting({
success: res => {
console.log("getPrivacySetting:", res)
// 返回结果为
// res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
store.commit(MUTATIONS.SET_PRIVACY_SHOW, res.needAuthorization);
store.commit(MUTATIONS.SET_PRIVACY_NAME, res.privacyContractName);
if (res.needAuthorization) {
// 需要弹出隐私协议;
return resolve(true);
} else {
// 用户已经同意过隐私协议,所以不需要再弹出隐私协议
// 也能调用已声明过的隐私接口
return resolve(false);
}
},
fail: () => {},
complete: () => {}
})
}
})
},
}
}
4.1.3、在有涉及到隐私api的页面调用 <privacy-popup></privacy-popup>组件
<!-- #ifdef MP-WEIXIN -->
<!-- 隐私保护指引弹窗 -->
<privacy-popup title="隐私协议声明" popupHeight="380rpx"></privacy-popup>
<!-- #endif -->
5、比如点击复制api即可调用隐私保护指引弹窗 (复制、获取手机号码等都为隐私api)