微信小程序新版隐私协议弹窗实现最新版

news2024/10/6 14:35:38

1. 微信小程序又双叒叕更新了

2023.08.22更新:

以下指南中涉及的 getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 等接口目前可以正常接入调试。调试说明:

  1. 在 2023年9月15号之前,在 app.json 中配置 __usePrivacyCheck__: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。
  2. 在 2023年9月15号之后,不论 app.json 中是否有配置 __usePrivacyCheck__,隐私相关功能都会启用。

2. 实现思路

  1. 初始化进入小程序时先检测用户是否已经授权了隐私协议。如果没有授权,就弹出用户授权隐私协议的弹窗
  2. 用户点击确认授权,即可正常使用小程序
  3. 用户如果取消授权,当用户点击需要授权的功能,比如获取手机号的按钮,开启蓝牙的按钮等待涉及用户隐私的功能,就重新弹窗,让用户确认授权后,才能使用对应的功能。否则只能浏览页面,无法使用小程序的功能。

3. 实现效果

用户初始化进入小程序时,弹出授权窗口,用户点击登录按钮时,如果未授权也弹出此窗口

在这里插入图片描述

4. 代码实现

<template>
  <view class="login-page">
<!--    当用户点击授权同意隐私协议后才可以正常点击登录按钮获取手机号码-->
    <button open-type="getPhoneNumber" @getphonenumber="authPhone" v-if="ysxy.agree">
      <u-icon name="fingerprint" color="#2979ff" size="68"></u-icon>
    </button>
    <!--    当用户未授权同意意思协议时,打开授权隐私协议的弹窗,否则无法登录系统-->
    <button v-else @click="ysxy.show = true">
      <u-icon name="fingerprint" color="#2979ff" size="68"></u-icon>
    </button>
    <u-modal v-model="ysxy.show" :negative-top="200" title="用户隐私提示保护" :show-confirm-button="false"
             :mask-close-able="true">
      <view class="slot-content" >
        <view class="ysbox">
          感谢您使用本产品,您使用本产品前应当仔细阅读并同意<span  @click="openYsXyDetail" class="ysname">{{ ysxy.name }}</span>
          当您点击同意并开始使用产品服务时,即表示你已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法更好的体验产品。
        </view>
        <div class="auth-btncard">
          <div class="btn-unok">
            <u-button :hair-line='false' :custom-style="customStyleUnOk" @click="ysxy.show=false">
              拒绝</u-button>
          </div>
          <div class="btn-ok">
            <u-button :hair-line='false' :custom-style="customStyleOk" open-type="agreePrivacyAuthorization"
                      @click="ysxy.show=false;ysxy.agree=true;"> 同意</u-button>
          </div>
        </div>
      </view>
    </u-modal>
  </view>
</template>
<script>
import global from "../../common/utils/global";
export default {
  data() {
    return {
      ysxy:{
        show:false,
        name:'《小程序隐私保护指引》',
        agree:false
      },
      customStyleOk: {
        marginTop: '20rpx', // 注意驼峰命名,并且值必须用引号包括,因为这是对象
        border: 'none',
        color: '#157DFB'
      },
      customStyleUnOk: {
        marginTop: '20rpx', // 注意驼峰命名,并且值必须用引号包括,因为这是对象
        border: 'none',
        color: 'gray'
      },
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.initYsxy();
    //#endif
  },
  methods: {
    openYsXyDetail(){
      uni.openPrivacyContract({});
    },
    initYsxy(){
      this.ysxy.agree = false;
      let _this=this;
      if (uni.getPrivacySetting) {
        uni.getPrivacySetting({
          success: res => {
            console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
            if (res.needAuthorization) {
              _this.ysxy.name = res.privacyContractName
              _this.ysxy.show = true;
            } else {
              //已经同意了
              _this.ysxy.agree = true;
            }
          },
          fail: () => {
          },
          complete: () => {},
        })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.ysbox{
  margin: 40rpx;
  .ysname{
    color: #157DFB;
  }
}
.auth-btncard {
  .btn-unok {
    width: 50%;
    float: left;
  }
  .btn-ok {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    border: 0px solid transparent; //自定义边框
    outline: none; //消除默认点击蓝色边框效果
    u-button {
      margin: 0;
      padding: 0;
      border: 0px solid transparent; //自定义边框
      outline: none; //消除默认点击蓝色边框效果
    }
  }
}
</style>


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

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

相关文章

【iOS】属性关键字

文章目录 前言一、深拷贝与浅拷贝1、OC的拷贝方式有哪些2. OC对象实现的copy和mutableCopy分别为浅拷贝还是深拷贝&#xff1f;3. 自定义对象实现的copy和mutableCopy分别为浅拷贝还是深拷贝&#xff1f;4. 判断当前的深拷贝的类型&#xff1f;(区别是单层深拷贝还是完全深拷贝…

Mac移动硬盘怎么识别PC电脑?

如果你拥有一台Mac设备&#xff0c;总会遇到尴尬的那一刻——你在Mac上用得好好的移动硬盘怎么都不能被PC识别到。又或者你朋友在PC上用得好好的移动硬盘&#xff0c;连上你的Mac后&#xff0c;Mac里的文件死活就是拷贝不进移动硬盘里。这种坑&#xff0c;相信大多数使用Mac的小…

Windows无法删除分区怎么办?

我们知道Windows系统内置的磁盘管理工具是一个很实用的程序&#xff0c;可以帮助我们完成很多磁盘分区相关的基础操作&#xff0c;比如当我们想要删除硬盘上的某一个分区时&#xff0c;先想到的可能会是磁盘管理工具。但是当我们准备在磁盘管理工具中删除某个分区时&#xff0c…

Upload-labs 1~15 通关详细教程

文章目录 Upload-labs 1~15 通关详细教程Pass-01-前端js验证Pass-02-后端MIME验证Pass-03-黑名单验证Pass-04-黑名单验证.htaccessPass-05-文件后缀名大小写绕过Pass-06-文件后缀名空格绕过Pass-07-文件后缀名点绕过Pass-08-文件后缀名::$DATA绕过Pass-09-点空格点空格绕过Pass…

Python爬虫乱码问题之encoding和apparent_encoding的区别

encoding是从http中的header中的charset字段中提取的编码方式&#xff0c;若header中没有charset字段则默认为ISO-8859-1编码模式&#xff0c;则无法解析中文&#xff0c;这是乱码的原因 apparent_encoding会从网页的内容中分析网页编码的方式&#xff0c;所以apparent_encodi…

Windows10上使用llama-recipes(LoRA)来对llama-2-7b做fine-tune

刚刚在Windows10上搭建环境来对llama2做finetune&#xff0c;里面坑还是挺多的&#xff0c;这里把印象中的坑整理了一下以作备忘。 llama-recipes是meta的开源项目&#xff0c;Github地址为&#xff1a;GitHub - facebookresearch/llama-recipes: Examples and recipes for Ll…

【仿写spring之ioc篇】四、实现bean的初始化阶段

BeanPostProcessor 在Bean的初始化阶段有前置和后置方法&#xff0c;这个方法是通过BeanPostProcessor来管理的&#xff0c;下面我们对原有的项目结构做小小的更改。 对启动类作出修改&#xff0c;先检查有没有BeanPostProcessor的实现类&#xff0c;有的话就使用&#xff0c…

搜索二维矩阵 II

题目链接 搜索二维矩阵 II 题目描述 注意点 矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 解答思路 最初想到使用深度优先遍历剪枝实现&#xff0c;但是运行后超出时间限制了可以直接遍历整个矩阵查找&#xff0c;虽然不超时…

【sgLazyTree】自定义组件:动态懒加载el-tree树节点数据,实现增删改、懒加载及局部数据刷新。

特性 可以自定义主键、配置选项支持预定义节点图标&#xff1a;folder文件夹|normal普通样式多个提示文本可以自定义支持动态接口增删改节点 sgLazyTree源码 <template><div :class"$options.name" v-loading"rootLoading"><div class&qu…

wireshark抓包分析

题目一&#xff1a;Cephalopod(图片提取) 打开下载好的数据包&#xff1a;CtrlF 按照如图选择分组字节流&#xff0c;选择字符串&#xff0c;输入‘flag’筛选出数据包&#xff1b; 点击筛选出来的一条数据包&#xff0c;右键选择追踪tcp流&#xff1b; 然后可以看到png的字样…

2.92-KFKG射频微波同轴连接器的电气特性

2.92mm连接器的名称是以其外导体内径命名的&#xff0c;采用空气介质工作频率高达40GHz,可与SMA和3.5mm连接器互换对插。优越的电性能、可靠的连接尤其适用于测试系统和武*装备&#xff0c;成为国际上应用最为广泛的毫米微波连接器之一。 电气特性&#xff1a; 特性阻抗&…

解读《生成式人工智能服务管理暂行办法》

《生成式人工智能服务管理暂行办法》 第一章 总 则第二章 技术发展与治理第三章 服务规范第四章 监督检查和法律责任第五章 附 则 以ChatGPT为代表的现象级互联网应用的出现&#xff0c;掀起了人工智能领域新一轮技术浪潮。作为新一代信息技术&#xff0c;生成式人工智能通过…

正点原子I.MX6ull应用编程 看门狗实验 /dev/watchdog: Device or resource busy

记录自己学习正点原子I.Mx6ull应用编程教程中遇到的坑点和问题 按着正点原子<<I.MX6U嵌入式Linux C应用编程指南>>学习看门狗应用编程&#xff0c;在运行程序的时候出现 open error: /dev/watchdog: Device or resource busy 可以看到watchdog忙碌&#xff0c;看起…

Python所有方向的学习路线图!!

学习路线图上面写的是某个方向建议学习和掌握的知识点汇总&#xff0c;举个例子&#xff0c;如果你要学习爬虫&#xff0c;那么你就去学Python爬虫学习路线图上面的知识点&#xff0c;这样学下来之后&#xff0c;你的知识体系是比较全面的&#xff0c;比起在网上找到什么就学什…

MyBatis——MyBatis数据源与连接池

摘要 博文主要介绍MyBatis数据源与连接池&#xff0c;更好的理解MyBatis数据源与连接池。 一、MyBatis数据源DataSource分类 MyBatis把数据源DataSource分为三种&#xff1a; UNPOOLED 不使用连接池的数据源POOLED 使用连接池的数据源JNDI 使用JNDI实现的数据源 MyBatis内…

ESP32C3 LuatOS RC522①写入数据并读取M1卡

LuatOS RC522官方示例 官方示例没有针对具体开发板&#xff0c;现以ESP32C3开发板为例。 选用的RC522模块 ESP32C3-CORE开发板 注意ESP32C3的 SPI引脚位置&#xff0c;SPI的id2 示例代码 -- LuaTools需要PROJECT和VERSION这两个信息 PROJECT "helloworld" VERSIO…

网络地址转换技术NAT(第九课)

一 什么是NAT&#xff1f; NAT是网络地址转换的缩写&#xff0c;是一种在计算机网络中使用的技术&#xff0c;可以将私有地址转换为公共地址&#xff0c;从而实现本地网络与公共网络的互联。NAT工作在网络层&#xff0c;可以隐藏内部网络中的IP地址和端口号&#xff0c;从而增…

在数字时代中,该怎么保留温暖的传统

在我们现代快节奏的数字时代&#xff0c;许多人会不禁思考&#xff0c;传统的壁炉是否还有存在的必要。毕竟&#xff0c;现代家庭通常配备了先进的暖气系统和电子设备&#xff0c;能够在寒冷的日子里提供温暖。然而&#xff0c;尽管科技的进步使得家庭取暖变得更加便捷&#xf…

SpringCloudAlibaba常用组件

SpringCloudAlibaba常用组件 微服务概念 1.1 单体、分布式、集群 单体 ⼀个系统业务量很⼩的时候所有的代码都放在⼀个项⽬中就好了&#xff0c;然后这个项⽬部署在⼀台服务器上就 好了。整个项⽬所有的服务都由这台服务器提供。这就是单机结构。 单体应⽤开发简单,部署测试…

Axure RP暗黑色高保真中后台原型组件模板库及组件库素材

Axure RP暗黑色高保真中后台原型组件模板库及组件库素材&#xff0c;黑色一直以来就可以给人以高级、神秘的语义象征&#xff0c;相比于浅色模式&#xff0c;暗色模式藏着更多可能性。色彩具有层级关系&#xff0c;深色会在视觉感官上自动后退&#xff0c;浅色部分则会向前延展…