uni-app进行小程序隐私协议开发
小程序隐私协议开发
开发说明
为规范开发者的用户个人信息处理行为，保障用户合法权益，微信要求开发者主动同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则，方可调用微信提供的隐私接口。
提供了4 个接口给开发者使用
wx.getPrivacySetting：查询微信侧记录的用户是否有待同意的隐私政策信息
wx.openPrivacyContract：打开跳转到隐私协议页面
wx.onNeedPrivacyAuthorization：监听隐私接口需要用户授权事件
wx.requirePrivacyAuthorize ：模拟隐私接口调用，并触发隐私弹窗逻辑
注意：
隐私协议保护从基础库2.32.3开始支持，因此，微信开发者工具的调试基础库需>=2.32.3
开发参考：官方用户隐私保护文档
配置《小程序用户隐私保护指引》
开发者需在「小程序管理后台」配置《小程序用户隐私保护指引》，具体参考：填写说明
注意：
每个用到的隐私接口(同一类型)都需要在后台声明，仅有声明所处理的用户信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将直接禁用
配置manifest.json
在manifest.json文件中添加
"__usePrivacyCheck__": true配置项
/* 微信小程序特有相关 */
"mp-weixin": {
"requiredPrivateInfos": [
"getLocation"
],
/*开启隐私保护*/
"__usePrivacyCheck__": true
},
查询隐私授权情况
创建privacyProtocol.js文件，封装查询用户隐私协议授权情况的函数
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.vue
在app.vue入口中调用隐私协议检查函数
<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>
创建弹窗提示组件
如果存在有待用户同意的隐私政策信息，开发者需要主动提示用户阅读隐私政策等收集使用规则，也就是使用一个弹窗让用户查看隐私协议，并确认同意！
自己写的样式丑不拉几，参考开源项目：
https://github.com/94xy/miniprogram-privacy，复制其弹窗组件样式
<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>
使用
在使用了隐私接口的页面都加上该组件，授权一次之后使用所有隐私接口就不再需要授权
<template>
<view>
<!--隐私协议保护确认-->
<PrivacyConfirm></PrivacyConfirm>
</view>
</template>
<script>
import PrivacyConfirm from './components/PrivacyConfirm'
export default {
name: "index",
components:{
PrivacyConfirm
},
data() {
return {
}
}
}
</script>
清空历史同步状态
从「微信下拉-最近-最近使用的小程序」中删除小程序，将清空历史同步状态。
在开发者工具中「清除模拟器缓存-清除授权数据」清空历史同步状态
官方隐私弹窗
在自行开发完隐私协议弹窗后，平台发布了官方隐私授权弹窗。
官方隐私授权弹窗在隐私相关功能启用后（2023-10-17日后或开发者在 app.json中配置
__usePrivacyCheck__: true后），无需开发者适配开发，自动向C端用户展示。
执行逻辑：
当开发者调用隐私相关接口时，微信会判断此次调用是否需要触发 wx.onNeedPrivacyAuthorization 事件，若触发后开发者未进行响应，微信将主动弹出官方弹窗。若用户同意，该接口将正常执行后续调用逻辑；若用户拒绝，将进行报错。