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

相关推荐
ganlanA43 分钟前
uniapp+vue 前端防多次点击表单,防误触多次请求方法。
前端·vue.js·uni-app
程序员_三木1 小时前
在 Vue3 项目中安装和配置 Three.js
前端·javascript·vue.js·webgl·three.js
lxw18449125141 小时前
vue 基础学习
前端·vue.js·学习
徐_三岁1 小时前
Vue3 Suspense:处理异步渲染过程
前端·javascript·vue.js
爱吃鱼的酱酱仔1 小时前
uniapp实现APP、小程序与webview页面间通讯
小程序·uni-app
萧寂1731 小时前
Pinia最简单使用(vite+vue3)
前端·javascript·vue.js
涔溪2 小时前
Vue axios 异步请求,请求响应拦截器
前端·javascript·vue.js
darling3312 小时前
vue+elementUI 表单项赋值后无法修改的问题
前端·javascript·vue.js·elementui·ecmascript
呆呆小雅2 小时前
四、Vue 条件语句
前端·javascript·vue.js
山沟沟里的娃2 小时前
pinia从0到1
vue.js