微信小程序关于用户隐私政策调整相关的开发配置流程

恩杰發表於 2023-9-5 09:52:00

微信小程序关于用户隐私政策调整相关的开发配置流程

<div style="background-color: rgba(238, 238, 238, 1); padding: 20px">
<div style="background-color: rgba(255, 255, 255, 1); padding: 20px; border-radius: 10px; box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.5)">
<h3>前言：</h3>
最近，微信小程序的开放内容调整属于是比较频繁的，先前有授权微信手机号不在免费转为收费，而在2023年9月15日前，获取一些隐私信息需要弹框请求用户授权；
在此日期之后，微信的隐私政策进行了调整，需要在用户授权的同时要求用户先同意《用户隐私协议》内容后方可进行微信隐私内容获取授权，否则微信会直接禁用开发者调用微信相关隐私api内容（比如微信信息、手机号、位置等）。
官网文档说明传送门：小程序隐私协议开发指南
官网文档有相关的demo示例，可以在开发者工具中打开代码片段进行了解，以下内容仅作学习交流。
</div>
<div style="background-color: rgba(255, 255, 255, 1); padding: 20px; border-radius: 10px; box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.5); margin-top: 10px">
<h3>一、相关配置</h3>
在进行开发前，需要先做几点准备工作：
1、在微信工作平台控制台中，找到菜单底部的设置 - 基本设置 - 服务内容声明 - 用户隐私保护指引中配置你小程序所需要获取的隐私内容；
2、如果不是使用微信原生开发，使用uniapp跨端的开发者，在配置文件中，打开源码视图，在mp-weixin对应内容中配置"__usePrivacyCheck__": true；
<img src="https://img2023.cnblogs.com/blog/2426648/202309/2426648-20230905092621962-417398923.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
注意在9月15日之后，无论是否配置此内容，微信都会默认启用，届时未添加此内容可能将会导致隐私内容无法获取。
<img src="https://img2023.cnblogs.com/blog/2426648/202309/2426648-20230905092549054-1870659873.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
 
</div>
<div style="background-color: rgba(255, 255, 255, 1); padding: 20px; border-radius: 10px; box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.5); margin-top: 10px">
<h3>二、代码块相关</h3>
 基于官网demo的初版组件，可以根据ui设计自由调整；
<div class="cnblogs_code">
<pre><template>
<view v-if="innerShow" class="mask">
 <view class="container">
 <view class="title">
 <text>用户隐私政策</text>
 </view>
 <view class="content">
 <view class="desc">{{desc1}}</view>
 <view class="desc_link" style="color:blue" @tap="openPrivacyContract">{{linkTitle}}</view>
 <view class="desc">{{desc2}}</view>
 </view>
 <view class="oper_container">
 <view class="oper_btns">
 <navigator open-type="exit" target="miniProgram" style="width: 50%;">
 <button id="disagree-btn" type="default" class="disagree" @tap="disagree">不同意并退出</button>
 </navigator>
 <button id="agree-btn" type="default" open-type="agreePrivacyAuthorization" class="agree" @tap="agree">同意并继续</button>
 </view>
 </view>
 </view>
</view>
</template>

<script>
export default {
 props: {
 innerShow: {
 type: Boolean,
 default: false
 },
 linkTitle: {
 type: String,
 default: '用户隐私保护提示'
 }
 },
 data() {
 return {
 title: '用户隐私保护提示',
 desc1: '感谢您使用本小程序，您使用本小程序前应当阅读井同意',
 desc2: '当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。'
 }
 },
 methods: {
 disagree() {
 this.$emit("update:innerShow", false)
 },
 agree() {
 this.$emit("update:innerShow", false)
 }, 　　　　　　　// 阅读协议
 openPrivacyContract(){
 if(wx.openPrivacyContract){
 wx.openPrivacyContract({
 success: res => {
 console.log('openPrivacyContract success')
 },
 fail: res => {
 console.error('openPrivacyContract fail', res)
 }
 })
 }else{
 uni.showToast({
 title: '请下载最新的微信客户端', icon: 'none'
 })
 }
 }
 },
}
</script>

<style scoped lang="scss">
button::after{
 border-radius: 0;
 border: 0px solid #fff;
}
.mask{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 99999;;
 height: 100vh;
 width: 100vw;
 background-color: rgba(0, 0, 0, 0.2);
}
.container{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 560rpx;
 background-color: #fff;
 z-index: 99999;
 border-radius: 20rpx;
 overflow: hidden;
 .title{
 padding: 30rpx 30rpx 0rpx;
 text-align: center;
 }
 .content{
 padding: 20rpx 30rpx 20rpx;
 box-sizing: border-box;
 font-size: 30rpx;
 line-height: 48rpx;
 .desc{
 color: #c4c4c4;
 padding: 20rpx 0;
 }
 }
 .oper_container{
 .oper_btns{
 display: flex;
 justify-content: space-around;
 font-size: 30rpx;
 font-weight: 700;
 font-size: 28rpx;
 }
 .disagree{
 margin: 0;
 width: 100%;
 color: #999;
 border-radius: 0;
 background-color: #F8F8F8;
 font-size: 32rpx;
 }
 .agree{
 margin: 0;
 width: 50%;
 background-color: #FFC042;
 color: #fff;
 border-radius: 0;
 font-size: 32rpx;
 }
 }
}
</style></pre>
</div>
官网提供了三种接口用于相关调整内容的测试开发，分别是getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize。
getPrivacySetting：用于获取用户是否已经同意隐私内容授权；
onNeedPrivacyAuthorization：监听用户是否触发了一个从未记录过的隐私内容；
requirePrivacyAuthorize：测试模拟接口，用于模拟隐私接口的触发；
此内容到现在为止，uni官方尚未同步接入，直接使用wx.getPrivacySetting方式调用即可，且开发工具基础库需要在2.32.3以上才开始支持此内容，所以建议写一个兼容写法。
<div class="cnblogs_code">
<pre>　　　　// 2023-9-15起，微信要求涉及用户隐私相关的政策原因必须需要用户授权隐私政策协议，此为授权检测api
 if(wx.getPrivacySetting){
 wx.getPrivacySetting({
 success: res => {
 console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
 if(res.needAuthorization){
 this.innerShow = true;
 this.linkTitle = res.privacyContractName || '用户隐私保护指引'
 }else{
 this.innerShow = false;
 }
 },
 fail: () => {},
 complete: () => {},
 })
 }</pre>
</div>
之后开发者可以根据自身情况选择合适的时机出现弹框，点击隐私保护指引即可开发先前后微信公众平台配置的隐私协议内容，用户同意隐私协议后即可正常使用小程序。
<img src="https://img2023.cnblogs.com/blog/2426648/202309/2426648-20230905095020472-1380700763.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
 
用户同意之后，再次调用检测用户是否同意隐私政策接口时，状态会返回false，且授权隐私内容即可正常调用了；
</div>
<div style="background-color: rgba(255, 255, 255, 1); padding: 20px; border-radius: 10px; box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.5); margin-top: 10px">
<h3>三、调试相关</h3>
1、当用户从「微信下拉-最近-最近使用的小程序」中删除小程序，将清空历史同步状态。下次访问小程序后，需要重新同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则。
2、开发者可通过此方式进行调试，也可以在开发者工具中「清除模拟器缓存-清除授权数据」清空历史同步状态。
</div>
</div>

</div>
<div id="MySignature" role="contentinfo">
头发什么的已经不重要了，重，要吗？ 
来源：https://www.cnblogs.com/FG452/p/17678835.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序关于用户隐私政策调整相关的开发配置流程