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

相关推荐
一 乐36 分钟前
校园二手交易|基于springboot + vue校园二手交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
科技D人生1 小时前
Vue.js 学习总结(20)—— Vue-Office 实战:word、pdf、excel、ppt 多种文档的在线预览
vue.js·word·vue-pdf·stylesheet·docx-preview·vue-office
vx1_Biye_Design1 小时前
基于Spring Boot+Vue的学生管理系统设计与实现-计算机毕业设计源码46223
java·vue.js·spring boot·spring·eclipse·tomcat·maven
vx_Biye_Design1 小时前
基于Spring Boot+vue的湖北旅游景点门票预约平台的设计--毕设附源码29593
java·vue.js·spring boot·spring cloud·servlet·eclipse·课程设计
hedley(●'◡'●)1 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
qq5_8115175151 小时前
web城乡居民基本医疗信息管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
百思可瑞教育1 小时前
构建自己的Vue UI组件库:从设计到发布
前端·javascript·vue.js·ui·百思可瑞教育·北京百思教育
百锦再1 小时前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
hdsoft_huge1 小时前
1panel面板中部署SpringBoot和Vue前后端分离系统 【图文教程】
vue.js·spring boot·后端
这儿有一堆花1 小时前
Vue 是什么:一套为「真实业务」而生的前端框架
前端·vue.js·前端框架