首先说明情况使用的是uniapp并且只需要编译微信小程序，其他情况请按条件编译
话不多说先上流程和代码（直接看代码实现太简单了不讲解）
实现
- 在manifest.json文件中，mp-weixin对象添加
"__usePrivacyCheck__": true.(9.15后添不添加都强制"__usePrivacyCheck__": true) - 在src->components 文件中创建名称为privacy-popup的全局组件
<template>
<u-popup
v-model="show"
mode="bottom"
safe-area-inset-bottom
border-radius="10"
:mask-close-able="false"
>
<view class="privacy-wrap">
<text class="privacy-header"> 用户隐私保护提示</text>
<view class="privacy-content">
为了向你提供优质服务你应当阅井同意
<view class="privacy-link" @click="openPrivacyContract">
《用户隐私保护指引》
</view>
当点击同意并继续时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，不会影响其他非相关功能正常使用。
</view>
<view class="privacy-footer">
<button
id="disagree"
type="default"
class="footer-btn disagree"
@click="handleDisagree"
>
不同意
</button>
<button
id="agree-btn"
type="default"
open-type="agreePrivacyAuthorization"
class="footer-btn"
@agreeprivacyauthorization="handleAgree"
>
同意并继续
</button>
</view>
</view>
</u-popup>
</template>
<script>
export default {
data() {
return {
show: false,
privacyResolves: new Set(),
};
},
mounted() {
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization((resolve) => {
this.show = true;
this.privacyResolves.add(resolve);
});
}
},
methods: {
handleDisagree() {
this.privacyResolves.forEach((resolve) => {
resolve({
event: "disagree",
});
});
this.privacyResolves.clear();
this.show = false;
},
handleAgree() {
this.privacyResolves.forEach((resolve) => {
resolve({
event: "agree",
buttonId: "agree-btn",
});
});
this.privacyResolves.clear();
this.show = false;
},
openPrivacyContract() {
if (wx.openPrivacyContract) {
wx.openPrivacyContract({
success: (res) => {
console.log("openPrivacyContract success");
},
fail: (res) => {
console.error("openPrivacyContract fail", res);
},
});
}
},
},
};
</script>
<style lang="scss" scoped>
.privacy-wrap {
display: flex;
flex-flow: column nowrap;
padding: 20rpx;
}
.privacy-link {
padding: 20rpx 0;
color: #1d7dfa;
}
.privacy-header {
font-weight: 700;
font-size: 36rpx;
padding-bottom: 20rpx;
color: #000;
}
.privacy-content {
width: 100%;
line-height: 40rpx;
font-size: 28rpx;
color: #555;
}
.privacy-footer {
width: 100%;
display: flex;
justify-content: space-evenly;
padding: 20rpx;
.footer-btn {
flex: none;
color: #fff;
width: calc(100vw / 3);
font-size: 30rpx;
font-weight: 500;
line-height: 100rpx;
text-align: center;
height: 100rpx;
border-radius: 20rpx;
border: none;
background: #07c160;
margin: 0;
}
.disagree {
color: #07c160;
background: #f2f2f2;
}
}
</style>
- 封装wx.requirePrivacyAuthorize
const requirePrivacyAuthorize = function (title) {
return new Promise((resolve, reject) => {
// 判断有没有requirePrivacyAuthorize这个方法。没有不需要适配直接resolve
if (wx.requirePrivacyAuthorize) {
wx.requirePrivacyAuthorize({
success: function (res) {
resolve(res)
},
fail: function (err) {
if (title) {
uni.showToast({
title: title,
icon: 'error',
duration: 2000
});
}
reject(err)
},
});
} else {
resolve({})
}
})
}
如何使用
步骤1、 和官网demo3一样在每个页面都需要添加 <privacy-popup> </privacy-popup>
步骤2、 使用 requirePrivacyAuthorize 主动触发（建议你主动触发，而不是调用隐私接口触发）
来人上伪代码：
- 情况一、点击触发
<template>
<view class="details-container">
<button @click="getClipboard">获取剪切版</button>
<privacy-popup> </privacy-popup>
</view>
</template>
<script>
import util from "@/common/util.js";
export default {
methods: {
async getClipboard(){
const privacyRes = await util.requirePrivacyAuthorize('');
if (privacyRes) {
wx.getClipboardData({
success: res => {
console.log('index getClipboardData success', res)
},
fail: res => {
console.log('index getClipboardData fail', res)
}
})
}
}
}
}
</script>
- 情况二、进入页面马上触发(获取当前位置)
<template>
<view class="details-container">
<privacy-popup> </privacy-popup>
</view>
</template>
<script>
import util from "@/common/util.js";
export default {
onShow(){
this.getLocation()
},
methods: {
async getLocation(){
const privacyRes = await util.requirePrivacyAuthorize('');
if (privacyRes) {
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
}
})
}
}
}
}
</script>
- 情况三、button 中有open-type功能 （只需要引入privacy-popup组件就可以）
<template>
<view>
<button
id="agree-btn1"
open-type="getPhoneNumber"
@getphonenumber="handleGetPhoneNumber"
>
同意隐私协议并授权手机号
</button>
<privacy-popup> </privacy-popup>
</view>
</template>
export default {
methods: {
handleGetPhoneNumber(e) {
console.log(e);
const {
detail: { errno },
} = e;
if (errno && errno === 104) {
//提示未同意隐私协议
}
},
},
}
个人理解，不正确轻喷
使用requirePrivacyAuthorize手动触发，已经覆盖大部分场景
即：使用隐私接口前触发 同意调用隐私接口，不同意 个人根据场景处理，可以是提示框说明情况
参考： 微信小程序demo官网地址
