uniapp 开发微信小程序之新版隐私协议

news/2025/1/22 19:19:17/

自从微信小程序官方更新隐私协议,用户必须同意之后,才能获取个人信息,这就导致在获取用户信息之前,需要有个隐私协议弹窗

大致如下图:

微信小程序官方提供的API和 uniapp 开发的稍微有点区别,这里只记录 uniapp 开发的,如果需要微信原生的,请自行官网查看。

首先创建一个弹窗组件privacyPopup.vue,代码如下:

<template><uni-popup ref="popup" type="center" :is-mask-click="false"><view class="popup-box"><view class="weui-half-screen-dialog__hd">{{title}}</view><view class="weui-half-screen-dialog__bd"><text class="weui-half-screen-dialog__tips">{{desc1}}</text><text class="weui-half-screen-dialog__tips color-8BC21F" @click="openPrivacyContract">{{urlTitle}}</text><text class="weui-half-screen-dialog__tips">{{desc2}}</text></view><view class="weui-half-screen-dialog__ft"><button class="weui-btn" @click="handleDisagree">拒绝</button><button id="agree-btn" type="default" open-type="agreePrivacyAuthorization" class="weui-btn agree"@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button></view></view></uni-popup>
</template><script>export default {data() {return {title: "用户隐私保护提示",desc1: "感谢您使用本产品,您使用本产品前应当仔细阅读并同意",urlTitle: "《小程序隐私保护指引》",desc2: "当您点击同意并开始使用产品服务时,即表示你已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法更好的体验产品。",};},methods: {openPrivacyContract() {uni.openPrivacyContract({});},handleAgreePrivacyAuthorization() {getApp().globalData.showPrivacy = false;this.$emit('confirm');this.$refs.popup.close();},handleDisagree() {this.$refs.popup.close();}}}
</script><style lang="scss" scoped>.popup-box {width: 80vw;// height: 40vh;overflow: hidden;background: #ffffff;padding: 30rpx;border-radius: 24rpx;.weui-half-screen-dialog__hd {font-size: 48rpx;font-family: Source Han Sans CN-Bold, Source Han Sans CN;font-weight: bold;color: #000000;line-height: 56rpx;}.weui-half-screen-dialog__bd {margin-top: 48rpx;text-indent: 2em;.weui-half-screen-dialog__tips {font-size: 28rpx;font-family: Source Han Sans CN-Normal, Source Han Sans CN;font-weight: 400;color: #000000;line-height: 33rpx;}}.weui-half-screen-dialog__ft {display: flex;justify-content: space-evenly;align-items: center;margin-top: 48rpx;.weui-btn {padding: 0 60rpx;margin: 0;background: none;font-size: 32rpx;font-family: Source Han Sans CN-Normal, Source Han Sans CN;font-weight: 400;color: #000000;line-height: 80rpx;// border: 2rpx solid #8BC21F;}.agree {color: #ffffff;background: linear-gradient(90deg, #8BC21F 0%, #7AB30A 100%);}}.color-8BC21F {color: #8BC21F !important;}}
</style>

到这里有人可能会疑问,你也没有使用this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })相关代码,微信那边如何知道用户同意了?其实在button按钮上有扩展事件open-type="agreePrivacyAuthorization" 点击后, 微信那边会有记录的。

然后在 App.vue 文件中添加全局变量,这里使用uni.getPrivacySetting(亲测有用)微信新增的几个隐私api,uniapp也是支持的,放心使用:

export default {globalData: {showPrivacy: false},onLaunch: function(options) {if (uni.getPrivacySetting) {uni.getPrivacySetting({success: res => {console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)if (res.needAuthorization) {getApp().globalData.showPrivacy = true;} else {getApp().globalData.showPrivacy = false;}},fail: () => {},complete: () => {},})}},}

使用阶段,因为我这里是获取手机号登录的,这个时候就会出现一个问题,隐私弹窗和获取手机号弹窗冲突,目前是通过判断,操作不同的按钮(如果有好的方案,欢迎评论区告知)。

<template><view class="page"><button v-if="showPrivacy" class="btn" @click="getPrivacy">手机号快捷登录</button><button v-else class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号快捷登录</button><privacy-popup ref="privacyPopup" @confirm="confirm"></privacy-popup></view>
</template><script>import PrivacyPopup from "@/components/privacyPopup/index.vue";export default {components: {PrivacyPopup},data() {return {showPrivacy: getApp().globalData.showPrivacy,}},onLoad(options) {},methods: {confirm() {this.showPrivacy = false;},getPrivacy() {if (getApp().globalData.showPrivacy) {this.$refs.privacyPopup.$refs.popup.open();return;}},// 获取手机号onGetPhoneNumber(e) {// 用户拒绝授权if (e.detail.errMsg == "getPhoneNumber:fail:user deny") {uni.showToast({icon: 'none',title: '用户拒绝'});} else if (e.detail.code) { // 允许授权this.loginWeiXin(e.detail.code);}},}}
</script>

最后比较重要的一点,需要在app.json添加:"__usePrivacyCheck__": true,基础库:3.0.0

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

相关文章

【业务功能篇80】Springboot项目 maven配置仓库镜像settings文件分析

项目中我们需要依赖许多包&#xff0c;那么就涉及到maven配置文件&#xff0c;我们需要配置settings.xml文件&#xff0c;这里面会配置我们的本地仓库localRepository &#xff0c;远程仓库&#xff1a;仓库会有我们的依赖仓库repository和插件依赖仓库pluginRepository&#x…

【Spring Boot】SpringBoot实现社交网站用户主页的IP归属地显示功能代码

下面是一个简单的Spring Boot用户主页IP归属地显示功能的代码示例&#xff1a; 首先需要引入依赖&#xff1a; <dependency><groupId>com.maxmind.geoip2</groupId><artifactId>geoip2</artifactId><version>2.7.0</version> </…

Nmap扫描工具:详解每个关键参数的用途和意义

Nmap端口扫描 Nmap端口扫描目标规范&#xff1a;-iL 从一个文件中扫描主机列表--exclude 排除一些远程主机后再扫描--excludefile 排除文件中的列表 端口扫描状态&#xff1a;open(开放的)closed(关闭的)filtered(被过滤的)unfiltered(未被过滤的)open|filtered(开放或者被过滤…

python替换—Series.replace()与Series.str.replace()的区别及为何replace()无效的解决方法

文章目录 前言一、Series.replace()方法二、Series.str.replace()方法三、replace()与str.replace() 使用方法的区别四、常见的坑&#xff1a;python中replace方法不起作用 前言 在Pandas中&#xff0c;Series是一个由一维数组表示的DataFrame列&#xff0c;而replace和str.re…

Linux学习之NFS服务

《Linux 环境下 NFS 服务安装及配置使用》是一篇参考博客。 /etc/exports是NFS服务的配置文件&#xff0c;文件中的内容格式为&#xff1a; 共享目录的路径 允许访问的NFS客户端(共享权限参数1,共享权限参数2,共享权限参数3...)共享权限参数罗列如下&#xff1a; 参数作用ro只…

我裸辞去面试大公司python岗位了!

最近换工作了&#xff0c;坐标上海&#xff0c;裸辞&#xff0c;之前早有前辈们说过&#xff0c;“裸辞一时爽,一直裸辞一直爽”&#xff0c;这话一点不假&#xff0c;裸辞你要面临没有收入来源&#xff0c;但是每天眼睁睁看着各种花销不断支出的煎熬&#xff0c;我主要是觉得一…

深入解析:树结构及其应用

文章目录 学习树的基本概念理解树的遍历方式学习堆和优先队列的应用案例分析&#xff1a;使用堆进行Top K元素的查找结论 &#x1f389;欢迎来到数据结构学习专栏~深入解析&#xff1a;树结构及其应用 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈…

UltralSO软碟通制作Linux系统盘

第一步&#xff1a; 下载镜像 阿里云下载地址&#xff1a;https://mirrors.aliyun.com/centos-vault/ 按照需求选择系统版本&#xff0c;我这要求安装CentOS7.5的系统&#xff0c;我以CentOS7.5为例 第二步&#xff1a; 下载UltralSO软件 官网下载地址&#xff1a;https://cn.…