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文件源码视图

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 后使用即可

  • 最直接看到弹窗效果的测试方法
html 复制代码
<template>
	<view class="container">
		<zero-privacy :onNeed='false'></zero-privacy>
	</view>
</template>

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

  • 在小程序首页等tabbar页面直接处理隐私弹窗逻辑
html 复制代码
<template>
	<view class="container">
		<zero-privacy :onNeed='false' :hideTabBar='true'></zero-privacy>
	</view>
</template>
  • 在页面点击某些需要用到隐私协议后处理隐私弹窗逻辑
html 复制代码
<template>
	<view class="container">
		<view class="btn" @click="handleCopy">
			复制
		</view>
		<zero-privacy></zero-privacy>
	</view>
</template>

五. zero-privacy组件参数说明

参数 类型 默认值 描述
position String center 可选 bottom,从底部弹出
color String #0396FF 主颜色: 协议名和同意按钮的背景色
bgcolor String #ffffff 弹窗背景色
onNeed Boolean true 使用到隐私相关api时触发弹窗,设置为false时初始化弹窗将判断是否需要隐私授权,需要则直接弹出
hideTabBar Boolean false 是否需要隐藏tabbar,在首页等tabbar页面使用改弹窗时建议改为true

六. zero-privacy组件运行效果

相关推荐
Sheldon一蓑烟雨任平生1 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
鹿鹿鹿鹿isNotDefined2 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
武昌库里写JAVA3 小时前
C语言 函数指针和指针函数区别 - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
Itai3 小时前
自定义 markdown 解析规则并渲染 Vue 组件
vue.js
karshey3 小时前
【vue】NoticeBar:滚动通知栏组件手动实现(内容、速度、循环间隔可配置)
前端·javascript·vue.js
Cherry Zack5 小时前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
Q_Q5110082855 小时前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
慧一居士6 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
_23336 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
HuYi_code7 小时前
WeChat 小程序下载文件实现
微信小程序·uni-app