Taro-vue微信小程序用户隐私保护

Taro-vue微信小程序用户隐私保护

一、在 微信公众平台的【设置】- 【服务内容与声明】 ,设置用户隐私保护指引,添加项目需要的接口权限。

【用户隐私保护指引】提交之后,官方会进行审核。审核通过之后,对应的接口权限才会生效。
在这里插入图片描述
在这里插入图片描述

二、微信小程序官方公告《关于小程序隐私保护指引设置的公告》。不处理的话,会导致很多授权无法使用,比如头像昵称、获取手机号、位置、访问相册、上传图片视频、访问剪切板内容等等,具体详见《小程序用户隐私保护指引内容介绍》 。

三、 在app.config.js中加入

usePrivacyCheck”: true

在这里插入图片描述

四、设置微信开发者工具的调试基础库,最低2.33.0

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7a30433446c44831b2beb5bad47f720d.png

五、验证用户是否已经授权隐私协议

使用wx.requirePrivacyAuthorize() ,验证用户之前已经同意过隐私授权


onReady() {var that= this;// 隐私政策wx.getPrivacySetting({success: res => {// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }console.log(res)if (res.needAuthorization) {// 需要弹出隐私协议that.$refs.privacy.privacyShow = true;return;} else {// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用隐私接口}},fail: () => {},complete:() => {}})
}

在这里插入图片描述

如果needAuthorization返回值为true,则需要用户进行隐私授权。

六、index引入组件

<template><view><!-- 用户隐私保护指引弹窗租金 --><UserPrivacy ref="privacy"></UserPrivacy></view>
</template><script>
import UserPrivacy from "@/components/user/userPrivacy.vue";export default {components: {UserPrivacy},data() {return {// 隐私设置弹窗开关privacyShow: false,}},onReady() {var _this = this;// #ifdef MP-WEIXIN// 隐私政策wx.getPrivacySetting({success: res => {// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }console.log(res)if (res.needAuthorization) {// 显示用户隐私组件弹窗_this.$refs.privacy.privacyShow = true;return;} else {// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用隐私接口// 调用授权位置接口_this.getLocation();}},fail: () => {},complete:() => {}})// #endif,methods: {// 获取当前位置getLocation() {let that= this;var mapkey = Taro.getStorageSync('webConfig').web_config_str.mapkey;Taro.getFuzzyLocation({type: 'gcj02', //国测局坐标gcj02geocode: true, //是否解析地址信息,仅App平台支持isHighAccuracy: true, //开启高精度定位success(res) {console.log('==获取当前位置的经纬度-成功==');console.log(res);that.longitude = res.longitude;that.latitude = res.latitude;// 设置经纬度缓存Taro.setStorageSync('lng', res.longitude);Taro.setStorageSync('lat', res.latitude);// 引入腾讯地图SDK核心类var QQMapWX = require('@/util/qqmap-wx-jssdk.min.js');var qqmapsdk = new QQMapWX({key: mapkey,});// 根据经纬度获取所在位置qqmapsdk.reverseGeocoder({location: {longitude: res.longitude,latitude: res.latitude,},success: function(res) {console.log('565',"根据经纬度获取所在位置");that.city = res.result.ad_info.city;// 设置缓存城市Taro.setStorageSync('province', res.result.ad_info.province);Taro.setStorageSync('city', res.result.ad_info.city);Taro.setStorageSync('district', res.result.ad_info.district);Taro.setStorageSync('address', res.result.address);}});},fail(err) {console.log('获取当前位置的经纬度-失败');// 设置默认城市、经纬度}});},}
}
</script>

七、弹框组件页面

<template><view><!-- 隐私保护指引弹窗 --><u-popup v-model="privacyShow" mode="center" width="600px" border-radius="20" :mask-close-able="false"><view class="privacyBox"><view class="privacyTit">用户隐私保护提示</view><view class="privacyDesc">感谢您的使用,在使用本小程序前,应当阅读并同意<text@click="openClick">《用户隐私保护指引》</text>。当您点击同意并开始使用程序服务时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入小程序。</view><view class="privacyPost"><view class="refuseBtn"><navigator target="miniProgram" open-type="exit">不同意并退出</navigator></view><button class="agreeBtn" open-type="agreePrivacyAuthorization"@agreeprivacyauthorization="agreeClick">同意并继续</button></view></view></u-popup></view>
</template><script>export default {data() {return {// 隐私设置弹窗开关privacyShow: false,}},onReady() {},methods: {// 打开隐私协议openClick() {wx.openPrivacyContract({success: () => {}, // 打开成功fail: () => {}, // 打开失败complete: () => {}})},// 同意授权agreeClick() {// 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了this.privacyShow = false;// 重新授权定位,调取父组件方法this.$parent.getLocation();},}}
</script>
<style lang="scss" scoped>.privacyBox {width: 600px;padding: 60px;box-sizing: border-box;}.privacyTit {font-size: 32px;font-weight: bold;color: red;text-align: center;overflow: hidden;}.privacyDesc {font-size: 28px;color: red;overflow: hidden;margin-top: 30px;}.privacyDesc text {color: red;}.privacyPost {overflow: hidden;margin-top: 60px;display: flex;justify-content: center;align-items: center;}.privacyPost .refuseBtn {flex: 1;height: 80px;line-height: 80px;text-align: center;font-size: 28px;font-weight: bold;color: #fff;background: red;border-radius: 40px;box-sizing: border-box;overflow: hidden;}.privacyPost .agreeBtn {flex: 1;height: 80px;line-height: 80px;text-align: center;font-size: 28px;font-weight: bold;color: #fff;background: red;border-radius: 40px;box-sizing: border-box;overflow: hidden;margin-left: 20px;}
</style>

弹窗组件页面底层遮罩样式,需要自己用view代替。

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

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

相关文章

区块链安全应用----压力测试

通过Caliper进行压力测试程序 1.环境配置 第一步. 配置基本环境 部署Caliper的计算机需要有外网权限&#xff1b;操作系统版本需要满足以下要求&#xff1a;Ubuntu > 16.04、CentOS > 7或MacOS > 10.14&#xff1b;部署Caliper的计算机需要安装有以下软件&#xff…

【C语言回顾】函数

前言1. 函数的概念和分类2.库函数3. 自定义函数3.1 自定义函数的简单介绍3.2 自定义函数举例 4. 形参和实参4.1 形参4.2 实参4.3 形参和实参的关系4.3.1 理解4.3.2 举例代码和调试 5. 嵌套函数和链式访问5.1 嵌套函数5.2 链式访问 6. 函数的声明和定义6.1 单个文件6.2 多个文件…

Pandas连接MySQL数据库

pandas是一个强大的Python工具包&#xff0c;能够快速帮助我们做很多数据处理。但是在利用pandas连接数据库时&#xff0c;也会遇到很多问题&#xff0c;在此我总结了一个相对较为简单的连接范式&#xff0c;供大家参考学习。 先上代码&#xff1a; import pandas as pd# 数据…

ChatGPT在遥感领域中的应用

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本课程重点介绍ChatGPT在遥感中的应用&#xff0c;人工智…

中文编程入门(Lua5.4.6中文版)第十三章 Lua 文件操作

在《Lua世界》的冒险旅途中&#xff0c;勇士们时常需要与神秘的文本卷轴打交道。为了更好地掌握这些知识宝藏&#xff0c;Lua I/O库提供了两种强大的探索模式&#xff1a;简单模式和完全模式&#xff0c;助你轻松应对各类文献挑战。 简单模式&#xff1a;初识卷轴 简单模式如…

C# aspose word实现模板方式打印及打印速度慢解决方法

1.引用dll nuget或者网上都有下载的方式。不过都要收费。下载地址&#xff1a;https://files.cnblogs.com/files/rolayblog/Tool.zip?t1713322422&downloadtrue 2.打印模板设计 新建一个doc文档&#xff0c;根据自己的需求画页面。 A、普通文本 在word中需要替换值的地方添…

《2024最新Java面试题及答案(带完整目录)》

获取链接&#xff1a;《2024最新Java面试题及答案&#xff08;带完整目录&#xff09;》 更多技术书籍&#xff1a;技术书籍分享&#xff0c;前端、后端、大数据、AI、人工智能... ​ ​ ​ 4.1.9.8. 可重入锁&#xff08;递归锁&#xff09; ...........................…

Oracle11.2.0.1,(CVE-2012-1675)漏洞解决方案

1.进入容器停止监听 docker exec -it -u 0 oracle11g bash su - oracle lsnrctl stop listener2.找到监听配置文件位置&#xff0c;修改监听文件 echo $ORACLE_HOMEvi network/admin/listener.ora #在文件底部添加 SECURE_REGISTER_LISTENER (IPC) #启动监听 lsnrctl start …

基于springboot+vue+Mysql的汽车租赁系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

idea运行报错:启动命令过长

JAVA项目&#xff0c;运行的时候报错 Command line is too long. Shorten the command line via JAR manifest or via a classpath file and rerun老问题了&#xff0c;记录一下 解决办法&#xff1a; 1、Edit Configurations 2、点击Modify options设置&#xff0c;勾选S…

PlistEdit Pro for Mac激活版:强大的Plist文件编辑工具

PlistEdit Pro for Mac是一款专为Mac用户设计的强大Plist文件编辑工具。Plist文件是苹果公司开发的一种XML文件格式&#xff0c;用于存储应用程序的配置信息和数据。这款软件为用户提供了直观、易用的界面&#xff0c;使编辑和管理Plist文件变得轻松简单。 PlistEdit Pro for M…

C++设计模式|创建型 3.抽象工厂模式

在上一篇文章中介绍了工厂模式&#xff0c;每个具体工厂负责生产一个专门的产品&#xff0c;其代码扩展性很好&#xff0c;这篇文章将介绍抽象工厂模式。 1.为什么要使用抽象工厂模式&#xff1f; 既然已经有了“工厂模式”&#xff0c;那为什么还会有抽象工厂模式呢&#xf…

ubuntu常用方法

文本文件的创建&#xff1a; sudo touch ubuntu.txt move clock: sudo chmod 777 ubuntu.txt 安装chrome wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo apt install ./google-chrome-stable_current_amd64.deb .sh 文件的安装 例…

生成人工智能体:人类行为的交互式模拟论文与源码架构解析(1)——场景故事介绍

生成NPC为交互应用程序创建逼真的人类行为模拟。在这项工作中&#xff0c;我们通过将二十五个NPC放置在一个沙盒环境中&#xff08;类似于The Sims&#xff0c;模拟人生&#xff09;&#xff0c;展示了生成NPC的能力。用户可以观察和干预NPC的日常计划、分享新闻、建立关系以及…

web配置https

Tomcat8 配置&#xff1a; 1.单向认证&#xff0c;就是传输的数据加密过了&#xff0c;但是不会校验客户端的来源 2.双向认证&#xff0c;如果客户端浏览器没有导入客户端证书&#xff0c;是访问不了web系统的&#xff0c;找不到地址 如果只是加密&#xff0c;我感觉单向就行…

就业班 第三阶段(ansible) 2401--4.16 day2 ansible2 剧本+角色

六、Ansible playbook 简介 playbook 是 ansible 用于配置&#xff0c;部署&#xff0c;和管理被控节点的剧本。   通过 playbook 的详细描述&#xff0c;执行其中的一系列 tasks &#xff0c;可以让远端主机达到预期的状态。playbook 就像 Ansible 控制器给被控节点列出的的…

人工智能电话机器人常见的问题有哪些?

随着业务的不断拓展&#xff0c;电销业务量也不断攀升。公司为了控制用人成本&#xff0c;电销人员数量有限&#xff0c;而且培训上岗周期慢&#xff0c;这就导致成交率、销售额无法完成&#xff0c;电话机器人的出现&#xff0c;有效的解决了这些痛点&#xff0c;只需电销人员…

广东海洋大学成功部署(泰迪智能科技)大数据人工智能实验室建设

广东海洋大学简称广东海大&#xff0c;坐落于广东省湛江市&#xff0c;是国家海洋局与广东省人民政府共建的省属重点建设大学、广东省高水平大学重点学科建设高校、粤港澳高校联盟成员 &#xff0c;入选卓越农林人才教育培养计划&#xff0c;是教育部本科教学水平评估优秀院校。…

odoo添加自定义网页---添加模块图标

1.新建一个模块 python odoo-bin scaffold test_web <路径> 2.我们需要修改一下几个文件 3.web.xml <?xml version"1.0" encoding"UTF-8"?> <templates id"template" xml:space"preserve"><t t-name"T…

uniapp封装websocket以及心跳检测、重连

websocket 封装 在所需文件夹下建立websocketUtils.js文件&#xff0c;封装代码如下&#xff1a; class websocketUtils {constructor(openId, time) {this.url wss://**** //ws地址 拼接一下 此处用的是openIdthis.data nullthis.isOpenSocket false //避免重复连接this.…