小程序隐私保护授权处理方式之弹窗组件

news2024/12/23 11:09:13

欢迎点击关注-前端面试进阶指南：前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久的🪜

小程序隐私保护授权弹窗组件

调用wx.getUserProfile进行授权时，返回错误信息：{errMsg: “getUserProfile:fail api scope is not declared in the privacy agreement”, errno: 112} 是因为微信小程序登录，增加了用户是否查看隐私协议的验证，不跳转到隐私协议，就不让用户登录。

微信 2023 年 8 月 10 日发布 关于小程序隐私保护指引设置的公告，9 月 15 日起所有隐私接口需用户点击同意并同步给微信之后才可以使用。

当前组件做了隐私保护指引弹窗界面，直接引用，需要授权时展示弹窗，当用户点击“拒绝”直接退出小程序，点击“同意”同步结果给微信且以后不再弹窗，之后可以正常使用隐私接口。

8 月 28 更新：今天才发现小程序可以使用页面的生命周期，对其进行了简化，只需要使用引入组件即可，不再需要任何其它代码

8 月 29 更新：采纳网页 Liu 的方案，解决多个 tabbar 情况下同意之后还有弹窗的问题

注意事项
  1. 2023 年 9 月 15 号之前，默认不会启用隐私相关功能，所以检测不到需要弹窗的情况，可以在 app.json 中配置 "__usePrivacyCheck__": true 之后，接口才可以检测到是否需要弹窗。个人实际情况：我在开发者工具中配置了 "__usePrivacyCheck__": true ，needAuthorization 无论如何返回的都是 false，但在真机模拟的情况下可以返回 true
  2. 自动打开隐私保护指引界面需在「小程序管理后台」配置《小程序用户隐私保护指引》，官方用户隐私保护指引填写说明。
效果

在这里插入图片描述

使用方法

  1. 拷贝 component 文件夹中的 privacy 文件夹到小程序项目中的组件目录

  2. 在 page.json 中引入组件

{
  "usingComponents": {
    "Privacy": "/component/privacy/privacy"
  }
}
  1. 在 page.wxml 中使用组件
<Privacy />
  1. 可以在所有使用了隐私接口的页面都加上该组件，授权一次之后使用所有隐私接口不再需要授权
取消授权

微信中「微信下拉-最近-最近使用的小程序」中删除小程序可取消授权。
开发者工具中「清除模拟器缓存-清除授权数据」可取消授权。

相关链接

官方：小程序隐私协议开发指南

代码模块

1、技术：taro + vue3 + ts
2、创建component组件Privacy文件，在需要授权的页面添加<Privacy />就阔以

  1. wxml 原生微信写法
// 1. 微信wxml的写法
// component/privacy/privacy.wxml
<view class="privacy" wx:if="{{showPrivacy}}">
    <view class="content">
        <view class="title">隐私保护指引</view>
        <view class="des">
            在使用当前小程序服务之前，请仔细阅读<text class="link" bind:tap="openPrivacyContract">{{privacyContractName}}</text>。如你同意{{privacyContractName}}，请点击“同意”开始使用。
        </view>
        <view class="btns">
            <button class="item reject" bind:tap="exitMiniProgram">拒绝</button>
            <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view>
    </view>
</view>

// 2、js 文件
// component/privacy/privacy.js
Component({
    /**
     * 组件的初始数据
     */
    data: {
        privacyContractName: '',
        showPrivacy: false
    },
    /**
     * 组件的生命周期
     */
    pageLifetimes: {
        show() {
            const _ = this
            wx.getPrivacySetting({
                success(res) {
                    if (res.errMsg == "getPrivacySetting:ok") {
                        _.setData({
                            privacyContractName: res.privacyContractName,
                            showPrivacy: res.needAuthorization
                        })
                    }
                }
            })
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 打开隐私协议页面
        openPrivacyContract() {
            const _ = this
            wx.openPrivacyContract({
                fail: () => {
                    wx.showToast({
                        title: '遇到错误',
                        icon: 'error'
                    })
                }
            })
        },
        // 拒绝隐私协议
        exitMiniProgram() {
            // 直接退出小程序
            wx.exitMiniProgram()
        },
        // 同意隐私协议
        handleAgreePrivacyAuthorization() {
            const _ = this
            _.setData({
                showPrivacy: false
            })
        },
    },
})

// 3、样式
/* component/privacy/privacy.wxss */
.privacy {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    width: 632rpx;
    padding: 48rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16rpx;
}

.content .title {
    text-align: center;
    color: #333;
    font-weight: bold;
    font-size: 32rpx;
}

.content .des {
    font-size: 26rpx;
    color: #666;
    margin-top: 40rpx;
    text-align: justify;
    line-height: 1.6;
}

.content .des .link {
    color: #07c160;
    text-decoration: underline;
}

.btns {
    margin-top: 48rpx;
    display: flex;
}

.btns .item {
    justify-content: space-between;
    width: 244rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    box-sizing: border-box;
    border: none;
}

.btns .reject {
    background: #f4f4f5;
    color: #909399;
}

.btns .agree {
    background: #07c160;
    color: #fff;
}
  1. taro框架vue版写法
// #### taro框架的写法
<template>
  <view class="privacy_box" v-if="showPrivacy">
    <view class="content">
      <view class="title">隐私保护指引</view>
      <view class="des">
        在使用当前小程序服务之前，请仔细阅读
        <text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>
        。如你同意{{ privacyContractName }}，请点击“同意”开始使用。
      </view>
      <view class="btns">
        <button class="item reject" @click="exitMiniProgram">拒绝</button>
        <button
          id="agree-btn"
          class="item agree"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
        >
          同意
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";

const showPrivacy = ref<boolean>(false);

const privacyContractName = ref<string>("");

// 打开隐私协议页面
const openPrivacyContract = () => {
  Taro.openPrivacyContract({
    fail: () => {
      Taro.showToast({
        title: "遇到错误",
        icon: "error",
      });
    },
  });
};

// 拒绝隐私协议
const exitMiniProgram = () => {
  Taro.exitMiniProgram();
};

// 同意隐私协议
const handleAgreePrivacyAuthorization = () => {
  showPrivacy.value = false;
};

useDidShow(() => {
  Taro.getPrivacySetting({
    success(res) {
      if (res.errMsg == "getPrivacySetting:ok") {
        privacyContractName.value = res.privacyContractName;
        showPrivacy.value = res.needAuthorization;
      }
    },
  });
});
</script>

<style lang="scss">
.privacy_box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 632rpx;
    padding: 48rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16rpx;
  }

  .content .title {
    text-align: center;
    color: #333;
    font-weight: bold;
    font-size: 32rpx;
  }

  .content .des {
    font-size: 26rpx;
    color: #666;
    margin-top: 40rpx;
    text-align: justify;
    line-height: 1.6;
  }

  .content .des .link {
    color: #07c160;
    text-decoration: underline;
  }

  .btns {
    margin-top: 48rpx;
    display: flex;
  }

  .btns .item {
    justify-content: space-between;
    width: 244rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    box-sizing: border-box;
    border: none;
  }

  .btns .item::after {
 	border: 0;
  }

  .btns .reject {
    background: #f4f4f5;
    color: #909399;
  }

  .btns .agree {
    background: #07c160;
    color: #fff;
  }
}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

nvm和volta对node版本控制的区别

nvm和volta对node版本控制的区别

前言——我们做前端开发的都会需要node.js环境&#xff0c;我们直接安装指定的版本可以么&#xff1f;可以&#xff0c;只不过在需要换版本的时候还得卸载重新装。那有工具可以帮助我们不用卸载就更改node版本么&#xff1f;有啊&#xff0c;nvm就可以。那又有没有什么工具不用…
阅读更多...
高忆管理：沪指震荡微涨，半导体板块走强，卫星导航概念拉升

高忆管理：沪指震荡微涨，半导体板块走强，卫星导航概念拉升

30日早盘&#xff0c;A股两市维持震动格式。到午间收盘&#xff0c;沪指涨0.06%报3137.72点&#xff0c;深成指涨0.33%&#xff0c;创业板指涨0.12%&#xff0c;两市合计成交6424亿元。北向资金净流出8.82亿元。盘面上&#xff0c;半导体、纺织机械、元器件、通信设备、软件服务…
阅读更多...
1.网络空间搜素引擎

1.网络空间搜素引擎

网络空间搜素引擎 地址 &#xff1a;shodan.io 简介 &#xff1a; 这句话还是有点东西得 。 区别&#xff1a; 平常得搜素引擎主要搜网页&#xff0c;shadan可以搜所以带有ip地址的设备。使用 &#xff1a; 1.提供官方api 2.可以去淘宝15元买个初级会员 3.过滤器查看官方…
阅读更多...
C# Dapper 操作Oracle数据库

C# Dapper 操作Oracle数据库

nuget安装内容 1.配置连接字符串 OracleConnectionString这个可用 {"Logging": {"LogLevel": {"Default": "Information","Microsoft.AspNetCore": "Warning"}},"AllowedHosts": "*","…
阅读更多...
多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比

多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 目录 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实现GRU-Adaboost和GRU多变量时间序列预测对比 模型描述 M…
阅读更多...
基于Googlenet深度学习网络的螺丝瑕疵检测matlab仿真

基于Googlenet深度学习网络的螺丝瑕疵检测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ....................................................................................% 获…
阅读更多...
python爬虫关于ip代理池的获取和随机生成

python爬虫关于ip代理池的获取和随机生成

前言 在进行爬虫开发时&#xff0c;代理IP池是一个非常重要的概念。代理IP池是指一个包含多个可用代理IP的集合&#xff0c;这些代理IP可以用来绕过网站的防爬虫策略&#xff0c;从而提高爬取数据的成功率。 在本文中&#xff0c;我们将介绍如何获取代理IP池&#xff0c;并且随…
阅读更多...
统一使用某一个包管理工具，比如yarn pnpm

统一使用某一个包管理工具，比如yarn pnpm

原因&#xff1a;前端每个人的习性不一样&#xff0c;有人用npm 有人用yarn等包管理工具&#xff0c;混合下载插件容易出bug&#xff0c;就用个小工具锁住就行了&#xff0c;只能使用yarn或者pnpm反向下载依赖和下载插件。不然就报错 1.在项目主目录下创建preinstall.js // 如…
阅读更多...
直播预告！生鲜与零售商品识别系统产业实践与部署详解

直播预告！生鲜与零售商品识别系统产业实践与部署详解

生鲜零售作为民生消费的重要一环&#xff0c;在促进行业新消费升级的进程中有着至关重要的作用。在超市等无人零售场景中&#xff0c;目前结算方式主要有以下几种&#xff1a; 但是以上几种方法存在如下缺点&#xff1a; 条形码方式&#xff1a;对于成品包装的商品较为成熟&…
阅读更多...
MindSponge分子动力学模拟——软件架构（2023.08）

MindSponge分子动力学模拟——软件架构（2023.08）

技术背景 在前面一篇文章中&#xff0c;我们介绍了MindSponge的两种不同的安装与使用方法&#xff0c;让大家能够上手使用。这篇文章主要讲解MindSponge的软件架构&#xff0c;并且协同mindscience仓库讲解一下二者的区别。 整体架构 首先我们来了解一下MindSponge独立仓库的软…
阅读更多...
day28 异常

day28 异常

to{}catch{} try{}catch{}的流传输 try {fis new FileInputStream("file-APP\\fos.txt");fos new FileOutputStream("fos.txt");int a ;while ((a fis.read())! -1){fos.write(a);}System.out.println(a); } catch (IOException e) {e.printStackTrace()…
阅读更多...
ECharts图表动态修改series显示隐藏

ECharts图表动态修改series显示隐藏

文章目录 1、前言2、思路3、实现 1、前言 最近做的大数据平台&#xff0c;里面很多部分用到了ECharts&#xff0c;其中有个功能&#xff0c;要求将图表分组&#xff0c;根据用户选择的组&#xff0c;来确定ECharts要显示那些线条和柱子&#xff0c;也就是动态的显示option.seri…
阅读更多...
习题练习 C语言（暑期第三弹）

习题练习 C语言（暑期第三弹）

自我小提升&#xff01; 前言一、存储地址二、逗号表达式三、除自身以外数组的乘积四、字节与二进制五、符号计算六、不用加减乘除做加法七、unsigned判断八、移位计算九、sizeof宏十、移位计算十一、移位计算十二、优先级判断十三、单词倒排总结 前言 重要的事说三遍&#xf…
阅读更多...
仓储24代电子标签操作指导

仓储24代电子标签操作指导

服务器使用 服务器环境需求 数据库&#xff1a;Mysql5.7 Java环境&#xff1a;jdk1.8 软件容器&#xff1a; Tomcat8.5/9.0 软件部署步骤 mysql5.7, 创建db_wms数据库并导入原始数据库文件 安装jdk1.8, 配置java环境变量 下载tomca8.0, 部署wms.war到tomcat, 并启动tomc…
阅读更多...
一体化智能可观测平台助力车企数智化转型

一体化智能可观测平台助力车企数智化转型

8月24日&#xff0c;博睿数据主办的《"车程ONE里&#xff0c;万事大吉" - 可观测性在汽车行业的应用与发展网络分享会》开播&#xff0c;邀请了博睿数据全国汽车行业负责人吴伟硕和博睿数据资深技术专家向涛做客直播间&#xff0c;分享汽车企业数字化转型的故事&…
阅读更多...
恒运资本：华为Mate 60 Pro突然发售拉动半导体股，中芯国际等开盘涨超5%

恒运资本：华为Mate 60 Pro突然发售拉动半导体股，中芯国际等开盘涨超5%

8月30日&#xff0c;受华为突然发售Mate 60 Pro手机影响&#xff0c;A股开盘后半导体板块迅速拉升&#xff0c;伟测科技、美芯晟涨超10%&#xff0c;利扬芯片、唯捷创芯、芯动联科、中芯世界、华虹公司等涨超5%。 恒运资本平台&#xff08;百度搜索恒运资本&#xff09;是深圳…
阅读更多...
QT生成可执行文件

QT生成可执行文件

有时候为方便在没有QT电脑上执行程序&#xff0c;需要生成可执行文件 1.在计算机任意英文路径下新建一个文件夹。本文在F:\QTproject\hisiupdate下创建了test文件夹。将QT工程运行Release生成的build-update-MinGW-Release文件夹下Release下.exe文件拷贝到新建的test文件夹下。…
阅读更多...
【数据结构-链表-01】反转链表

【数据结构-链表-01】反转链表

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…
阅读更多...
基于swing的图书管理系统java书店信息 jsp源代码Mysql

基于swing的图书管理系统java书店信息 jsp源代码Mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的图书管理系统 系统有1权限:管理员 二、主…
阅读更多...
Ansible学习笔记6

Ansible学习笔记6

stat模块&#xff1a;获取文件的状态信息&#xff0c;类似Linux的stat状态。 获取/etc/fstab文件的状态。 [rootlocalhost tmp]# ansible group1 -m stat -a "path/etc/fstab" 192.168.17.106 | SUCCESS > {"ansible_facts": {"discovered_inter…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023