欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结
*分享一个使用比较久的🪜
小程序隐私保护授权弹窗组件
调用wx.getUserProfile进行授权时,返回错误信息:{errMsg: “getUserProfile:fail api scope is not declared in the privacy agreement”, errno: 112} 是因为微信小程序登录,增加了用户是否查看隐私协议的验证,不跳转到隐私协议,就不让用户登录。
微信 2023 年 8 月 10 日发布 关于小程序隐私保护指引设置的公告,9 月 15 日起所有隐私接口需用户点击同意并同步给微信之后才可以使用。
当前组件做了隐私保护指引弹窗界面,直接引用,需要授权时展示弹窗,当用户点击“拒绝”直接退出小程序,点击“同意”同步结果给微信且以后不再弹窗,之后可以正常使用隐私接口。
8 月 28 更新:今天才发现小程序可以使用页面的生命周期,对其进行了简化,只需要使用引入组件即可,不再需要任何其它代码
8 月 29 更新:采纳网页 Liu 的方案,解决多个 tabbar 情况下同意之后还有弹窗的问题
*注意事项 *
- 2023 年 9 月 15 号之前,默认不会启用隐私相关功能,所以检测不到需要弹窗的情况,可以在 app.json 中配置 "__usePrivacyCheck__": true 之后,接口才可以检测到是否需要弹窗。个人实际情况:我在开发者工具中配置了 "__usePrivacyCheck__": true ,needAuthorization 无论如何返回的都是 false,但在真机模拟的情况下可以返回 true
- 需 审核通过 后才能在真机模式上进行预览;自动打开隐私保护指引界面需在「小程序管理后台」配置《小程序用户隐私保护指引》进行增加类型,官方用户隐私保护指引填写说明;
- 主动查询隐私授权同步状态以及展示隐私协议从基础库 2.32.3 开始支持,需设置开发者工具最低基础库版本
体验示例=> 点底部导航 => 我的(会触发隐私弹窗):
效果展示:
使用方法
-
拷贝 component 文件夹中的 privacy 文件夹到小程序项目中的组件目录
-
在 page.json 中引入组件
{ "usingComponents": { "Privacy": "/component/privacy/privacy" } }
- 在 page.wxml 中使用组件
- 可以在所有使用了隐私接口的页面都加上该组件,授权一次之后使用所有隐私接口不再需要授权
取消授权
微信中「微信下拉-最近-最近使用的小程序」中删除小程序可取消授权。
开发者工具中「清除模拟器缓存-清除授权数据」可取消授权。
相关链接
官方:小程序隐私协议开发指南
代码模块
1、技术:taro + vue3 + ts
2、创建component组件Privacy文件,在需要授权的页面添加就阔以
3、在小程序开发工具中使用真机模式进行调试开发
- wxml 原生微信写法
// 1. 微信wxml的写法 // component/privacy/privacy.wxml