uni-app快速接入微信小程序隐私协议

背景

最近做了一个微信小程序,因为涉及到处理用户隐私,所以需要把这块功能给加上,查了官方的文档以及网上的一些博客,写的都不算清楚明了,有的是自己写弹窗,有的是用第三方的插件,搞起来都有些费事。

因为我是用 uni-app 打包小程序的,而且我的需求就是能过审就行,通过查阅官方文档看到微信推出了官方的隐私弹窗,我觉得这个就能满足我的需求,所以本文就记录下我是如何在 uni-app 快速接入微信官方隐私弹窗的,大致分为三步:

微信小程序后台更新隐私声明

首先需要在微信小程序后台的【设置】-【服务内容声明】-【用户隐私保护指引】更新隐私说明。小程序里用到了哪些就勾选哪些:

比如我用到用户信息(采集用户的微信昵称和头像),剪贴板,那么我就勾选这些,然后填写自己使用这些信息的目的:

确定并生成协议后需要等待微信的审核,审核的时间大概在 1 天左右。

代码接入

开启隐私权限

在 uni-app 启用微信的隐私功能需要在 mainfest.json 里配置 __usePrivacyCheck__: true,具体可以看 uni-app 的小程序隐私协议开发指南

json 复制代码
"mp-weixin": {
		"appid": "wxid",
		"setting": {
                  "urlCheck": false,
                  "minified": true,
                  "es6": true
                },
                "usingComponents": true,
                "__usePrivacyCheck__": true
            }

配置完成后项目运行到微信小程序,在控制台会看到警告说无效的配置,对此可以忽略,实际已经生效。

主动调用隐私接口

在项目的首页onShow 生命周期主动调用微信的隐私接口requirePrivacyAuthorize,具体代码如下:

js 复制代码
{
  onShow() {
    wx.getPrivacySetting({
      success: (res) => {
        if (res.needAuthorization) {
          wx.requirePrivacyAuthorize({
            success: (res) => {
              console.log('用户同意授权')
              console.log(res)
            },
            fail: () => {
              console.log('用户拒绝授权')
              wx.exitMiniProgram()
            }
          })
        }
      }
    })
  }
}

配置完这一步,就可以看到官方隐私弹窗的效果了,如下图所示:

接入隐私协议入口

在个人中心或者设置里加一个隐私协议的入口,直接跳转小程序的隐私协议,也很简单,直接调用微信提供的openPrivacyContract方法就行:

scss 复制代码
toPrivacy() {
  wx.openPrivacyContract()
}

至此就完成了用户隐私协议的接入,包括官方的隐私授权弹窗,以及代码内隐私协议的跳转查看。希望对各位有帮助。

参考文档

微信小程序隐私协议开发指南: developers.weixin.qq.com/miniprogram... 微信隐私授权接口:developers.weixin.qq.com/miniprogram...

uni-app 微信小程序隐私协议开发指南:uniapp.dcloud.net.cn/tutorial/mp...

最后

欢迎关注我的公众号「风度前端」,每天免费分享前端学习资源,前端学习路线,帮助更多的人,从前端到全栈,拥有完全独立的开发能力,为每一个有志优秀的「前端er」引路领航,筑梦心声。

相关推荐
To_OC2 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic3 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy3 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志3 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble4 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯5 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜6 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司6 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
江华森7 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http
IT_陈寒7 小时前
Redis的KEYS命令把我搞崩溃了,改用SCAN才活过来
前端·人工智能·后端