uniapp微信小程序《隐私保护协议》弹窗处理流程

背景

请添加图片描述
《关于小程序隐私保护指引设置的公告》
《小程序隐私协议开发指南》

流程

1.第一步
必须设置且审核通过!!!
在这里插入图片描述
2.第二步

uniapp在manifest.json中添加!!!

/*
在 2023年9月15号之前,在 app.json 中配置 __usePrivacyCheck__: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。
在 2023年9月15号之后,不论 app.json 中是否有配置 __usePrivacyCheck__,隐私相关功能都会启用。
*/
"mp-weixin": { /* 微信小程序特有相关 */"appid": "wxc8888888888","__usePrivacyCheck__":true,"plugins": {"WechatSI": {"version": "0.3.5","provider": "wx069ba97219f66d99"}},
},

很多人前两步没做或者做的不对,导致出现needAuthorization一直为false情况

{needAuthorization: false, privacyContractName: "《小程序隐私保护指引》", errMsg: "getPrivacySetting:ok"}

3.第三步
此处需要根据情况决定,在何时弹出隐私授权弹窗:
1.进入小程序就弹(对开发来说好,就是用户体验不好)
2.在使用到的页面弹出(繁琐,但是用户体验好,有些小程序可能就一两个页面涉及)
3.本示例采用方法2,因为就一个页面需要用到音视频授权,流程为进入需要使用的页面,弹出隐私授权,等待用户确认后,依次弹出音频授权、视频授权确认,让用户一次性点完,以免多处导致用户不耐烦。
如图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template><!-- 如果拒绝隐私授权或者音视频授权,当我们触发例如音频时,会再次弹出 --><button @longpress="startRecord" @touchend="endRecord" type="default">长按发送语音</button><!-- camera组件等自动触发【视频授权】会和【隐私授权】同时出现情况,需要在隐私授权之前隐藏 --><camera v-if="empower"></camera><!-- 隐私授权弹窗 --><view class="mask flex alic justc" v-if="showPrivacy"><view class="privacyBox"><view class="title fz16 fw tc lh40">用户隐私保护</view><view class="txt borBox fz14 lh22 color3">感谢您使用本产品,您使用本产品前应当仔细阅读并同意<text class="colorb" @click="handleOpenPrivacyContract">《小程序隐私保护指引》</text>当您点击同意并开始使用产品服务时,即表示你已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法更好的体验产品。</view><view class="footer flex justsa alic"><button class="cancel borBox" type="primary" @click="showPrivacy = false">拒绝</button><button class="iknow" type="primary" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button></view></view></view>
</template><script>
//同声传译
const plugin = requirePlugin("WechatSI");
const manager = plugin.getRecordRecognitionManager();
export default {data(){return {// 是否弹出隐私授权弹窗showPrivacy: false,// 是否点击同意隐私授权,此变量为了防止例如camera组件等自动触发【视频授权】会和【隐私授权】同时出现情况// 只需在未同意隐私授权情况下,隐藏会触发uni.authorize效果的组件,如下// <camera v-if="empower"></camera>empower:false,}},async onLoad(val) {// 模拟隐私接口调用,并触发隐私弹窗逻辑// wx.requirePrivacyAuthorize({//     success: () => {//         console.log('点击同意');//         this.showPrivacy = true//     },//     fail: () => {//         console.log('点击拒绝');       //     }, //     complete: () => {//         console.log('用户已点击');//     }// })// 监听隐私接口需要用户授权事件,处理被拒绝情况下再次唤醒弹窗if (wx.onNeedPrivacyAuthorization) {wx.onNeedPrivacyAuthorization(resolve => {// 需要用户同意隐私授权时,弹出开发者自定义的隐私授权弹窗this.showPrivacy = trueconsole.log(resolve)})}// 查询隐私授权情况,进入页面有需要直接弹出情况wx.getPrivacySetting({success: res => {console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }if (res.needAuthorization) {console.log('需要授权???')// 需要弹出隐私协议this.showPrivacy = truethis.empower = false} else {console.log('已授权???')this.empower = true// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用已声明过的隐私接口// wx.getUserProfile()// wx.chooseMedia()// wx.getClipboardData()// wx.startRecord()}},fail: () => { },complete: () => { }})},methods: {// 开始录音async startRecord() {manager.stop();// 点击录音再次检验权限await this.getAuth('scope.camera')await this.getAuth('scope.record')manager.start({lang: "zh_CN",duration: 60 * 1000});},// 结束录音endRecord() {manager.stop();},// 用户隐私协议确认按钮handleAgreePrivacyAuthorization(e) {console.log('确认',e)this.showPrivacy = falsethis.empower = true// 点击同意隐私授权后依次弹出授权this.getAuth('scope.camera', false)this.getAuth('scope.record', false)// 用户同意隐私协议事件回调// 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了// wx.getUserProfile()// wx.chooseMedia()// wx.getClipboardData()// wx.startRecord()},// 打开协议handleOpenPrivacyContract() {// 打开隐私协议页面wx.openPrivacyContract({success: () => { }, // 打开成功fail: () => { }, // 打开失败complete: () => { }})},/*** 根据权限名检查权限是否开启,未开启引导开启* @param { string } name * @param { boolean } showAgain 拒绝后再次点击触发弹窗跳转授权列表页*/getAuth(name, showAgain = true) {const nameObj = {'scope.camera': '摄像头','scope.record': '麦克风'}let authCamera = falsereturn new Promise((res, rej) => {uni.getSetting({success(e) {if (!e.authSetting[name]) {uni.authorize({scope: name,// success(){//     console.log('获取权限')// },fail() {if (showAgain) {uni.showModal({title: '提示',content: `您已拒绝授权,为了更好的体验,请重新授权使用${nameObj[name]}`,success(event) {if (event.confirm) {uni.openSetting({success(data) {if (data.authSetting[name]) {authCamera = trueres(true)} else {uni.showToast({title: '未授权',icon: 'none'})}}})}}})}}})} else {authCamera = trueres(true)}}})return authCamera})},}
}
</script><style lang="less" scoped>// 缺少的样式从下面样式表获取.privacyBox{background: #fff;width: 70vw;border-radius: 6px;.title{border-bottom:1px solid #ebedf0;}.txt{// height: 30vh;// overflow-y: auto;padding: 10px;}.footer{border-top:1px solid #ebedf0;.cancel{color: #666;background-color: #fff;font-size: 14px;border: 1px solid #aaa;border-radius: 20px;margin: 8px 0;width: 100px;}.iknow{color: #fff;background-color: #409eff;font-size: 14px;border-radius: 20px;margin: 8px 0;width: 100px;}}}
</style>

样式表

@charset "utf-8";
/* CSS Document */
html,body{height: 100%;width: 100%;word-wrap:break-word;}
.w50{width: 50%;}
.w100{width: 100%;}
*{margin: 0;padding: 0;outline: none;}
.tc{text-align: center}
.tl{text-align: left;}
.tr{text-align: right}
.vm{vertical-align: middle;}
.fl{float: left;}
.fr{float: right;}
.fz26{font-size: 26px;}
.fz25{font-size: 25px;}
.fz24{font-size: 24px;}
.fz22{font-size: 22px;}
.fz20{font-size: 20px;}
.fz18{font-size: 18px;}
.fz16{font-size: 16px;}
.fz14{font-size: 14px;}
.fz12{font-size: 12px;}
.fz11{font-size: 11px;-webkit-transform: scale(0.85);transform: scale(0.85);display: inline-block;transform-origin: left;}
.fz10{font-size: 10px;-webkit-transform: scale(0.8);transform: scale(0.8);display: inline-block;transform-origin: left;}
.fw{font-weight: 600;font-weight: bold;}
.fw4{font-weight: 400;}
.fwB{font-weight: bold;}
.mr5{margin-right: 5px}
.mr10{margin-right: 10px}
.mr12{margin-right: 12px}
.mr15{margin-right: 15px}
.mr20{margin-right: 20px}.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml12{margin-left:12px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}.mt40{margin-top:40px;}
.mt20{margin-top: 20px;}
.mt15{margin-top: 15px;}
.mt12{margin-top: 12px;}
.mt10{margin-top: 10px;}
.mt5{margin-top: 5px;}
.mt3{margin-top: 3px;}
.mt7{margin-top: 7px;}.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb12{margin-bottom: 12px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt12{padding-top: 12px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb12{padding-bottom: 12px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl12{padding-left: 12px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr12{padding-right: 12px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}
.bgf{background: #fff;}
.bgea{background: #EAEAEA;}
.bgF3{background: #5377F3;}
.bg48{background: #F2B448;}
.bgA2{background: #00D7A2;}
.bgF4{background: #FFFBF4;}
.bgFb{background: #EEFFFB;}
.bgs{ box-shadow: 0px 0px 15px #eee;}.colorF{color: #fff;}
.color3{color: #333;}
.color6{color: #666;}
.color9{color: #999;}
.color49{color: #494949;}
.color80{color: #808080;}
.colorA5{color:#A5A5A5}
.colorb{color:blue}
.colorF3{color: #5377F3;}
.color48{color: #F2B448;}
.colorA2{color: #00D7A2;}
.color00{color: #FF0000}
.color26{color: #FFA926;}.lh20{line-height: 20px;}
.lh22{line-height: 22px;}
.lh24{line-height: 24px;}
.lh30{line-height: 30px;}
.lh36{line-height: 36px;}
.lh40{line-height: 40px;}
.lh50{line-height: 50px;}
.lh60{line-height: 60px;}.hide{display: none}
.show{display: block}
.inline{display: inline-block;}
.indent2{text-indent: 2em;}
.txt2{overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
.txt3{overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}
.txtno{white-space: nowrap;}/*不换行*/
.txtsa{text-align: justify;text-align-last: justify;}/*文字分散对齐*/
.wn{white-space:nowrap;}.flex{display: flex;}
.flex1{flex:1;}
.colu{flex-direction: column;}
.justc{justify-content: center;}
.justs{justify-content: space-between}/*两端对齐*/
.justsa{justify-content: space-around}/*分散对齐*/
.juste{justify-content: flex-end;}
.alic{align-items: center}
.wrap{flex-wrap:wrap}
.childEnd{align-self:flex-end;}.posAbs{position: absolute;}
.posRel{position: relative;}
.posFix{position: fixed;}
.top0{top:0;}
.bottom0{bottom:0;}
.left0{left:0;}
.right0{right: 0;}
.w100{width: 100%}
.h100{height: 100%}.border0{border:0}
.borBox{box-sizing: border-box;}
.borderte0{border-top:1px solid #e0e0e0; }
.borderbe0{border-bottom:1px solid #e0e0e0; }
.borRad{border-radius:5px;}
.borRad50{border-radius:50%;}
.over{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.overH{overflow: hidden}
.overS{overflow: scroll;}
.clear{zoom:1;}
.clear:after{content: "\0020";display: block;height: 0;clear: both;}
.mask{width: 100%;height: 100%;background: rgba(20, 20, 20, 0.5);position: fixed;z-index: 5;top: 0;left: 0;}.cursor{cursor: pointer;}
.noClick{pointer-events: none;}
li{list-style:none;}
a{text-decoration:none;color:#555;}
a:hover{color:#555;}
img{display:block;vertical-align:middle;}
a img,fieldset{border:0;}
i,em{font-style:normal}
input,textarea,select{outline:none;}
textarea{resize:none;}
table{border-collapse:collapse;}
[v-cloak] {display: none;
}
备注

下雨了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/132455.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

景联文科技可为多模态语音翻译模型提供数据采集支持

8月22日Facebook的母公司Meta Platforms发布了一种能够翻译和转录数十种语言的人工智能模型——SeamlessM4T&#xff0c;可以在日常生活中或者商务交流中为用户提供更便捷的翻译和转录服务。 相较于传统的文本翻译&#xff0c;这项技术的最大区别在于它可以实现端到端的语音翻译…

4.4-Spring源码循环依赖终极讲解

回顾上期内容 new 容器 new AnnotateBeanDefinitionReader 的时候创建很多创世纪的类&#xff0c;其中有一个ConfigurationPostProcessor是用来解析配置类的&#xff0c;将其注册起来存到Bean定义的Map中【这个类是基于Bean工厂后置处理器的】 这一步是将配置类注册到Bean定…

C++之编译时预定义宏flag(二百一十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

按图搜索淘宝商品(拍立淘)API接口 搜爆款商品 图片搜索功能api 调用示例

接口名称&#xff1a;item_search_img 公共参数 请求地址: 测试item_search_img 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_s…

Linux 下spi设备驱动

参考&#xff1a; Linux kernel 有关 spi 设备树参数解析 Linux kernel 有关 spi 设备树参数解析 - 走看看 Linux SPI驱动框架(1)——核心层 Linux SPI驱动框架(1)——核心层_linux spi驱动模型_绍兴小贵宁的博客-CSDN博客 Linux SPI驱动框架(2)——控制器驱动层 Linux SPI驱…

Redis过期时间的思考

当我们把 Redis 当做缓存来使用时&#xff0c;设置过期时间是必须的&#xff0c;但具体设置多少的过期时间呢&#xff0c;针对不同的场景会有不同的决策。 虚假一个场景&#xff0c;我们基于用户的地理位置推荐附近的陌生主播&#xff0c;用户可以线下去找主播沟通。当系统第一…

【PickerView案例08-国旗搭建界面加载数据 Objective-C预言】

一、来看我们第三个案例 1.来看我们第三个关于PickerView的一个案例, 首先呢,我要问大家一下, 咱们这个是几组数据呢, 这是一个pickerView,只不过,它显示的是什么,一个界面, 前面两个案例,都是文字 这个案例,开始有图片了, 总结一下这三个案例: 1)第一个案例…

R3LIVE源码解析(10) — R3LIVE中r3live_vio.cpp文件

目录 1 r3live_vio.cpp简介 2 r3live_vio.cpp源码解析 1 r3live_vio.cpp简介 R3LIVE主要的公式推导在VIO上&#xff0c;所以我们来细细的分析这部分的功能。R3LIVE将VIO分成了两步&#xff0c;一是直接通过帧间的光流来追踪地图点&#xff0c;并且通过最小化追踪到的地图点的…

C++之打印编译全过程(二百一十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

华为星闪联盟:引领无线通信技术创新的先锋

星闪&#xff08;NearLink&#xff09;&#xff0c;是由华为倡导并发起的新一代无线短距通信技术&#xff0c;它从零到一全新设计&#xff0c;是为了满足万物互联时代个性化、多样化的极致、创新体验需求而诞生的。这项技术汇聚了中国300多家头部企业和机构的集体智慧&#xff…

Python工程师Java之路(p)Module和Package

文章目录 1、Python的Module和Package2、Java的Module和Package2.1、Module2.1.1、分模块开发意义2.1.2、模块的调用 2.2、Package Module通常译作模块&#xff0c;Package通常译作包 1、Python的Module和Package Python模块&#xff08;Module&#xff09;&#xff1a;1个以.…

主从模式详解

主从模式是分布式系统中&#xff0c;多个服务器部署redis的一种方式。分布式系统主要是解决“单点问题”。 如果某个服务器程序&#xff0c;只有一个节点&#xff08;只有一个物理服务器&#xff0c;来部署服务器程序&#xff09;。存在可用性问题&#xff0c;如果这个机器挂了…

算法分析与设计编程题 回溯法

装载问题 题目描述 解题代码 递归回溯 // goods[i]表示货物i的重量, c1,c2分别表示货船1和货船2的载重量 vector<vector<int>> optimalLoading(vector<int>& goods, int c1, int c2) {int n goods.size(); // 货物数量int maxSum 0; // 当前最大载货…

新知同享 | Web 开发性能提升,优化体验

更加强大且开放的 Web 可以简化开发工作并支持 AI 一起来看 2023 Google 开发者大会上 Web 开发值得重点关注的升级与成果 了解 Web 如何实现加速开发&#xff0c;更加便捷 精彩大会现场一览 Web 开发不断发展&#xff0c;每年都带来性能提升和功能迭代&#xff0c;开启丰富多…

【C++】常用算术生成算法

0.前言 1.accumulate #include <iostream> using namespace std;// 常用算术生成算法 #include<vector> #include<numeric> //accumulate 的调用头文件void test01() {vector<int>v;for (int i 0; i < 100; i){v.push_back(i);}int total accumu…

Mysql InnoDB引擎 的hash索引

Mysql InnoDB引擎不支持hash索引&#xff0c;但是在内存结构中有一个自适应hash索引&#xff0c;来提高查询性能 当设置hash索引时会自动转换成btree索引 查一下mysql官方文档&#xff1a;https://dev.mysql.com/doc/refman/5.7/en/create-index.html innodb_adaptive_hash_i…

数据在内存中的存储

目录 数据类型 大小端 判断大小端 练习 1 2 浮点数在内存中储存 存M 存E 取E 数据类型 整形家族&#xff1a; char unsigned char signed char short unsigned short [int] signed short [int] int unsigned int signed int long unsigned long [int] signed…

Day_14 > 指针进阶(3)> bubble函数

目录 1.回顾回调函数 2.写一个bubble_sort函数 2.1认识一下qsort函数 ​编辑2.2写bubble_sort函数 今天我们继续深入学习指针 1.回顾回调函数 我们回顾一下之前学过的回调函数 回调函数就是一个通过函数指针调用的函数 如果你把函数的指针&#xff08;地址&#xff09;…

数据可视化大屏模板 | 保姆级使用教程

近来很多朋友私信咨询怎么下载使用数据可视化大屏模板&#xff0c;在这里就给大家做一个相对简单的教程总结。有需要的朋友记得先收藏保存&#xff0c;以便不时之需。 数据可视化大屏制作软件&#xff1a;奥威BI系统 数据可视化报表模板板块&#xff1a;模板秀 主要操作&…

Unity下如何实现RTMP或RTSP播放端录像?

好多开发者问我们&#xff0c;Unity环境下&#xff0c;除了RTSP或RTMP的播放&#xff0c;如果有录像诉求&#xff0c;怎么实现&#xff1f;实际上录像相对播放来说&#xff0c;更简单一些&#xff0c;因为不涉及到绘制&#xff0c;只要拉流下来数据&#xff0c;直接写mp4文件就…