小程序添加隐私保护指引弹框（包罗设置隐私保护指引方法） ...

实现效果：

  
前言

从 2023 年 9 月 15 日起必须用户点击同意隐私保护政策并同步给微信之后，开发者才可以调用微信提供的隐私接口。

---

   9 月 15 号之后涉及隐私的接口将无法利用,严肃影响业务逻辑。开发者要做的就是做一个弹窗提示用户阅读隐私保护指引，在用户点击“同意”按钮之后同步给微信，之后微信才允许开发者调用隐私接口，并且还会检测用户是否点击了按钮。
  一、 涉及到利用了隐私接口的小程序必须在「小程序管理后台」设置《小程序用户隐私保护指引》，微信一共提供了 4 个接口给开发者利用，分别是:

wx.getPrivacySetting：查询隐私授权情况
wx.openPrivacyContract：跳转到隐私协议页面
wx.onNeedPrivacyAuthorization：监听隐私接口需要用户授权变乱
wx.requirePrivacyAuthorize ：模拟隐私接口调用，并触发隐私弹窗逻辑
其中隐私保护接口有哪些？
隐私接口链接：https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html

凡是涉及到以上隐私接口的，必须添加隐私弹框，方可利用
二、 设置隐私协议弹框组件

利用uniapp开发小程序，在项目根目录下创建components组件文件夹，创建组件xc-privacyPopup(组件名称可以自己界说)

在xc-privacyPopup.vue文件中，添加如下代码:

1. <template>
2.         <view v-if="showPrivacy" :class="privacyClass">
3.                 <view :class="contentClass">
4.                         <view class="title">用户隐私保护指引</view>
5.                         <view class="des">
6.                                 感谢您选择使用xxxx小程序，我们非常重视您的个人信息安全和隐私保护。使用我们的产品前，请您仔细阅读“
7.                                 <text class="link" @tap="openPrivacyContract">{{privacyContractName}} </text>”，
8.                                 如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益，感谢您的信任！<br />
9.                         </view>
10.                         <view class="btns">
11.                                 <button class="item reject" @click="exitMiniProgram">拒绝</button>
12.                                 <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
13.                                         @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
14.                         </view>
15.                 </view>
16.         </view>
17. </template>
19. <script>
20.         export default {
21.                 name: 'PrivacyPopup',
22.                 data() {
23.                         return {
24.                                 isRead: false,
25.                                 showPrivacy: false,
26.                                 privacyContractName: '',
27.                                 resolvePrivacyAuthorization: null,
28.                         };
29.                 },
30.                 props: {
31.                         position: {
32.                                 type: String,
33.                                 default: 'center'
34.                         }
35.                 },
36.                 computed: {
37.                         privacyClass() {
38.                                 return this.position === 'bottom' ? 'privacy privacy-bottom' : 'privacy';
39.                         },
40.                         contentClass() {
41.                                 return this.position === 'bottom' ? 'content content-bottom' : 'content';
42.                         }
43.                 },
44.                 mounted() {
45.                         if (uni.onNeedPrivacyAuthorization) {
46.                                 uni.onNeedPrivacyAuthorization((resolve) => {
47.                                         this.resolvePrivacyAuthorization = resolve;
48.                                 });
49.                         }
51.                         if (uni.getPrivacySetting) {
52.                                 uni.getPrivacySetting({
53.                                         success: (res) => {
54.                                                 if (res.needAuthorization) {
55.                                                         this.privacyContractName = res.privacyContractName;
56.                                                         this.showPrivacy = true;
57.                                                 } else {
58.                                                         this.showPrivacy = false;
59.                                                 }
60.                                         },
61.                                 });
62.                         }
63.                 },
65.                 methods: {
66.                         openPrivacyContract() {
67.                                 uni.openPrivacyContract({
68.                                         success: () => {
69.                                                 this.isRead = true;
70.                                         },
71.                                         fail: () => {
72.                                                 uni.showToast({
73.                                                         title: '遇到错误',
74.                                                         icon: 'error',
75.                                                 });
76.                                         },
77.                                 });
78.                         },
79.                         exitMiniProgram() {
80.                                 // uni.navigateBack();
81.                                 wx.exitMiniProgram();
83.                         },
84.                         handleAgreePrivacyAuthorization() {
85.                                 this.showPrivacy = false;
86.                                 this.$emit('allowPrivacy');
87.                                 if (typeof this.resolvePrivacyAuthorization === 'function') {
88.                                         this.resolvePrivacyAuthorization({
89.                                                 buttonId: 'agree-btn',
90.                                                 event: 'agree',
91.                                         });
92.                                 }
93.                         },
94.                         closePrivacy() {
95.                                 this.showPrivacy = false;
96.                         }
97.                 },
98.         };
99. </script>
101. <style scoped>
102.         .privacy {
103.                 position: fixed;
104.                 top: 0;
105.                 right: 0;
106.                 bottom: 0;
107.                 left: 0;
108.                 background: rgba(0, 0, 0, .5);
109.                 z-index: 9999999;
110.                 display: flex;
111.                 align-items: center;
112.                 justify-content: center;
113.         }
115.         .privacy-bottom {
116.                 align-items: flex-end;
117.         }
119.         .content {
120.                 width: 632rpx;
121.                 padding: 48rpx;
122.                 box-sizing: border-box;
123.                 background: #fff;
124.                 border-radius: 16rpx;
125.         }
127.         .content-bottom {
128.                 position: absolute;
129.                 bottom: 0;
130.                 width: 96%;
131.                 padding: 36rpx;
132.                 padding-bottom: constant(safe-area-inset-bottom);
133.                 padding-bottom: env(safe-area-inset-bottom);
134.                 border-radius: 16rpx 16rpx 0 0;
135.         }
137.         .content .title {
138.                 text-align: center;
139.                 color: #333;
140.                 font-weight: bold;
141.                 font-size: 32rpx;
142.         }
144.         .content .des {
145.                 font-size: 26rpx;
146.                 color: #666;
147.                 margin-top: 40rpx;
148.                 text-align: justify;
149.                 line-height: 1.6;
150.         }
152.         .content .des .link {
153.                 color: #1989ff;
154.                 text-decoration: underline;
155.         }
157.         .btns {
158.                 margin-top: 48rpx;
159.                 margin-bottom: 12rpx;
160.                 display: flex;
161.         }
163.         .btns .item {
164.                 width: 200rpx;
165.                 height: 72rpx;
166.                 overflow: visible;
167.                 display: flex;
168.                 align-items: center;
170.                 justify-content: center;
171.                 /* border-radius: 16rpx; */
172.                 box-sizing: border-box;
173.                 border: none !important;
174.         }
176.         .btns .reject {
177.                 background: #f4f4f5;
178.                 color: #1989ff;
179.                 font-size: 14px;
180.                 background: #edf5fe;
181.                 font-weight: 300;
182.                 margin-right: 16rpx;
183.         }
185.         .btns .agree {
186.                 width: 200rpx;
187.                 background: #1989ff;
188.                 color: #fff;
189.                 font-size: 16px;
191.         }
193.         .privacy-bottom .btns .agree {
194.                 width: 440rpx;
196.         }
197. </style>

复制代码

三、在页面中利用协议弹窗组件

在页面中直接引用<xc-privacyPopup ref=“privacyComponent” position=“center” @allowPrivacy=“allowPrivacy”>即可
1、平凡页面利用协议弹窗：

1. <template>
2.         <view>
3.                 <!-- 用户隐私保护指引 -->
4.                 <xc-privacyPopup ref="privacyComponent" position="center"></xc-privacyPopup>
5.         </view>
6. </template>
8. <script>
9.         export default {
10.                 data() {
11.                         return {};
12.                 }
13.         }
14. </script>
16. <style lang="scss" scoped>
18. </style>

复制代码

2、存在条件判断的页面利用协议弹窗：

1. <template>
2.         <view>
3.                 <!-- 用户隐私保护指引 -->
4.                 <xc-privacyPopup ref="privacyComponent" position="center" @allowPrivacy="allowPrivacy"></xc-privacyPopup>
5.         </view>
6. </template>
8. <script>
9.         export default {
10.                 data() {
11.                         return {};
12.                 },
13.                 onLoad() {},
14.                 onShow() {
15.                         // 查询隐私协议
16.                         wx.getPrivacySetting({
17.                                 success: res => {
18.                                         if (!res.needAuthorization) {
19.                                                 this.$refs.privacyComponent.closePrivacy();
20.                                                 // 查询授权，针对有tab切换的页面，可以在onshow中查询隐私授权状态，判断在tab切换后是否需要关闭授权弹框
21.                                                 console.log('已经同意隐私授权，不需要再次授权')
22.                                         }
23.                                 },
24.                                 fail: () => {},
25.                                 complete: () => {}
26.                         })
27.                 },
28.                 methods: {
29.                         // 同意隐私协议
30.                         allowPrivacy() {
31.                                 // 同意隐私协议触发事件，有些接口需要同意授权后才能执行，比如获取手机号授权接口，可以在同意隐私协议后，再执行授权获取手机号接口，如果不需要可以不添加该方法
32.                                 console.log('同意隐私授权')
33.                         }
34.                 }
35.         }
36. </script>
38. <style lang="scss" scoped>
40. </style>

复制代码

四、uniapp开发，在manifest.json中添加"usePrivacyCheck" : true；

官方说明：https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html
隐私相关功能启用时间延期至 2023年10月17日。在 2023年10月17日之前，在 app.json 中设置 usePrivacyCheck: true 后，会启用隐私相关功能，如果不设置或者设置为 false 则不会启用。在 2023年10月17日之后，岂论 app.json 中是否有设置 usePrivacyCheck，隐私相关功能都会启用。
添加方法，点击manifest.json，再点击源码视图，在mp-weixin模块下添加"usePrivacyCheck" : true；

五、测试方法

当用户从「微信下拉-近来-近来利用的小程序」中删除小程序，将清空历史同步状态。下次访问小程序后，需要重新同步微信当前用户已阅读并同意小程序的隐私政策等网络利用规则。
开发者可通过此方式进行调试，也可以在开发者工具中「扫除模拟器缓存-扫除授权数据」清空历史同步状态。
线上版本，拉起一次授权同意后，不会再次拉起授权弹框。

六、设置隐私指引

登录小程序公众平台，点击设置–>根本信息设置
小程序公众平台链接：https://mp.weixin.qq.com/

找到用户隐私保护指引，点击更新，设置方法，可以参照微信提供的《标准化用户隐私保护指引》

选择在项目中利用到的隐私接口涉及到的小程序功能，并填写利用的来由，根据要求将隐私保护指引填写完成，并点击确定并生成协议

设置完成后，会有微信官方审核，大约需要15分钟-1小时审核完成。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。