uni-app develops privacy protocols for small programs
Mini program privacy agreement development
Development Notes
In order to standardize developers' handling of user personal information and protect users' legitimate rights and interests, WeChat requires developers to actively synchronize WeChat's current users to have read and agree to the Mini Program's privacy policy and other collection and use rules before they can call the privacy interface provided by WeChat.
Provides 4 interfaces for developers to use
wx.getPrivacySetting：查询微信侧记录的用户是否有待同意的隐私政策信息
wx.openPrivacyContract：打开跳转到隐私协议页面
wx.onNeedPrivacyAuthorization：监听隐私接口需要用户授权事件
wx.requirePrivacyAuthorize ：模拟隐私接口调用，并触发隐私弹窗逻辑
Notice:
Privacy protocol protection is supported starting from the basic library 2.32.3. Therefore, the debugging basic library of WeChat developer tools needs to be >= 2.32.3
Development Reference: Official User Privacy Protection Document
Configure the "Guidelines for Privacy Protection of Mini Program Users"
Developers need to configure the "Mini Program User Privacy Protection Guidelines" in the "Mini Program Management Backend". For specific reference: Filling Instructions
Notice:
Each privacy interface (of the same type) used needs to be declared in the background. Only by declaring the user information processed can the corresponding interface or component provided by the platform be called. If not declared, the corresponding interface or component will be disabled directly.
Configuration manifest.json
"__usePrivacyCheck__": trueAdd configuration items in manifest.json file
/* 微信小程序特有相关 */
"mp-weixin": {
"requiredPrivateInfos": [
"getLocation"
],
/*开启隐私保护*/
"__usePrivacyCheck__": true
},
Check privacy authorization status
Create privacyProtocol.jsa file to encapsulate the function for querying user privacy agreement authorization status
const privacyProtocol = {
needAuthorization: false,
privacyContractName: ''
}
/**
* 检查用户隐私协议
*/
export function checkUserPrivacyProtocol() {
wx.getPrivacySetting({
success: (res) => {
console.log(res)
if (res.needAuthorization) {
privacyProtocol.needAuthorization=res.needAuthorization
privacyProtocol.privacyContractName=res.privacyContractName
}else{
privacyProtocol.needAuthorization=false
}
uni.setStorageSync("privacyProtocol", privacyProtocol);
}
})
}
APP.view
Call the privacy agreement check function in the app.vue entry
<script>
import {
checkUserPrivacyProtocol} from "@/common/utils/privacyProtocol";
export default {
onLaunch: function() {
console.log('App Launch')
uni.getSystemInfo({
success:(res)=>{
this.$store.commit("initSystemInfo",res)
}
})
const updateManager = uni.getUpdateManager();
updateManager.onCheckForUpdate(function (res) {
console.log("检查更新")
});
updateManager.onUpdateReady(function (res) {
uni.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
updateManager.applyUpdate();
}
}
});
});
updateManager.onUpdateFailed(function (res) {
console.log("新版本下载失败")
uni.showToast({
title: "小程序更新失败", icon: 'none',duration: 5000});
});
/*隐私协议检查*/
checkUserPrivacyProtocol()
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
@import "uview-ui/index.scss";
@import "@/plugin/colorui/main.css";
@import "@/plugin/colorui/icon.css";
</style>
Create a pop-up prompt component
If there is privacy policy information that requires user consent, the developer needs to proactively prompt users to read the privacy policy and other collection and use rules, that is, use a pop-up window to let users view the privacy agreement and confirm their agreement!
The style I wrote is very ugly. Please refer to the open source project:
https://github.com/94xy/miniprogram-privacy, and copy its pop-up component style.
<template>
<view>
<view class="privacy" v-if="privacyProtocol.needAuthorization">
<view class="content">
<view class="title">隐私保护提示</view>
<view class="des">
在使用当前小程序服务之前，请仔细阅读<text class="link" @click="openPrivacyAgreement">{
{privacyProtocol.privacyContractName}}</text>。如你同意{
{privacyProtocol.privacyContractName}}，请点击“同意”开始使用。
</view>
<view class="btns">
<button class="item reject" @click="rejectAuthorization">拒绝</button>
<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" @click="confirmAuthorization">同意</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "PrivacyConfirm",
data() {
return {
privacyProtocol: {
}
}
},
created() {
setTimeout(() => {
this.privacyProtocol = uni.getStorageSync("privacyProtocol");
}, 500);
},
methods: {
/**
* 打开弹窗
*/
open() {
this.privacyProtocol.needAuthorization = true;
},
/**
* 关闭弹窗
*/
close() {
this.privacyProtocol.needAuthorization = false;
},
/**
* 用户点击同意
*/
confirmAuthorization() {
this.close();
},
/**
* 用户点击拒绝
*/
rejectAuthorization() {
const that = this;
uni.showModal({
content: '如果拒绝,部分功能将异常,您确定要拒绝吗?',
success: res => {
if (res.confirm) {
that.showPrivacy = false;
// 直接退出小程序
uni.exitMiniProgram();
}
}
});
},
/**
* 打开隐私协议
*/
openPrivacyAgreement() {
wx.openPrivacyContract({
fail: () => {
uni.showToast({
title: '网络错误',
icon: 'error'
});
}
});
},
},
}
</script>
<style scoped>
.privacy {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .5);
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 632rpx;
padding: 48rpx;
box-sizing: border-box;
background: #fff;
border-radius: 16rpx;
}
.content .title {
text-align: center;
color: #333;
font-weight: bold;
font-size: 32rpx;
}
.content .des {
font-size: 26rpx;
color: #666;
margin-top: 40rpx;
text-align: justify;
line-height: 1.6;
}
.content .des .link {
color: #07c160;
text-decoration: underline;
}
.btns {
margin-top: 48rpx;
display: flex;
}
.btns .item {
justify-content: space-between;
width: 244rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
box-sizing: border-box;
border: none;
}
.btns .reject {
background: #f4f4f5;
color: #909399;
}
.btns .agree {
background: #07c160;
color: #fff;
}
</style>
use
Add this component to all pages that use privacy interfaces. After authorization once, you no longer need authorization to use all privacy interfaces.
<template>
<view>
<!--隐私协议保护确认-->
<PrivacyConfirm></PrivacyConfirm>
</view>
</template>
<script>
import PrivacyConfirm from './components/PrivacyConfirm'
export default {
name: "index",
components:{
PrivacyConfirm
},
data() {
return {
}
}
}
</script>
Clear historical synchronization status
从「微信下拉-最近-最近使用的小程序」中删除小程序，将清空历史同步状态。
在开发者工具中「清除模拟器缓存-清除授权数据」清空历史同步状态
Official privacy pop-up window
After developing the privacy agreement pop-up window by itself, the platform released the official privacy authorization pop-up window.
After the privacy-related functions are enabled (after 2023-10-17 or after the developer configures it in app.json
__usePrivacyCheck__: true), the official privacy authorization pop-up window will be automatically displayed to C-side users without the need for developers to adapt to the development.
Execution logic:
When a developer calls a privacy-related interface, WeChat will determine whether the call needs to trigger the wx.onNeedPrivacyAuthorization event. If the developer does not respond after triggering, WeChat will actively pop up an official pop-up window. If the user agrees, the interface will execute subsequent call logic normally; if the user refuses, an error will be reported.