【微信小程序】最新隐私弹窗组件

news/2024/7/20 2:14:01 标签: 微信小程序, 小程序

程序员何苦为难程序员
小程序>微信小程序又发布了新一波政策
就是获取头像昵称位置啥啥各种用户信息的时候 都需要先搞个弹窗 让用户确认才行
小程序用户隐私保护指引内容介绍

必须跟上啊 咱公司的大佬马上搞了个组件
贴出来学习一下 顺便给大家参考

<!--components/privacy/privacy.wxml-->
<!-- 隐私弹窗 -->
<view class="privacy-box" wx:if="{{showPrivacy}}">
  <view class="privacy-inner">
    <view class="privacy-t1">隐私指引</view>
    <view class="privacy-t2">欢迎使用!使用小程序前请阅读:</view>
    <view class="privacy-t3" bind:tap="goRxx">小程序隐私保护指引》</view>
    <view class="privacy-t2" style="margin-bottom: 60rpx;">当您点击同意并继续并开始使用小程序时,表示您已理解并同意该条款内容。如您拒绝,将无法继续使用小程序</view>
    <button class="agree-btn" id="agree-btn" hover-class="none" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button>
    <view class="agree-btn nix" bind:tap="noAgger">不同意</view>
  </view>
</view>

<view style="position: absolute;left: 0;opacity: 0;pointer-events: none;">为了触发ready</view>
/* components/privacy/privacy.wxss */

.privacy-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.privacy-inner {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  background: #fff;
  box-sizing: border-box;
  border-radius: 10rpx;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 40rpx 40rpx 160rpx;
}

.agree-btn {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  margin-bottom: 40rpx;
  font-size: 32rpx;
  width: 100% !important;
  border-radius: 10rpx;
  font-weight: bold;
  background: #0380FF;
}

.nix {
  color: #000;
  border: 1rpx solid rgb(185, 185, 185);
  background: rgb(236, 236, 236);
}

.privacy-t1 {
  font-size: 36rpx;
  color: #000;
  text-align: center;
  font-weight: bold;
  padding-bottom: 60rpx;
}

.privacy-t2 {
  font-size: 24rpx;
  color: #9b9b9b;
}

.privacy-t3 {
  font-size: 24rpx;
  color: #1280FF;
  padding: 30rpx 0;
}
// components/privacy/privacy.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },
  pageLifetimes: {
    ready() {
      this.checkPrivacy()
    }
  },
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

    goRxx() {
      wx.openPrivacyContract({
        complete(res) { console.log('openPrivacyContract', res); }
      })
    },
    handleAgreePrivacyAuthorization() {
      this.setData({ showPrivacy: false })
      // 用户点击同意按钮后
      // this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
      // 用户点击同意后,开发者调用 resolve({ buttonId: 'agree-btn', event: 'agree' })  告知平台用户已经同意,参数传同意按钮的id
      // 用户点击拒绝后,开发者调用 resolve({ event:'disagree' }) 告知平台用户已经拒绝
    },
    noAgger() {
      wx.showToast({
        icon: 'none',
        title: '点击同意并继续才可以继续使用',
      })
      wx.exitMiniProgram()//退出小程序
    },
    checkPrivacy(call) {
      wx.getPrivacySetting({
        success: res => {
          console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
          if (res.needAuthorization) {

            // 需要弹出隐私协议
            this.setData({ showPrivacy: true })
          } else {
            call && call()
            // 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用已声明过的隐私接口
            // wx.getUserProfile()
            // wx.chooseMedia()
            // wx.getClipboardData()
            // wx.startRecord()
          }
        }
      })
    },
  }
})

其实主要就是wx.getPrivacySetting 一下
wx.exitMiniProgram()表示不同意就退出小程序,可以根据需求自己调整哈
然后用的时候就每个页面引入一下

html页面

<!-- 隐私 -->
<privacy id="myprivacy"></privacy>

json页面

  "usingComponents": {
    "privacy": "components/privacy/privacy",
  },

最好是放到公共组件里面


http://www.niftyadmin.cn/n/5026256.html

相关文章

链式法则:概率论描述语言模型

目录 1.事件相互独立 2.链式法则 3.示例 4.语言模型中的链式法则 1.事件相互独立 事件相互独立就是&#xff1a;一个事件的发生与否&#xff0c;不会影响另外一个事件的发生。 当a和b两个事件互相独立时&#xff0c;有&#xff1a; P(a | b) P(a) 推广到3个事件就有下面…

微信小程序项目开发Day1

没接触过&#xff0c;直接看视频学习&#xff1a; 千锋教育微信小程序开发制作前端教程&#xff0c;零基础轻松入门玩转微信小程序_哔哩哔哩_bilibili千锋教育微信小程序开发制作前端教程&#xff0c;零基础轻松入门玩转微信小程序共计56条视频&#xff0c;包括&#xff1a;学…

Java - List 去重,获取唯一值,分组列出所属对应集合

问题&#xff1a;List 去重&#xff0c;获取唯一值&#xff0c;分组列出所属对应集合 方案一&#xff1a;这个不需要额外的内存占用 //遍历后判断赋给另一个list集合public static void main(String[] args){List<String> list new ArrayList<String>(); lis…

利用gpt进行GMV变化数据分析

prompt: 现在已知男性GMV从800降至600&#xff0c;女性GMV从1200至1300&#xff0c;请计算男女GMV变动对整体GMV变动的贡献度 output: 在这个问题中&#xff0c;我们要计算男性和女性的GMV&#xff08;总销售额&#xff09;变动对整体GMV变动的贡献度。首先&#xff0c;计算男…

-bash: zip: 未找到命令

如果在使用 -bash: zip: 未找到命令 时出现这个错误&#xff0c;说明您的系统缺少 zip 命令&#xff0c;因此无法执行 zip 压缩操作。zip 命令通常用于在 Linux 或类 Unix 系统上进行文件和目录的压缩和解压缩。 解决这个问题的方法取决于您使用的操作系统和包管理器。以下是一…

PostgreSQL 数据定义语言 DDL

文章目录 表创建主键约束非空唯一约束检查约束外键约束默认值约束 触发器表空间构建表空间 视图索引索引的基本概念索引的分类创建索引 物化视图 表创建 PostgreSQL表的构建语句与所有数据库都一样&#xff0c;结构如下&#xff0c;其核心在于构建表时&#xff0c;要指定上一些…

uniapp:APP开发,后台保活

前言&#xff1a; 在ios中&#xff0c;软件切换至后台、手机息屏&#xff0c;过了十来秒软件就会被系统挂起&#xff0c;APP内的任务就不能继续执行&#xff1b;在android中&#xff0c;默认情况下&#xff0c;软件在后台运行的时候&#xff0c;触发某些特定条件的情况下&…

【MySQL】基础SQL语句——库的操作

文章目录 一. 创建数据库1.1 基础语句1.2 字符集和校验规则1.3 校验规则对读取数据的影响 二. 查看数据库三. 修改数据库四. 删除数据库及备份4.1 删除4.2 备份和还原 结束语 一. 创建数据库 1.1 基础语句 最简洁的创建数据库的SQL语句是&#xff1a; create database db_nam…