uinapp微信小程序隐私政策授权

🚀 隐私弹窗效果图:

在这里插入图片描述

1、启用隐私相关功能在manifest.json文件中配置 usePrivacyCheck: true
"mp-weixin" : {"__usePrivacyCheck__" : true,
},
2、创建组件
<template><view><!-- 隐私政策弹窗 --><uni-popup ref="popup"><view class="popup-wrap"><view class="pop-title">用户隐私保护提示</view><view class="popup-txt">感谢您使用本小程序,在使用前您应当阅读井同意<text class="blue-color" @click="handleOpenPrivacyContract">{{privacyContractName}}</text>,当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用小程序相关功能。</view><view class="popup-bot"><button id="disagree-btn" type="default" @click="handleDisagree">不同意</button><button id="agree-btn" type="primary" open-type="agreePrivacyAuthorization"@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button></view></view></uni-popup></view>
</template><script>export default {name: "privacyPopup",data() {return {privacyContractName: "" //协议名称};},mounted() {this.checkPrivacy()},methods: {// 判断是否授权协议checkPrivacy() {return new Promise((resolve,reject) => {uni.getPrivacySetting({success: res => {if (res.needAuthorization) {this.privacyContractName = res.privacyContractName;this.$refs.popup.open('center')} else {resolve(res)}},fail: (err) => {reject(err)}})})},// 关闭协议handleDisagree(e) {this.$refs.popup.close()},handleAgreePrivacyAuthorization(res) {// 用户同意隐私协议事件回调// 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了this.$refs.popup.close()//通知父组件this.$emit("agreePrivacy")},handleOpenPrivacyContract() {// 打开隐私协议页面uni.openPrivacyContract({success: () => {}, // 打开成功fail: () => {}, // 打开失败complete: (res) => {console.log(res, "openPrivacyContract complete");}})},}}
</script><style lang="scss" scoped>.popup-wrap {width: 540upx;box-sizing: border-box;padding: 42upx;background: white;border-radius: 30upx;.pop-title {text-align: center;font-size: 31upx;color: #000;font-weight: bold;margin-bottom: 20upx;}.blue-color {color: rgba(39, 152, 240, 1);}.popup-txt {line-height: 48upx;font-size: 28upx;}.popup-bot {display: flex;justify-content: space-between;align-items: center;margin-top: 30upx;>button {color: #FFF;font-size: 26rpx;font-weight: 500;line-height: 80rpx;width: 46%;text-align: center;height: 80rpx;border-radius: 16rpx;border: none;background: #07c160;}>button:nth-of-type(1){color: #07c160;background: #f2f2f2;}}}
</style>
3、组件使用
<privacyPopup @agreePrivacy="执行同意协议后的逻辑"></privacyPopup>

🚀 扩展:

因小程序中各个地方都会涉及到授权问题,依次引入组件过繁琐
1、可以将组件放置App.vue页面
2、通过vuex进入监听全局是否需要弹窗授权,可利用vux state变量进行触发
3、写一个公共方法判断是否授权协议去设置vuex即可

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

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

相关文章

IT开发怕失败?买个低代码搭建属于自己应用

目录 一、驱动低代码流行的主要几个特性 01、低代码缩短了开发时间 02、低代码允许平滑协作 03、低代码在云端和本地都可运行 二、低代码究竟好不好用 三、源码全交付的开发平台 01、高性能、高拓展 02、功能丰富&#xff0c;满足通用场景 03、私有化部署 04、部署方式 05、多数…

基于GB28181-2022实现web无插件播放H265视频

目前发布的GB28181-2022增加了对前端设备视频H265编码格式的支持&#xff0c;所以实现国标平台通过浏览器对H265视频流的无插件的解码播放将是未来的趋势。 目前大多的方案都是通过平台端把H265转码为H264&#xff0c;再推送到web前端进行解码播放&#xff0c;这种方式因为需要…

他皮任他皮,我学我的习-我的Java进阶之路!!

他皮任他皮&#xff0c;我学我的习 ——架构师成长之路 IT行业薪资高已成为大家的共识&#xff0c;但你知道哪个岗位薪资在IT行业中也是“高高在上”吗&#xff1f;先来看一项数据直观感受下&#xff01; 根据看准网调研的样本数据来看&#xff0c;架构师在全国的平均月薪为4…

【npm run dev 报错:error:0308010C:digital envelope routines::unsupported】

问题原因&#xff1a; nodejs版本太高&#xff08;nodejs v17版本发布了openSSL3.0对短发和密钥大小增加了更为严格的限制&#xff0c;nodejs v17之前版本没有影响&#xff0c;但之后的版本会出现这个错误&#xff0c;物品的node版本是20.9.0&#xff09; 解决方式&#xff1…

阿里云无影升级2.0 云电脑解决方案时代到来

10月31日&#xff0c;杭州云栖大会上&#xff0c;阿里云宣布无影全新升级2.0&#xff1a;从云电脑到云上解决方案&#xff0c;帮助中小企业更便捷地构建云上办公&#xff0c;并开放无影产品及解决方案能力&#xff0c;为生态合作伙伴提供企业云平台&#xff0c;帮助其打造定制化…

利用Graviton2和S3免费套餐搭建私人网盘

网盘是一种在线存储服务&#xff0c;提供文件存储&#xff0c;访问&#xff0c;备份&#xff0c;贡献等功能&#xff0c;是我们日常中不可或缺的一种服务。很多互联网公司都为个人和企业提供免费的网盘服务。但这些免费服务都有一些限制&#xff0c;比如限制下载速度&#xff0…

k8s调度约束

List-Watch Kubernetes 是通过 List-Watch的机制进行每个组件的协作&#xff0c;保持数据同步的&#xff0c;每个组件之间的设计实现了解耦。 List-Watch机制 工作机制&#xff1a;用户通过 kubectl请求给 APIServer 来建立一个 Pod。APIServer会将Pod相关元信息存入 etcd 中…

[Machine Learning][Part 7]神经网络的基本组成结构

这里我们将探索神经元/单元和层的内部工作原理。特别是,与之前学习的回归/线性模型和逻辑模型进行比较。最后接介绍tensorflow以及如何利用tensorflow来实现这些模型。 神经网络和大脑的神经元工作原理类似&#xff0c;但是比大脑的工作原理要简单的多。大脑中神经元的工作原理…

学习笔记三十三:准入控制

ResourceQuota准入控制器 ResourceQuota准入控制器限制cpu、内存、pod、deployment数量限制存储空间大小 LimitRanger准入控制器在limit名称空间创建pod&#xff0c;不指定资源&#xff0c;看看是否会被limitrange规则自动附加其资源限制创建pod&#xff0c;指定cpu请求是100m&…

java修仙传之海岛奇遇

昨日开会&#xff0c; 商量了一下接口返回数据&#xff0c; 要求统一&#xff0c; 之前也同意&#xff0c;直接抛异常&#xff0c; 现在觉得之前那个异常不好&#xff0c; 看着不美观&#xff0c;对客户不友好 要求重新做。 大概要求如下&#xff1a; 要求1&#xff1a;范…

香港服务器不稳定的几种情况

​  近年来&#xff0c;随着互联网的迅猛发展&#xff0c;香港作为一个重要的网络枢纽地区&#xff0c;扮演着连接中国内地和国际网络的重要角色。一些用户表示在使用香港服务器时可能会遇到不稳定的情况&#xff0c;导致访问困难、加载缓慢甚至无法连接。 为什么香港服务器会…

[SpringCloud | Linux] CentOS7 部署 SpringCloud 微服务

目录 一、环境准备 1、工具准备 2、虚拟机环境 3、Docker 环境 二、项目准备 1、配置各个模块&#xff08;微服务&#xff09;的 Dockerfile 2、配置 docker-compose.yml 文件 3、Maven 打包 4、文件整合并传输 三、微服务部署 1、部署至 Docker 2、访问微服务 四…