Use wx.requirePrivacyAuthorize to implement WeChat applet user privacy protection.
I. Introduction
WeChat Mini Program official announcement "Announcement on the Setting of Privacy Protection Guidelines for Mini Programs" . If not processed, many authorizations will become unusable, such as avatar nickname, obtaining mobile phone number, location, accessing photo albums, uploading pictures and videos, accessing clipboard content, etc. For details, please refer to the "Introduction to Mini Program User Privacy Protection Guidelines" .
2. Privacy related settings
1. On the WeChat public platform , 【设置】- 【服务内容与声明】 set user privacy protection guidelines and add the interface permissions required by the project.
ps: [ User Privacy Protection Guidelines] After submission, the official will review it. Only after the review is passed, the corresponding interface permissions will take effect.
For example: The error message when uploading an avatar is as follows.
chooseAvatar:fail api scope is not declared in the privacy agreement。
2. Open uniapp the project manifest.json , select [ 源码视图], and add the following configuration:
"mp-weixin": {
"__usePrivacyCheck__": true, //隐私政策
},
3. Set up the debugging basic library of WeChat developer tools, minimum2.33.0
3. Solution
1) Verify whether the user has privacy authorization
Use the wx.requirePrivacyAuthorize() interface to verify that the user has previously agreed to privacy authorization
onReady() {
var _this = this;
// 隐私政策
wx.getPrivacySetting({
success: res => {
// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
console.log(res)
if (res.needAuthorization) {
// 需要弹出隐私协议
_this.$refs.privacy.privacyShow = true;
return;
} else {
// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
}
},
fail: () => {},
complete:() => {}
})
},
If the return value of needAuthorization is true, the user is required to perform privacy authorization.
2) Index introduces components
<template>
<view>
<!-- 用户隐私保护指引弹窗租金 -->
<UserPrivacy ref="privacy"></UserPrivacy>
</view>
</template>
<script>
import UserPrivacy from "@/components/user/userPrivacy.vue";
export default {
components: {
UserPrivacy
},
data() {
return {
// 隐私设置弹窗开关
privacyShow: false,
}
},
onReady() {
var _this = this;
// #ifdef MP-WEIXIN
// 隐私政策
wx.getPrivacySetting({
success: res => {
// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
console.log(res)
if (res.needAuthorization) {
// 显示用户隐私组件弹窗
_this.$refs.privacy.privacyShow = true;
return;
} else {
// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
// 调用授权位置接口
_this.getLocation();
}
},
fail: () => {},
complete:() => {}
})
// #endif,
methods: {
// 获取当前位置
getLocation() {
let _this = this;
var mapkey = uni.getStorageSync('webConfig').web_config_str.mapkey;
uni.getFuzzyLocation({
type: 'gcj02', //国测局坐标gcj02
geocode: true, //是否解析地址信息，仅App平台支持
isHighAccuracy: true, //开启高精度定位
success(res) {
console.log('==获取当前位置的经纬度-成功==');
console.log(res);
_this.longitude = res.longitude;
_this.latitude = res.latitude;
// 设置经纬度缓存
uni.setStorageSync('longitude', res.longitude);
uni.setStorageSync('latitude', res.latitude);
// 引入腾讯地图SDK核心类
var QQMapWX = require('@/util/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
key: mapkey,
});
// 根据经纬度获取所在位置
qqmapsdk.reverseGeocoder({
location: {
longitude: res.longitude,
latitude: res.latitude,
},
success: function(res) {
console.log("==根据经纬度获取所在位置==");
console.log(res);
_this.city = res.result.ad_info.city;
// 设置城市缓存
uni.setStorageSync('province', res.result.ad_info.province);
uni.setStorageSync('city', res.result.ad_info.city);
uni.setStorageSync('district', res.result.ad_info.district);
uni.setStorageSync('address', res.result.address);
}
});
},
fail(err) {
console.log('获取当前位置的经纬度-失败');
// 设置默认城市、经纬度
}
});
},
}
}
</script>3) Pop-up window component code
<template>
<view>
<!-- 隐私保护指引弹窗 -->
<u-popup v-model="privacyShow" mode="center" width="600rpx" border-radius="20" :mask-close-able="false">
<view class="privacyBox">
<view class="privacyTit">用户隐私保护提示</view>
<view class="privacyDesc">
感谢您的使用，在使用本小程序前，应当阅读并同意<text
@click="openClick">《用户隐私保护指引》</text>。当您点击同意并开始使用程序服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。
</view>
<view class="privacyPost">
<view class="refuseBtn">
<navigator target="miniProgram" open-type="exit">不同意并退出</navigator>
</view>
<button class="agreeBtn" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="agreeClick">同意并继续</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
// 隐私设置弹窗开关
privacyShow: false,
}
},
onReady() {
},
methods: {
// 打开隐私协议
openClick() {
wx.openPrivacyContract({
success: () => {}, // 打开成功
fail: () => {}, // 打开失败
complete: () => {}
})
},
// 同意
agreeClick() {
// 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
this.privacyShow = false;
// 重新授权定位，调取父组件方法
this.$parent.getLocation();
},
}
}
</script>
<style scoped lang="scss">
.privacyBox {
width: 600rpx;
padding: 60rpx;
box-sizing: border-box;
}
.privacyTit {
font-size: 32rpx;
font-weight: bold;
color: $uni-text-main;
text-align: center;
overflow: hidden;
}
.privacyDesc {
font-size: 28rpx;
color: $uni-text-sub;
overflow: hidden;
margin-top: 30rpx;
}
.privacyDesc text {
color: $uni-primary;
}
.privacyPost {
overflow: hidden;
margin-top: 60rpx;
display: flex;
justify-content: center;
align-items: center;
}
.privacyPost .refuseBtn {
flex: 1;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
font-weight: bold;
color: #fff;
background: $uni-info-dark;
border-radius: 40rpx;
box-sizing: border-box;
overflow: hidden;
}
.privacyPost .agreeBtn {
flex: 1;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
font-weight: bold;
color: #fff;
background: $uni-primary;
border-radius: 40rpx;
box-sizing: border-box;
overflow: hidden;
margin-left: 20rpx;
}
</style>ps: Pop-up component framework, uView1 version used for demo. The underlying mask style can be replaced by view.
4) Pop-up window renderings
Reference examples: Yuewanyule self-service chess and card room, Kuaishifang self-service car wash.
