小程序隐私保护授权处理方式之弹窗组件

慈云数据 2024-04-23 技术支持 149 0

欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久的🪜

小程序隐私保护授权弹窗组件

调用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 情况下同意之后还有弹窗的问题

*注意事项 *
  1. 2023 年 9 月 15 号之前,默认不会启用隐私相关功能,所以检测不到需要弹窗的情况,可以在 app.json 中配置 "__usePrivacyCheck__": true 之后,接口才可以检测到是否需要弹窗。个人实际情况:我在开发者工具中配置了 "__usePrivacyCheck__": true ,needAuthorization 无论如何返回的都是 false,但在真机模拟的情况下可以返回 true
  2. 审核通过 后才能在真机模式上进行预览;自动打开隐私保护指引界面需在「小程序管理后台」配置《小程序用户隐私保护指引》进行增加类型,官方用户隐私保护指引填写说明;
  3. 主动查询隐私授权同步状态以及展示隐私协议从基础库 2.32.3 开始支持,需设置开发者工具最低基础库版本
体验示例=> 点底部导航 => 我的(会触发隐私弹窗):

在这里插入图片描述

效果展示:

在这里插入图片描述

使用方法
  1. 拷贝 component 文件夹中的 privacy 文件夹到小程序项目中的组件目录

  2. 在 page.json 中引入组件

{
  "usingComponents": {
    "Privacy": "/component/privacy/privacy"
  }
}
  1. 在 page.wxml 中使用组件
 
  1. 可以在所有使用了隐私接口的页面都加上该组件,授权一次之后使用所有隐私接口不再需要授权
取消授权

微信中「微信下拉-最近-最近使用的小程序」中删除小程序可取消授权。

开发者工具中「清除模拟器缓存-清除授权数据」可取消授权。

相关链接

官方:小程序隐私协议开发指南

代码模块

1、技术:taro + vue3 + ts

2、创建component组件Privacy文件,在需要授权的页面添加就阔以

3、在小程序开发工具中使用真机模式进行调试开发

  1. wxml 原生微信写法
// 1. 微信wxml的写法
// component/privacy/privacy.wxml
微信扫一扫加客服

微信扫一扫加客服

点击启动AI问答
Draggable Icon