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

一. 引言

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

公告地址：关于小程序隐私保护指引设置的公告
https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

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

二. 开发调试基础

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

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

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

• 不知道怎么填写隐私协议，看看文档：用户隐私保护指引设置https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/

• 哪些api需要用户点击同意隐私协议才可以使用的看这里：小程序用户隐私保护指引内容介绍https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html

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

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

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组件介绍

组件下载地址: https://ext.dcloud.net.cn/plugin?name=zero-privacy

组件的功能和特点

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

四. zero-privacy组件使用方法

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

1. 打开页面直接触发 (在小程序首页等tabbar页面直接处理隐私弹窗逻辑)

<template>
<!-- 有tabbar的页面 -->
	<view class="container">
	<!-- #ifdef MP-WEIXIN -->
		<zero-privacy :onNeed='false' :hideTabBar='true'></zero-privacy>
		<!-- #endif -->
	</view>
</template>

<!-- 没有tabbar的页面 -->
<template>
	<view class="container">
	<!-- #ifdef MP-WEIXIN -->
		<zero-privacy :onNeed='false'></zero-privacy>
		<!-- #endif -->
	</view>
</template>

需要重新触发可以 使用 ref 再次调用插件内的  checkPrivacySetting() 方法

2. 按需触发 (在页面点击某些需要用到隐私协议后处理隐私弹窗逻辑)

<template>
	<view class="container">
		<view class="btn" @click="handleCopy">
			复制
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<zero-privacy></zero-privacy>
		<!-- #endif -->
	</view>
</template>

3. 自定义内容使用

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

4. 进阶使用

<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<zero-privacy @needAuthorization='handleNeedAuthorization' @agree='handleNeedAuthorization(false)'></zero-privacy>
		<!-- #endif -->
	</view>
</template>

<script setup>
	const handleNeedAuthorization=(val)=>{
		console.log('是否需要授权',val);
		// false便是已经授权过,或者无需授权
		if(!val){
			// 无需授权,直接执行业务,同理,点击同意也是执行下面的业务
		}
	}
</script>	

四. 参数说明

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

predesc 和 subdesc 的自定义内容,需要主动换行时在内容中添加实体字符 
 即可

event

参数	描述
agree	同意协议
disagree	点击拒绝,可以自行处理退出小程序等操作
needAuthorization	获取当前是否需要授权,false便是不需要,true表示需要

六. zero-privacy组件运行效果