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组件运行效果

相关推荐
腻害兔1 小时前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 商城模块:从商品管理到交易引擎,50 张表撑起一整套电商系统
java·大数据·vue.js·产品经理·ai编程
三声三视3 小时前
uni-app 鸿蒙端传参变成 [object Object]?顺着源码追到 ArkTS router 底层才搞明白
人工智能·ai·uni-app·aigc·ai编程·harmonyos
sugar__salt7 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
郝亚军8 小时前
使用Vue 3和Nginx打包和部署Vue.js项目的一般步骤
前端·vue.js·nginx
阿懂在掘金10 小时前
企业级命令式弹窗方案:三行代码适配已有 Dialog
前端·vue.js·前端框架
YWL10 小时前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
达子66611 小时前
第8章_HarmonyOs开发图解 剪贴板
vue.js
小徐_233311 小时前
Open Wot 1.0.5 发布:让 AI 接入 wot-ui,只需要两条命令
前端·uni-app·ai编程
森林的尽头是阳光12 小时前
tree回显问题
javascript·vue.js·elementui
qetfw14 小时前
MWU:Vue 3 + FastAPI 的 MaaFramework 跨平台 WebUI 源码
前端·vue.js·python·fastapi·开源项目·效率工具