注册
web

zero-privacy——uniapp小程序隐私协议弹窗组件

一. 引言


为规范开发者的用户个人信息处理行为,保障用户的合法权益,自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私接口。



公告地址:关于小程序隐私保护指引设置的公告
developers.weixin.qq.com/miniprogram…



接下来我们将打造一个保姆级的隐私协议弹窗组件


二. 开发调试基础


划重点,看文档,别说为什么没有效果,没有弹窗


1. 更新用户隐私保护指引


小程序管理员或开发者可以根据具体小程序涉及到的隐私相关接口来更新微信小程序后台的用户隐私保护指引,更新并审核通过后就可以进行相关的开发调试工作。仅有在指引中声明所处理的用户信息,才可以调用平台提供的对应接口或组件。若未声明,对应接口或组件将直接禁用。





审核时间有人说十几分钟,我自己的给大家参考一下。



审核通过!审核通过!审核通过后才可以开发调试。


2.配置调试字段 "__usePrivacyCheck__": true



  • 在 2023 年 9 月 15 号之前,在 app.json 中配置 "__usePrivacyCheck__": true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。
  • 在 2023 年 9 月 15 号之后,不论 app.json 中是否有配置 usePrivacyCheck,隐私相关功能都会启用。
  • 所以在基于uni-app开发时,我们在 2023 年 9 月 15 号之前进行相关开发调试则需要在manifest.json文件mp-weixin中添加"__usePrivacyCheck__": true
  • manifest.json文件源码视图

 "mp-weixin" : {
"__usePrivacyCheck__": true
},

3. 配置微信开发工具基础库


将调试基础库改为3.0.0以上。具体路径为:
微信开发者工具->详情->本地设置->调试基础库


以上配置完成后,即可看看效果,我在小程序后台设置了剪切板的隐私接口,果然,已经提示没有隐私授权不能使用了。



三. zero-privacy组件介绍


组件下载地址:ext.dcloud.net.cn/plugin?name…


组件的功能和特点



  • 支持 居中弹出,底部弹出
  • 不依赖第三方弹窗组件,内置轻量动画效果
  • 支持自定义触发条件
  • 支持自定义主题色
  • 组件中最重要的4个api(只需用到前3个):
  • wx.getPrivacySetting 查询隐私授权情况 官方链接
  • wx.onNeedPrivacyAuthorization 监听隐私接口需要用户授权事件。 官方链接
  • wx.openPrivacyContract 跳转至隐私协议页面 官方链接
  • wx.requirePrivacyAuthorize 模拟隐私接口调用,并触发隐私弹窗逻辑 官方链接

四. zero-privacy组件使用方法


在uniapp插件市场直接下载导入 uni_modules 后使用即可



  • 最直接看到弹窗效果的测试方法

<template>
<view class="container">
<zero-privacy :onNeed='false'></zero-privacy>
</view>
</template>

注意以上是测试方案,不建议实际开发中按上面的方法使用,推荐以下两种方法



  • 在小程序首页等tabbar页面直接处理隐私弹窗逻辑

<template>
<view class="container">
<zero-privacy :onNeed='false' :hideTabBar='true'></zero-privacy>
</view>
</template>


  • 在页面点击某些需要用到隐私协议后处理隐私弹窗逻辑

<template>
<view class="container">
<view class="btn" @click="handleCopy">
复制
</view>
<zero-privacy></zero-privacy>
</view>
</template>


  • 自定义内容使用

<template>
<view class="container">
<zero-privacy title="测试自定义标题" predesc="协议前内容" privacy-contract-name-custom="<自定义名称及括号>" subdesc="协议后内容协议后内容协议后内容.&#10;主动换行"></zero-privacy>
</view>
</template>

五. zero-privacy组件参数说明


参数类型默认值描述
positionStringcenter可选 bottom,从底部弹出
colorString#0396FF主颜色: 协议名和同意按钮的背景色
bgcolorString#ffffff弹窗背景色
onNeedBooleantrue使用到隐私相关api时触发弹窗,设置为false时初始化弹窗将判断是否需要隐私授权,需要则直接弹出
hideTabBarBooleanfalse是否需要隐藏tabbar,在首页等tabbar页面使用改弹窗时建议改为true
titleString#ffffff用户隐私保护提示
predescString使用前请仔细阅读 Ï协议名称的内容
subdescString当您点击同意后,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法使用该服务。协议名称的内容
privacyContractNameCustomString''自定义协议名称,不传则由小程序自动获取

predescsubdesc 的自定义内容,需要主动换行时在内容中添加实体字符 &#10; 即可


六. zero-privacy组件运行效果



截屏2023-09-07 上午10.47.33.png




作者:zerojs
来源:juejin.cn/post/7273803674790150183

0 个评论

要回复文章请先登录注册