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」引路领航,筑梦心声。

相关推荐
V+zmm1013412 分钟前
基于微信小程序的乡村政务服务系统springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
还这么多错误?!16 分钟前
uniapp微信小程序,使用fastadmin完成一个一键获取微信手机号的功能
微信小程序·小程序·uni-app
_院长大人_26 分钟前
微信小程序用户信息解密 AES/CBC/NoPadding 解密失败问题
微信小程序·小程序
吃杠碰小鸡28 分钟前
lodash常用函数
前端·javascript
emoji11111138 分钟前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼41 分钟前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习(三)
前端
IT 前端 张1 小时前
Uniapp 手机基座调试App 打包成Apk文件,并上传到应用商店
uni-app