- 一个组件解决隐私授权:小程序用户隐私保护授权弹窗组件
项目链接:https://github.com/94xy/miniprogram-privacy 效果预览: [图片] 使用方法: 1、复制项目 [代码]component[代码] 文件夹中的 [代码]privacy[代码] 文件夹到小程序项目中的组件目录; 2 、在 page.json 中引入组件 { "usingComponents": { "Privacy": "/component/privacy/privacy" } } 3 、在 page.wxml 中使用组件,需要授权显示弹窗,不需要不显示 <Privacy /> 4 、可以在所有使用了隐私接口的页面都加上该组件,授权一次之后使用所有隐私接口不再需要授权 跳过阅读: 可以不阅读就点击“同意”按钮 <Privacy skipRead="{{true}}" /> 流程: 页面显示时使用 wx.getPrivacySetting 接口查询是否需要授权,需要授权则显示组件;用户点击“拒绝”直接退出小程序,用户点击“同意”关闭弹窗并同步给微信,之后可以正常使用所有隐私接口。 注意事项: 2023 年 9 月 15 号之前,默认不会启用隐私相关功能,所以检测不到需要弹窗的情况,可以在 app.json 中配置 "__usePrivacyCheck__": true 之后,接口才可以检测到是否需要弹窗。个人实际情况:我在开发者工具中配置了 "__usePrivacyCheck__": true ,needAuthorization 无论如何返回的都是 false,但在真机模拟的情况下可以返回 true自动打开隐私保护指引界面需在「小程序管理后台」配置《小程序用户隐私保护指引》,官方用户隐私保护指引填写说明。 取消授权: 微信中「微信下拉-最近-最近使用的小程序」中删除小程序可取消授权。 开发者工具中「清除模拟器缓存-清除授权数据」可取消授权。
2023-08-28 - 试着解读一下《小程序隐私协议开发指南》3个官方demo的应用场景
隐私协议开发 关于小程序隐私协议开发, 官方最近给出了3个demo,看起来都不太一样: demo1: 演示使用 wx.getPrivacySetting 和 <button open-type=“agreePrivacyAuthorization”> 在首页处理隐私弹窗逻辑 https://developers.weixin.qq.com/s/gi71sGm67hK0 demo2: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type=“agreePrivacyAuthorization”> 在多个页面处理隐私弹窗逻辑,同时演示了如何处理多个隐私接口同时调用。 https://developers.weixin.qq.com/s/4X7yyGmQ7EKp demo3: 演示 wx.onNeedPrivacyAuthorization、wx.requirePrivacyAuthorize、<button open-type=“agreePrivacyAuthorization”> 和 <input type=“nickname”> 组件如何结合使用 https://developers.weixin.qq.com/s/jX7xWGmA7UKa 说明也比较简单,我结合我查看demo源码说一下我理解的使用场景 demo1 这个是最简单的。调用的隐私协议接口最少,只有一个[代码]wx.getPrivacySetting[代码]。([代码]wx.openPrivacyContract[代码]不算)。 其逻辑就是在调用任何隐私接口之前检查授权状态,已授权则啥也不做,未授权则弹窗。 特点: 开发者主动检查后弹窗,而不是隐私接口调用触发。 简单,代码量最少。 流程:主动检查->弹窗->用户同意->调用隐私接口 适用场景: 小程序启动过程没有调用隐私接口,换句话说,隐私接口需要由用户动作才会调用,如用户点击按钮选择图片。 强隐私需求小程序,用户不给授权就不能用,直接退出那种。 极简小程序,比如就一个页面,或者就只调用一个隐私接口。 以上几种情况就可以使用demo1, 在小程序启动时做检查,没授权就弹窗,用户不同意就退出; 或者对于极简小程序,比如就一个页面点击按钮选个图片,可以在处理按钮事件时调用[代码]wx.getPrivacySetting[代码]。弹窗后用户不同意就啥也不干或给个toast,下次用户再点按钮就再检查再弹窗。 demo2 demo2就复杂一些了,需要用到[代码]wx.onNeedPrivacyAuthorization[代码]接口了,和demo1的区别就是,弹窗是由调用隐私接口触发的,而不是开发者主动检查触发 特点: 弹窗是由调用隐私接口触发。 复杂,代码量多。 流程:调用隐私接口->弹窗(同时隐私接口pending)->用户同意/不同意->隐私接口返回成功或失败 适用场景: 普遍场景,多个页面,多个隐私接口。 被动触发,无需关心隐私接口何时被调用。 demo3 demo3在demo2的基础上,就多了[代码]wx.requirePrivacyAuthorize[代码]调用,官方说法是这个接口用来模拟隐私接口调用。 特点: 弹窗可以由调用隐私接口触发,也可以由[代码]wx.requirePrivacyAuthorize[代码]触发 复杂,代码量多。 流程:调用隐私接口(wx.requirePrivacyAuthorize)->弹窗(同时隐私接口pending)->用户同意/不同意->隐私接口返回成功或失败 相较于demo1,相同的地方在于开发者可主动触发隐私弹窗,不同的地方在于demo3更复杂一些 相较于demo2,相同的地方在于其逻辑和调用真实隐私接口是一致的,不同之处在于给开发者提供了一种更灵活的可主动触发弹窗的模式 你可以认为 demo3=demo1 + demo2 适用场景: 同demo2。 无接口的隐私组件,如<input type=“nickname”> 比demo2更灵活的需求. 对于[代码]wx.requirePrivacyAuthorize[代码]接口,大家不要把这个接口局限于仅在开发时调试用。这个接口也是可以用在线上的。可以用来实现更灵活的逻辑。 以上就是我对这3个demo的理解,大家有什么样的想法欢迎在评论区留言大家一起讨论。
2023-08-24 - 一张图带你理解《隐私保护协议》
这是那个引起开发同学摔盆砸碗的公告 原文地址 [代码]为规范开发者的用户个人信息处理行为,保障用户的合法权益,自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私接口。 [代码] 这是开发同学需要特别关注的事项: 在 2023年9月15号之前,在 app.json 中配置 usePrivacyCheck: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。 在 2023年9月15号之后,不论 app.json 中是否有配置 usePrivacyCheck,隐私相关功能都会启用。 撒疼 这里省略一万句脏话 撒疼,看完公告,只感受到了:时间紧,任务重;具体咋搞?不知道,看不懂,一脸懵逼 图在最下面,中间有很多废话,如果看官猴急,可以直接翻到最下面 必须要看的 2 篇文章; 官方的,都是官方的,统统都是官方提供的 不知道怎么填写隐私协议,看这里:用户隐私保护指引设置 想查看隐私接口与对应的处理的信息关系,点这里:小程序用户隐私保护指引内容介绍 必须要知道的 4 个Api; wx.getPrivacySetting 查询隐私授权情况官方链接 wx.onNeedPrivacyAuthorization 监听隐私接口需要用户授权事件。 官方链接 wx.openPrivacyContract 跳转至隐私协议页面 官方链接 wx.requirePrivacyAuthorize 模拟隐私接口调用,并触发隐私弹窗逻辑 官方链接 # wx.getPrivacySetting(Object object) [代码]// # 查询隐私授权情况 # wx.getPrivacySetting({ success: res => { console.log(res) // 返回参数示例 // { // errMsg: "getPrivacySetting:ok" // needAuthorization: true // 是否需要用户授权隐私协议(如果用户之前授权过则会返回false,如果用户还没授权过则返回true,如果用户之前授权过、但后来小程序又新增了隐私收集类型也会返回true) // privacyContractName: "《xxUAT小程序隐私保护指引》" //隐私授权协议的名称 // } } }) [代码] # wx.onNeedPrivacyAuthorization [代码]// # 监听隐私接口需要用户授权事件 # /** * - 监听隐私接口需要用户授权事件 * - 当需要用户进行隐私授权时会触发 * - 触发该事件时,开发者需要弹出隐私协议说明,并在用户同意或拒绝授权后调用回调接口 resolve 进行上报 */ wx.onNeedPrivacyAuthorization(resolve => { // 需要用户同意隐私授权时 // 弹出开发者自定义的隐私授权弹窗 this.setData({ showPrivacy: true }) this.resolvePrivacyAuthorization = resolve }) [代码] # wx.openPrivacyContract [代码]// # 跳转至隐私协议页面 # wx.openPrivacyContract({ success: (res) => { // 打开成功 console.log("openPrivacyContract - success", res) // 返回参数示例 // { // errMsg: "openPrivacyContract:ok" // } }, fail: () => {}, // 打开失败 }) [代码] # wx.requirePrivacyAuthorize [代码]// # 模拟隐私接口调用,并触发隐私弹窗逻辑 # wx.requirePrivacyAuthorize({ success: () => { // 用户同意授权 // 继续小程序逻辑 }, fail: () => { // 用户拒绝授权 }, }) [代码] 一看就明白的流程图 可以查看大图,更清晰哦; [图片] 一看就会,一做就废 代码写好了,工具上就是不展示协议? 升级开发者工具,基础库版本调整到 3.0.1 如果想要代码,私信我 说话温柔点,大叔手把手教你 下一篇来提取公共方法,看官莫急
2023-08-23 - 关于新版隐私协议接口wx.onNeedPrivacyAuthorization的解读以及实现代码(二)
官方公告地址: https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801 目前,开发工具或者体验版的小程序,调试基础库改成3.0.0可以适配测试,线上版本9月15日之后生效,所以这之前需要尽快改完,发布一版,否则到了9月15号之后 线上就会生效报错了。 这是官方的Demo地址,也是每个页引用一个全局的组件,个人感觉太过于繁琐了,可以参考以下我整理的代码。 https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html 其实改起来也很简单,以下是实现步骤和代码: 1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下 https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html [图片] 在以上接口用到的页面,需要画一下类似上边的弹窗(这个弹窗可以全局定义个组件,方便多个页面共用),然后里边蓝字可以点击后调用wx.openPrivacyContract(Object object)接口即可,会自动跳转打开隐私协议页面。 拒绝按钮可以加一个点击事件,然后在事件里这样写,官方demo里也没有加id。 <button class="btn-refuse" catch:tap="clickRefuse">拒绝</button> refuse() { this.resolvePrivacyAuthorization({ event: 'disagree' }) }, 同意按钮比较特殊,布局需要用button这样写,记得给button加一个Id <button id="agree-btn" class="btn-agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> 然后在handleAgreePrivacyAuthorization里就可以获取到点击事件,这样写 handleAgreePrivacyAuthorization() { this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' }) }, 2、然后每个有隐私接口的页面引用自己的组件,代码如下 { "usingComponents": { "agreement": "/components/agreement/agreement" } } 布局引用 <!-- 隐私授权弹窗 --> <agreement id="agreement" frameTitle="温馨提示" bind:refuse="refuse" bind:agree="agree"></agreement> 让组件弹窗显示,这样写: this.selectComponent('#agreement').show(); 3、最后需要在用到隐私接口的页面的onShow里加上以下监听代码,在这里边让自定义的隐私弹窗显示出来即可。 onShow: function () { let that = this; if (wx.onNeedPrivacyAuthorization) { wx.onNeedPrivacyAuthorization(resolve => { this.selectComponent('#agreement').show();//这里是让组件弹窗显示 this.resolvePrivacyAuthorization = resolve }) } } 以上代码加上就可以了,如果业务逻辑用到了需要判断是否授权过,可以加上 wx.getPrivacySetting(Object object)去获取是否授权过,用不到可以不加这个判断。 //=======================以下是针对昵称输入框input的type="nickname"的代码=========================== 注意:以下代码只是针对input另外加的,上边提到的代码也都要加上才能正常弹出弹窗 布局,在input的外层View加touch事件,然后加一个focus动态控制焦点。 <view catch:touchstart="handleTouchInput"> <input type="nickname" class="text" bindinput="listenerContent" placeholder="输入名称" maxlength="10" value='{{name}}' focus="{{focus}}" /> </view> 然后,touch事件: handleTouchInput() { let that = this if (wx.getPrivacySetting) { wx.getPrivacySetting({//获取是否需要弹出 success: res => { if (res.needAuthorization) { wx.requirePrivacyAuthorize({//该接口请求隐私协议,会自动触发上边的wx.onNeedPrivacyAuthorization success: () => { that.setData({ focus: true, }) }, fail: () => {}, complete: () => {} }) } else { that.setData({ focus: true, }) } }, fail: () => {}, complete: () => {} }) } else { this.setData({ focus: true }) } }, 这样就可以了,记得把上边提到的监听代码都加上。
2023-08-23 - 小程序隐私保护指引设置最优的无感方案(需要有用户登录流程)
很简单,把 <button open-type="agreePrivacyAuthorization" /> 做成登录页中常见并且需要勾选的【已阅读并同意《用户协议》、《隐私协议》】的那个radio就行了 <template> <view> <view class="flex"><text>手机号</text><text>18612341234</text></view> <view class="flex"><text>短信验证码</text><text>1234</text></view> <button v-if="!isChecked" @click="handlegetPhonenumberFake">获取手机号(假)</button> <button v-else open-type="getPhoneNumber" @getphonenumber="handlegetPhonenumber"> 获取手机号(真)</button> <view class="flex"> <button class="radio" :class="{ current: isChecked }" open-type="agreePrivacyAuthorization" @click="handleClick" /> 已阅读并同意《隐私协议》、《用户协议》 </view> <button @click="handleLogin">登录</button> </view> </template> <script> export default { data() { return { isChecked: false }; }, mounted() {}, methods: { handlegetPhonenumberFake() { uni.showToast({ title: '请先阅读并勾选隐私协议、用户协议', icon: 'none', duration: 2000, }); }, handlegetPhonenumber(event) { if (this.isChecked) { const { iv, code } = event.detail; console.log('iv', iv); console.log('code', code); } else { uni.showToast({ title: '请先阅读并勾选隐私协议、用户协议', icon: 'none', duration: 2000, }); } }, handleClick() { this.isChecked = !this.isChecked; }, handleLogin() { if (this.isChecked) { // 登录业务代码... // 登录成功后返回页面 uni.navigateBack(); } else { uni.showToast({ title: '请先阅读并勾选隐私协议、用户协议', icon: 'none', duration: 2000, }); } }, }, };
2023-09-04 - 适配隐私保护协议接口
1、相关api说明 适配过程中主要是用到了以下几个接口 1. wx.onNeedPrivacyAuthorization:用于监听隐私接口需要用户授权事件,只有当隐私协议需要用户授权时才会由平台触发此事件,然后开发者需要弹窗显示隐私协议说明。如果用户拒绝授权,则隐私接口调用失败,在下次调用到隐私接口时还会继续弹。 2. wx.requirePrivacyAuthorize:用于模拟隐私接口调用,并触发隐私弹窗逻辑,也就是会触发wx.onNeedPrivacyAuthorization,但如果用户之前已经同意过隐私授权,会立即返回success回调,不会触发 wx.onNeedPrivacyAuthorization 。这个api的使用场景目前我是用在获取用户昵称时,在下一篇文章会进行说明。 3. wx.openPrivacyContract:用于打开隐私协议页面。 其他api大家可以根据具体情况选择使用。 2、弹窗思路 其实就是写一个自定义组件,然后在有调用到隐私接口的页面引入,利用自定义组件的attached方法,把各个页面的隐私弹窗组件的显示、隐藏方法保存到自定义组件的全局变量中,当用户点击隐私协议弹窗的同意、拒绝按钮时调用resolve方法,将对应的参数通知给平台。 3、注意点 隐私接口在隐私保护指引中有声明才能调用基础库版本2.32.3及以上开始支持2023.9.15号之前,在 app.json 中配置 __usePrivacyCheck__: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。2023.9.15号之后,不论 app.json 中是否有配置 __usePrivacyCheck__,隐私相关功能都会启用wx.onNeedPrivacyAuthorization 是覆盖式注册监听,若重复注册监听,则只有最后一次注册会生效同意授权后如果想取消授权,在开发工具上 清缓存->清除模拟器缓存->清除授权数据,在手机上删除小程序即可隐私弹窗的z-index要设置成最大,避免被其他遮罩挡住导致无法点击,另外如果有调到官方的api例如wx.showLoading,也要注意是否设置了mask,避免在loading的时候弹出隐私弹窗,导致弹窗无法点击,而loading又要等弹窗关闭才会消失的尴尬情况4、代码如下 4.1、app.json "usingComponents": { //全局自定义组件 "privacyPopup": "/components/privacy/privacyPopup" }, //开启隐私相关功能 "__usePrivacyCheck__": true 4.2、自定义组件privacyPopup 4.2.1、privacyPopup.wxml <view class="container" wx:if="{{show}}"> <view class="cover {{showCoverAnimation?'cover-fade-in':''}}" catch:touchmove="return"></view> <view class="privacy-box {{showBoxAnimation?'slade-in':''}} {{device.isPhoneX? 'phx_68':''}}" catch:touchmove="return"> <view class="title flex-start-horizontal"> <view class="logo" wx:if="{{privacyConfig.icon}}"> <image class="icon" src="{{privacyConfig.icon}}"></image> </view> <view class="mini-name">{{privacyConfig.name || '小程序'}}</view> </view> <view class="tips"> <view class="privacy-content"> <view class="start">{{privacyConfig.content.start}}</view> <view class="link" bindtap="openPrivacyContract"> {{privacyConfig.content.mid}} </view> <view class="end">{{privacyConfig.content.end}}</view> </view> </view> <view class="buttons flex-center"> <button class="cancel reset-btn" bindtap="disagree">拒绝</button> <button class="save reset-btn" id="agree-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="agree">同意</button> </view> </view> </view> 4.2.2、privacyPopup.wxss @import "/app.wxss"; .cover{ background-color: #111; opacity: 0; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 50000; transition: opacity .3s; } .privacy-box{ position: fixed; left: 0rpx; right: 0rpx; bottom: 0rpx; z-index: 51000; background-color: #fff; box-sizing: border-box; padding-top: 60rpx; padding-left: 50rpx; padding-right: 50rpx; border-radius: 30rpx 30rpx 0 0; transform: translateY(100%); transition: transform .3s, bottom .3s; } .cover-fade-in{ opacity: 0.7; } .slade-in{ transform: translateY(0); bottom: 0rpx; } .privacy-box .title{ font-size: 32rpx; font-weight: 500; text-align: center; margin-bottom: 40rpx; color: #161616; } .privacy-box .title .icon{ width: 46rpx; height: 46rpx; margin-right: 8rpx; vertical-align: bottom; border-radius: 50%; } .privacy-box .title .mini-name{ /*margin-bottom: 2rpx;*/ } .privacy-box .tips{ margin-bottom: 20rpx; } .privacy-box .tips .privacy-content{ color: #606266; font-size: 30rpx; margin-bottom: 20rpx; line-height: 1.6; } .privacy-box .tips .privacy-content .start, .privacy-box .tips .privacy-content .link, .privacy-box .tips .privacy-content .end { display: inline; } .privacy-box .tips .privacy-content .link{ color: #1890FF; } .privacy-box .buttons{ margin-bottom: 40rpx; margin-top: 50rpx; text-align: center; font-size: 34rpx; font-weight: 550; } .privacy-box .buttons .save{ width: 220rpx !important; height: 90rpx; line-height: 90rpx; border-radius: 14rpx; color: #fff; /*background:#fff linear-gradient(90deg,rgba(246, 120, 121,.9) 10%, rgb(246, 120, 121));*/ background-color: #07c160; margin-left: -50rpx; } .privacy-box .buttons .cancel{ width: 220rpx !important; height: 90rpx; line-height: 90rpx; border-radius: 14rpx; color: #07c160; background-color: #F2F2F2; } 4.2.3、privacyPopup.js //获取应用实例 const tabbar = require("../../utils/tabbar.js"); const app = getApp(); //用来保存各个页面注册的隐私协议回调事件 let privacyHooks = {}; if (wx.onNeedPrivacyAuthorization) { console.warn("当前基础库支持api wx.onNeedPrivacyAuthorization"); wx.onNeedPrivacyAuthorization(resolve => { console.warn("需要隐私协议弹窗:", resolve); const pages = getCurrentPages(); const route = pages[pages.length - 1].route; const hook = privacyHooks[route]; if (hook) { hook.resolve = resolve; hook.show(resolve); } else { console.error("当前页面没有注册隐藏协议弹窗回调:", route); } }) } else { console.warn("当前基础库不支持api wx.onNeedPrivacyAuthorization"); } Component({ data: { show: false, showCoverAnimation: false,//显示类别选择窗口动画 showBoxAnimation: false,//显示类别选择窗口动画 }, lifetimes: { //在组件实例进入页面节点树时执行 attached: function () { console.warn("privacyPopup attached"); const pages = getCurrentPages(); privacyHooks[pages[pages.length - 1].route] = { show: resolve => { this.show(resolve); }, close: () => { this.hide(); } } }, //在组件实例被从页面节点树移除时执行 detached: function () { console.warn("privacyPopup detached"); } }, methods: { /** * 同意隐私协议 * @param e */ agree(e) { Object.values(privacyHooks).forEach(hook => { hook.close(); hook.resolve && hook.resolve({ event: "agree", buttonId: "agree-btn" }); }); }, /** * 不同意隐私协议 * @param e */ disagree(e) { Object.values(privacyHooks).forEach(hook => { hook.close(); hook.resolve && hook.resolve({ event: "disagree" }); }); }, /** * 显示隐私协议授权弹窗 */ show(resolve) { app.fillConfig(this, ["privacyConfig"], data => { console.log("显示隐私协议弹窗"); const device = app.getSystemInfo(); this.setData({ show: true, device, }, () => { this.setData({ showCoverAnimation: true, showBoxAnimation: true }); //自定义隐私弹窗曝光告知平台 resolve({event: "exposureAuthorization"}); }); tabbar.hideTabByPrivacy(this); }); }, /** * 关闭隐私协议授权弹窗 */ hide() { console.log("隐藏隐私协议弹窗"); this.setData({ showCoverAnimation: false, showBoxAnimation: false }, () => { const that = this; setTimeout(function () { that.setData({ show: false }) }, 300) }) tabbar.showTabByPrivacy(this); }, /** * 打开隐私协议 */ openPrivacyContract() { wx.openPrivacyContract({ success: res => { console.log("openPrivacyContract success") }, fail: res => { console.error("openPrivacyContract fail", res) } }) } } }) 5、弹窗效果 [图片]
2023-09-13 - mp-privacy小程序隐私保护授权弹窗组件
mp-privacy (小程序隐私保护授权弹窗组件) 微信发布关于小程序隐私保护指引设置的公告,为规范开发者的用户个人信息处理行为,保障用户的合法权益,自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私接口。 使用mp-privacy小程序隐私保护授权弹窗组件可降低开发成本,简单配置就可使用。需要授权时展示弹窗,用户点击“拒绝”授权隐私接口时,不能调用隐私接口,但不影响小程序其他功能的使用,点击“同意”后继续调用隐私接口。 [图片] 1 - 仓库地址 mp-privacy【github】 mp-privacy【码云gitee】 2 - 测试环境 微信小程序基础库版本:2.32.3 及以上 3 - 安装方法:npm安装 [代码]npm i mp-privacy --save [代码] 3.1 依赖包安装后,需要在小程序开发者工具中:构建npm 3.2 如果不想使用npm安装,可以直接下载源码,然后复制mp-privacy组件进行使用 4 - 配置与使用(两种使用方式都需要以下配置) 4.1 小程序配置文件 app.json (2023年9月15日前调试需要此步配置) [代码]{ "__usePrivacyCheck__": true, } [代码] 4.2 小程序 app.js [代码]App({ onLaunch: function (options) { // 监听隐私接口需要用户授权事件 if (wx.onNeedPrivacyAuthorization) { wx.onNeedPrivacyAuthorization(resolve => { // 需要用户同意隐私授权时,弹出开发者自定义的隐私授权弹窗 this.globalData.showPrivacy = true; this.globalData.resolvePrivacyAuthorization = resolve }) } }, globalData: { showPrivacy: false, resolvePrivacyAuthorization: null, }, }) [代码] 4.3 使用到隐私接口的页面的配置文件 index.json [代码]{ "usingComponents": { "mp-privacy": "mp-privacy" } } [代码] 4.4 使用到隐私接口的页面文件 index.wxml [代码]<mp-privacy /> [代码] 4.5 所有使用到的隐私接口必须要在「小程序管理后台」设置《小程序用户隐私保护指引》,否则无法触发wx.onNeedPrivacyAuthorization 监听
2023-08-31 - 小程序隐私保护授权弹窗组件(Taro和原生版本)
【原生】https://github.com/hsuna/miniprogram-privacy-popup 【Taro】https://github.com/hsuna/taro-privacy-popup 隐私政策弹窗封装: 项目引入privacyPopup组件,在所有使用到隐私授权的页面引入privacyPopup即可,组件内部注册了onNeedPrivacyAuthorization,且通过队列的方式统一管理隐私授权的回调,无需开发者在页面做其他特殊的处理。. 在 page.wxml 中使用组件 针对Input的封装组件 由于Input无法触发onNeedPrivacyAuthorization,使用插槽的形式,通过getPrivacySetting获取用户隐私状态,在用户未同意的情况下,通过catch:touchstart拦截用户点击交互,使用wx.requirePrivacyAuthorize触发onNeedPrivacyAuthorization事件。. 在 page.wxml 中使用组件,并包裹触点区域
2023-09-03