适配最新微信小程序隐私协议开发指南

news2024/10/2 14:29:41

准备工作
小程序后台设置用户隐私保护指引,需要等待审核通过:设置-基本设置-服务内容声明-用户隐私保护指引
小程序的基础库版本从 2.32.3 开始支持,所以要选这之后的版本
在 app.json 中加上这个设置 “usePrivacyCheck”: true
具体步骤可以参考官方给的开发文档,里面也有官方提供的 demo 文件。https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/

在这里插入图片描述

原生小程序适配代码
直接参考的官方给的 demo3 和 demo4 综合修改出的版本,通过组件的方式引用,所有相关处理逻辑全部放到了 privacy 组件内部,其他涉及到隐私接口的页面只需在 wxml 里引用一下就行了,其他任何操作都不需要,组件内部已经全部处理了。
网上有其他人分享的,要在页面 onLoad、onShow 里获取是否有授权这些,用下面的代码这些都不需要,只要页面里需要隐私授权,引入 privacy 组件后,用户触发了隐私接口时会自动弹出此隐私授权弹窗。

添加图片注释,不超过 140 字(可选)

新建一个 privacy 组件:privacy.wxml、privacy.wxss、privacy.js、privacy.json,完整代码在下方
在涉及隐私接口的页面引入 privacy 组件,如果使用的页面比较多,可以直接在 app.json 文件里通过 usingComponents 全局引入
privacy.wxml

<view wx:if="{{innerShow}}" class="privacy">
  <view class="privacy-mask"  />
  <view class="privacy-dialog-wrap">
    <view class="privacy-dialog">
      <view class="privacy-dialog-header">用户隐私保护提示</view>
      <view class="privacy-dialog-content">感谢您使用本小程序,在使用前您应当阅读井同意<text class="privacy-link" bindtap="openPrivacyContract">《用户隐私保护指引》</text>,当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用小程序相关功能。</view>
      <view class="privacy-dialog-footer">
        <button
          id="btn-disagree"
          type="default"
          class="btn btn-disagree"
          bindtap="handleDisagree"
        >不同意</button>
        <button
          id="agree-btn"
          type="default"
          open-type="agreePrivacyAuthorization"
          class="btn btn-agree"
          bindagreeprivacyauthorization="handleAgree"
        >同意并继续</button>
      </view>
    </view>
  </view>
</view>

privacy.wxss

.privacy-mask {
  position: fixed;
  z-index: 5000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.privacy-dialog-wrap {
  position: fixed;
  z-index: 5000;
  top: 16px;
  bottom: 16px;
  left: 80rpx;
  right: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy-dialog {
  background-color: #fff;
  border-radius: 32rpx;
}

.privacy-dialog-header {
  padding: 60rpx 40rpx 30rpx;
  font-weight: 700;
  font-size: 36rpx;
  text-align: center;
}

.privacy-dialog-content {
  font-size: 30rpx;
  color: #555;
  line-height: 2;
  text-align: left;
  padding: 0 40rpx;
}

.privacy-dialog-content .privacy-link {
  color: #2f80ed;
}

.privacy-dialog-footer {
  display: flex;
  padding: 20rpx 40rpx 60rpx;
}

.privacy-dialog-footer .btn {
  color: #FFF;
  font-size: 30rpx;
  font-weight: 500;
  line-height: 100rpx;
  text-align: center;
  height: 100rpx;
  border-radius: 20rpx;
  border: none;
  background: #07c160;
  flex: 1;
  margin-left: 30rpx;
  justify-content: center;
}

.privacy-dialog-footer .btn::after {
  border: none;
}

.privacy-dialog-footer .btn-disagree {
  color: #07c160;
  background: #f2f2f2;
  margin-left: 0;
}

privacy.js

let privacyHandler
let privacyResolves = new Set()
let closeOtherPagePopUpHooks = new Set()

if (wx.onNeedPrivacyAuthorization) {
  wx.onNeedPrivacyAuthorization(resolve => {
    if (typeof privacyHandler === 'function') {
      privacyHandler(resolve)
    }
  })
}

const closeOtherPagePopUp = (closePopUp) => {
  closeOtherPagePopUpHooks.forEach(hook => {
    if (closePopUp !== hook) {
      hook()
    }
  })
}

Component({
  data: {
    innerShow: false,
  },
  lifetimes: {
    attached: function() {
      const closePopUp = () => {
        this.disPopUp()
      }
      privacyHandler = resolve => {
        privacyResolves.add(resolve)
        this.popUp()
        // 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
        closeOtherPagePopUp(closePopUp)
      }

      closeOtherPagePopUpHooks.add(closePopUp)

      this.closePopUp = closePopUp
    },
    detached: function() {
      closeOtherPagePopUpHooks.delete(this.closePopUp)
    }
  },
  pageLifetimes: {
    show: function() {
      this.curPageShow()
    }
  },
  methods: {
    handleAgree(e) {
      this.disPopUp()
      privacyResolves.forEach(resolve => {
        resolve({
          event: 'agree',
          buttonId: 'agree-btn'
        })
      })
      privacyResolves.clear()
    },
    handleDisagree(e) {
      this.disPopUp()
      privacyResolves.forEach(resolve => {
        resolve({
          event: 'disagree',
        })
      })
      privacyResolves.clear()
    },
    popUp() {
      if (this.data.innerShow === false) {
        this.setData({
          innerShow: true
        })
      }
    },
    disPopUp() {
      if (this.data.innerShow === true) {
        this.setData({
          innerShow: false
        })
      }
    },
    openPrivacyContract() {
      wx.openPrivacyContract({
        success: res => {
          console.log('openPrivacyContract success')
        },
        fail: res => {
          console.error('openPrivacyContract fail', res)
        }
      })
    },
    curPageShow() {
      if (this.closePopUp) {
        privacyHandler = resolve => {
          privacyResolves.add(resolve)
          this.popUp()
          // 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
          closeOtherPagePopUp(this.closePopUp)
        }
      }
    }
  }
})

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

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

相关文章

【方法】PPT设置密码后如何修改?

PowerPoint是我们日常和工作中经常用到的办公软件&#xff0c;有时候为了保护文件&#xff0c;还会设置密码&#xff0c;那设置密码后又想要修改密码&#xff0c;怎么操作呢&#xff1f;下面来看看PPT常用的两种密码是如何修改的。 1. “打开密码” 想要修改PPT的“打开密码”…

C++性能优化- perf 和火焰图的安装使用

工欲善其事必先利其器&#xff0c;要想做Linux下的程序性能优化&#xff0c;就得先知道当前性能的瓶颈在哪里。 这里主要介绍一下常用的工具&#xff1a;perf工具和火焰图的使用方法 本文中的命令都是自己在Ubuntu18.04系统上测试可用的&#xff0c;在其他系统可能会需要不同的…

64.Go整洁代码架构实践

文章目录 一、为什么要有代码架构二、好的代码架构是如何构建的1、整洁架构2、洋葱架构三、六边形架构4、COLA &#xff08;Clean Object-oriented and Layered Architecture&#xff09;架构 三、Go 代码架构实践1、目录设计2、Adapter 层 : 负责http路由或者rpc接口管理3、Ap…

关于谷歌Gemini大模型

2023年12月7日&#xff0c;谷歌AI宣布发布新一代基于Transformer架构的大模型Gemini。 Gemini的名字来源于双子座&#xff0c;象征着模型的双重性质&#xff1a; 一方面&#xff0c;它是一个强大的训练模型&#xff0c;可以在各种下游任务上进行微调&#xff0c;如文本摘要、机…

真空引水罐 虹吸抽水机 负压虹吸罐 农业灌溉工作原理动画介绍

​ 1&#xff1a;真空引水罐虹吸抽水机虹吸罐介绍 真空引水罐是一种水泵吸水设备&#xff0c;也被称为真空罐、吸水罐或自动引水装置。它是一个密封的罐体&#xff0c;被串联在泵前的吸水管上&#xff0c;能够使水泵的吸水口从负压吸水变为正压吸水。使用真空引水罐可以节省真…

[蓝桥 2023 ]三带一

问题描述 小蓝和小桥玩斗地主&#xff0c;小蓝只剩四张牌了&#xff0c;他想知道是否是“三带一”牌型。 所谓“三带一”牌型&#xff0c;即四张手牌中&#xff0c;有三张牌一样&#xff0c;另外一张不与其他牌相同&#xff0c;换种说法&#xff0c;四张手牌经过重新排列后&am…

前端结合MQTT实现连接 订阅发送信息等操作 VUE3

MQTT客户端下载 使用测试 在我之前文章中 MQTT下载基础使用 下面记录一下前端使用的话的操作 1.安装 npm i mqtt引入 import * as mqtt from "mqtt/dist/mqtt.min"; //VUE3 import mqtt from mqtt //VUE2 一、MQTT协议中的方法 Connect。等待与服务器建立连接…

体系化的进阶学习内容

UWA学堂&#xff1a;传播游戏行业的体系化的进阶学习内容。UWA学堂作为面向开发者的在线学习平台&#xff0c;目前已经上线272门课程&#xff0c;涵盖了3D引擎渲染、UI、逻辑代码等多个模块&#xff0c;拥有完整的学习体系&#xff0c;一直致力于为广大的开发者提供更丰富、更优…

线程同步及互斥锁

一、线程同步 1. 线程同步&#xff1a;即当有一个线程在对内存进行操作时&#xff0c;其他线程都不可以对这个内存地址进 行操作&#xff0c;直到该线程完成操作&#xff0c;其他线程才能对该内存地址进行操作&#xff0c;而其他线程则处 于等待状态。 2. 临界区是指访问某…

junit单元测试:使用@ParameterizedTest 和 @CsvSource注解简化单元测试方法

在平常的开发工作中&#xff0c;我们经常需要写单元测试。比如&#xff0c;我们有一个校验接口&#xff0c;可能会返回多种错误信息。我们可以针对这个接口&#xff0c;写多个单元测试方法&#xff0c;然后将其场景覆盖全。那么&#xff0c;怎么才能写一个测试方法&#xff0c;…

CSDN的Markdown编辑器使用教程

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

YOLOv5改进 | 2023 | SCConv空间和通道重构卷积(精细化检测,又轻量又提点)

一、本文介绍 本文给大家带来的改进内容是SCConv,即空间和通道重构卷积,是一种发布于2023.9月份的一个新的改进机制。它的核心创新在于能够同时处理图像的空间(形状、结构)和通道(色彩、深度)信息,这样的处理方式使得SCConv在分析图像时更加精细和高效。这种技术不仅适…

【Flink精讲】双流Join之Regular Join(即普通Join)

Regular Join 普通Join 通过条件关联两条实时数据流&#xff1a;动态表Join动态表支持Inner Join、Left Join、Right Join、Full Join。 1. Inner Join(Join)&#xff1a;只有两边数据流都关联上才输出[L,R] 2. Left Join(Left Outer Join)&#xff1a;只要左流有数据即输出[…

听GPT 讲Rust源代码--compiler(26)

File: rust/compiler/rustc_target/src/abi/call/mips.rs 在Rust源代码中的rust/compiler/rustc_target/src/abi/call/mips.rs文件是关于MIPS架构的函数调用ABI(Aplication Binary Interface)定义。ABI是编程语言与底层平台之间的接口规范&#xff0c;用于定义函数调用、参数传…

三英战吕布web3游戏项目启动全流程

项目是一个学习相关的很好的例子并且开源&#xff0c;原本的项目是连接goerli网络&#xff0c;但我把它修改为可连接ganache网络的项目了&#xff0c;更方便启动。 智能合约部分 进入文件 hardhat.config.js &#xff0c;增加一个钱包私钥 2.执行npm install 3.测试合约 npx ha…

乔布斯在斯坦福大学经典演讲

今天&#xff0c;很荣幸来到各位从世界上最好的学校之一毕业的毕业典礼上。我从来没从大学毕业过&#xff0c;说实话&#xff0c;这是我离大学毕业最近的一刻。 今天&#xff0c;我只说三个故事&#xff0c;不谈大道理&#xff0c;三个故事就好。 第一个故事&#xff0c;是关于…

机器人相关知识

机器人学&#xff08;Robotics) 一些基础概念 位姿 位姿位置姿态 位姿的表示 刚体 刚性物体是一组粒子的集合&#xff0c;其中任意两个粒子之间的距离保持固定&#xff0c;不受物体运动或施加在物体上的力的影响。 “完全不可变形”的物体就是刚体。 刚体位置 刚性连杆 …

web——德州扑克

1.此案例只用于学习 2.未接入游戏规则 HTML代码部分 <!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width"><meta name"Poker Skin" content&quo…

YOLOv5改进 | 注意力篇 | Deformable-LKA(DLKA)可变形的大核注意力(附多个位置添加教程)

一、本文介绍 本文给大家带来的改进内容是Deformable-LKA(可变形大核注意力)。Deformable-LKA结合了大卷积核的广阔感受野和可变形卷积的灵活性,有效地处理复杂的视觉信息。这一机制通过动态调整卷积核的形状和大小来适应不同的图像特征,提高了模型对目标形状和尺寸的适应…

转转服务瘦身实战

文章目录 1 背景2 第一步-发现并下掉僵尸服务2.1 如何发现僵尸服务2.2 如何下掉僵尸服务 3 第二步-发现并下掉僵尸方法3.1 如何发现僵尸方法3.1.1 全量方法的获取3.1.2 活动方法的获取3.1.3 ServiceAbility Agent方案详解3.1.3.1 ServiceAbility Agent使用方法3.1.3.2 解决stop…