微信小程序添加用户授权《隐私保护协议》

news2024/12/23 14:35:34

官方文档:wx.onNeedPrivacyAuthorization(function listener) | 微信开放文档

隐私协议配置 

微信小程序平台上需要进行隐私配置,审核成功后大概半小时左右才会生效。

小程序公众平台 --- 设置 --- 服务内容声明 --- 用户隐私保护指引(提交审核时,也会检测是否采集用户隐私,有用到隐私接口的话需要添加哦)

微信小程序添加隐私保护协议弹框(基础库需在3.0.0以上

1、app.json:外层加上下面一行开启隐私判断;

{
    "__usePrivacyCheck__": true
}

 2、app.js:存储公共变量,为了解决this.resolvePrivacyAuthorization is not a function的问题;

globalData: {
    resolvePrivacyAuthorization: null, // 隐私协议上报给微信的公共变量
}

3、 自定义组件 mask-dialog:组件代码如下;

 

<!--component/maskDialog/index.wxml-->
<view class="mask-wrap" wx:if="{{showDialog == 'yes'}}">
  <view class="dialog-wrap">
    <view class="dialog-title">用户隐私保护提示</view>
    <view class="dialog-content">感谢您使用本小程序,您使用本小程序前应当阅读并同意</view>
    <view class="content-link" bindtap="jumpPrivacy">《******小程序隐私保护指引》</view>
    <view class="dialog-content">当您点击同意使用产品服务时,即表示您已理解并同意该条款内容。如您拒绝,将无法使用小程序相关功能。</view>
    <view class="dialog-btn-box">
      <button class="dialog-btn disagreeBtn" bindtap="refusePrivacy">拒绝</button>
      <button class="dialog-btn agreeBtn" id="agree-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
    </view>
  </view>
</view>
/* component/maskDialog/index.wxss */
.mask-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.dialog-wrap {
  width: 80%;
  padding: 30rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 20rpx;
}
.dialog-title {
  font-weight: bold;
  font-size: 32rpx;
}
.dialog-content {
  font-size: 28rpx;
  color: #999999;
  margin: 40rpx 0;
  line-height: 50rpx;
}
.content-link {
  font-size: 28rpx;
  color: #0D91EE;
}
.dialog-btn-box {
  margin-top: 80rpx;
  text-align: center;
}
.dialog-btn {
  width: 180rpx;
  height: 80rpx;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 80rpx;
  display: inline-block;
  margin: 0 20rpx;
}
.dialog-btn::after {
  border: none;
}
.disagreeBtn {
  background: #F2F2F2;
  color: #53BF6A;
}
.agreeBtn {
  background: #53BF6A;
  color: #ffffff;
}
// component/maskDialog/index.js
const app = getApp();
Component({
  properties: {
    showDialog: {
      type: String,
      value: 'no'
    }
  },
  data: {
    
  },
  methods: {
    // 点击“隐私协议连接”,跳转到官方的隐私协议页面
    jumpPrivacy() {
      wx.openPrivacyContract({
        success: () => {}, // 打开成功
        fail: () => {}, // 打开失败
      })
    },
    // 点击“拒绝”按钮
    refusePrivacy() {
      app.globalData.resolvePrivacyAuthorization({ event: 'disagree' });
      this.triggerEvent('closePrivacy');
    },
    // 点击“同意”按钮
    handleAgreePrivacyAuthorization() {
      app.globalData.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' });
      this.triggerEvent('closePrivacy');
    }
  }
})
{
  "component": true,
  "usingComponents": {}
}

 

在调隐私接口的页面中使用:

 1、json文件中:

"usingComponents": {
    "mask-dialog": "../../component/mask-dialog/index"
}

2、wxml文件中: 

<!-- 隐私协议 -->
<mask-dialog showDialog="{{showPrivacy}}" bind:closePrivacy="closePrivacy"></mask-dialog>

3、js文件中: 

const app = getApp();

data: {
    showPrivacy: 'no', // 隐私授权弹窗
},

onShow() {
    let _this = this;
    if (wx.onNeedPrivacyAuthorization) {
      wx.onNeedPrivacyAuthorization(resolve => {
        // 需要用户同意隐私授权时,弹出开发者自定义的隐私授权弹窗
        _this.setData({
          showPrivacy: 'yes'
        })
        app.globalData.resolvePrivacyAuthorization = resolve;
      })
    }
},
// 关闭隐私弹框
closePrivacy() {
    this.setData({ showPrivacy: 'no' });
},

昵称  需要特殊处理一下:

 

1、先添加上面3个步骤;

2、再添加如下代码即可:

<view class="row" catch:touchstart="handleTouchInput">
      <view class="text1">昵 称</view>
      <input type="nickname" class="weui-input" name="nickname" value="{{nickName}}" placeholder="请输入昵称" focus="{{focus}}"/>
</view>
data: {
    focus: false, // 昵称聚焦
},


handleTouchInput() {
    let that = this
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({//获取是否需要弹出
        success: res => {
          if (res.needAuthorization) {
            wx.requirePrivacyAuthorize({//该接口请求隐私协议,会自动触发上边的wx.onNeedPrivacyAuthorization
              success: () => {
                that.setData({
                  focus: true,
                })
              },
              fail: () => {},
              complete: () => {}
            })
          } else {
            that.setData({
              focus: true,
            })
          }
        },
        fail: () => {},
        complete: () => {}
      })
    } else {
      this.setData({
        focus: true
      })
    }
},

 

以上步骤就完成隐私保护协议修改啦~~~

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

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

相关文章

接口自动化框架Pytest —— 配置文件pytest.ini的详细使用

前言 我们在执行用例的时候&#xff0c;每次都在命令行中输入-v&#xff0c;-s等一些命令行参数的时&#xff0c;比较麻烦。其中pytest.ini这个配置文件可以快速的帮助我们解决这个问题。 配置文件 我们在执行用例的时候&#xff0c;每次都在命令行中输入-v&#xff0c;-s等一…

期权交易手续费哪家券商平台费率最低?怎么收费的?

随着场内ETF期权市场的发展&#xff0c;越来越多的新的品种上市。我们知道&#xff0c;想要交易5期权必须先在券商开通50ETF期权账户&#xff0c;不同券商手续费收取多少不一样&#xff0c;那么就来为大家介绍一下期权交易手续费哪家券商平台费率最低&#xff1f;怎么收费的&am…

设计模式 - 责任链

一、前言 ​ 相信大家平时或多或少都间接接触过责任链设计模式&#xff0c;只是可能有些同学自己不知道此处用的是该设计模式&#xff0c;比如说 Java Web 中的 Filter 过滤器&#xff0c;就是非常经典的责任链设计模式的例子。 那么什么是责任链设计模式呢&#xff1f; ​ …

智慧电力系统

智慧电力系统依托电易云-智慧电力物联网&#xff0c;将人工智能技术、物联网技术与电力行业相结合&#xff0c;通过数据的收集、分析和应用&#xff0c;实现电力资源精准调度、安全稳定运行、智能管理的全过程解决方案。 智慧电力系统的核心理念是将科技与能源紧密结合&#x…

SECOND:Sparsely Embedded Convolutional Detection

论文背景 为了克服图像单独提供空间信息的不足&#xff0c;点云数据在三维应用中变得越来越重要。点云数据包含精确的深度信息&#xff0c;可以由LiDAR或RGB-D相机生成。 VoxelNet&#xff1a;首先将点云数据分组成体素&#xff0c;然后在将体素转换成密集的3D张量用于区域提…

C语言插入排序

前言&#xff1a; 本文主要讲解插入排序中的直接插入排序和希尔排序。 1、直接插入排序&#xff1a; 1.1基本思想 直接插入排序是一种简单的插入排序法&#xff0c;其基本思想是把待排序的数值按照大小顺序逐个插入到一个已经排好序的有序序列中&#xff0c;直到将所有记录…

骨传导和普通耳机哪个危害大?哪款更值得入手一些?

先说结论&#xff0c;普通耳机对人体的危害要比骨传导耳机大一些&#xff0c;区分方式也很简单&#xff0c;想要了解骨传导耳机和普通耳机哪个对人体的危害更大&#xff0c;首先就要了解它们的传声方式&#xff0c;普通耳机的传声原理很简单&#xff0c;利用空气传声&#xff0…

App自动化测试持续集成效率提高50%

持续集成是一种开发实践&#xff0c;它倡导团队成员需要频繁的集成他们的工作&#xff0c;每次集成都通过自动化构建&#xff08;包括编译、构建、自动化测试&#xff09;来验证&#xff0c;从而尽快地发现集成中的错误。让正在开发的软件始终处于可工作状态&#xff0c;让产品…

A6500-CC 9199-00120 基于时间或基于条件的工作流

A6500-CC 9199-00120 基于时间或基于条件的工作流 B-Scada宣布VoT(虚拟化事物),允许真实世界的对象和其他数据源在虚拟模型中表示&#xff0c;该模型可以从任意数量的不同来源检索实时数据。虚拟化支持在结构化环境中对这些对象进行实时监控和管理&#xff0c;该环境可以在任…

[杂谈]-快速了解LoRa和LoRaWAN

快速了解LoRa和LoRaWAN 文章目录 快速了解LoRa和LoRaWAN1、什么是LoRa2、什么是 LoRaWAN3、LoRa和LoRaWAN比较4、LoRa与其他无线技术比较5、为什么需要LoRaWAN6、LoRa的缺点7、LoRa联盟8、LoRaWAN标准9、LoRaWAN的应用 许多事物进一步推动工业物联网 (IIoT)&#xff1b; 其中之…

Java 若依框架导出excel添加单表头标题

图示 若依框架通过Excel注解已经封装好导出的工具类了&#xff0c;目前是可以实现简单的单表表头标题添加 在exportExcel方法的后面直接添加一项参数就可以导出添加标题了~

ModaHub魔搭社区:星环科技向量数据库Hippo社区版来啦

大语言模型正在与企业应用迅速结合,并深刻改变企业的各个产业环节。而大模型训练所使用的数据包含了如文档、图片、音视频等各种类型的非结构化数据,传统关系型数据库能力有限。通过将这些非结构化数据转换为多维向量,可以结构化地在向量数据库中进行管理,实现高效的数据存…

DG232RL兼容FT232RL开发资料

芯片上处理的整个 usb 协议——不需要 usb 专用固件编程。 • uart 接口支持7或8个数据位、1或2个停止位和奇数/偶数/标记/空格/无奇偶校验。* 充分辅助的硬件或 x-on/x-off 软件握手。* 数据传输速率从300波特到3兆波特(RS422/RS485和 ttl 级) &#xff0c;从300波特到1兆波特…

终于来啦!OpenDataLab 新增自主上传功能,升级CLI/SDK工具、数据集详情页……体验赠好礼~

9月&#xff0c;OpenDataLab 全新版本上线&#xff0c;支持用户自主发布原创数据集&#xff0c;同时升级了 CLI/SDK 工具、数据集详情页&#xff0c;让 AI 数据集开源更方便、展示更清晰。还有创作领好礼活动&#xff0c;快来看看吧&#xff01; &#xff08;注意&#xff01;…

配电柜监控的真正标准,只有一个!

在现代社会中&#xff0c;电力是我们生活和工作不可或缺的一部分。大楼宾馆作为城市中繁忙生活的一部分&#xff0c;依赖于可靠的电力供应来支持各种设施和服务&#xff0c;从客房照明到电梯运行&#xff0c;无一不离电。然而&#xff0c;大楼宾馆电力分配系统的稳定性和安全性…

Java8新特性 - Lambda表达式

目录 一、Lambda表达式 1.1、为什么使用Lambda表达式&#xff1f; 1.2、Lambda的标准格式 Lambda的标准格式 无参无返回值的Lambda 有参有返回值的Lambda 1.3、Lambda的实现原理 1.4、Lambda省略模式 1.5、Lambda表达式的前提条件 1.6、Lambda与匿名内部类对比 1.7、…

AI智剪,批量剪辑视频的神器

在数字时代&#xff0c;视频剪辑已经成为各种行业中的重要工作。然而&#xff0c;传统的视频剪辑方式既耗时又费力&#xff0c;常常需要大量的时间和人力。幸运的是&#xff0c;随着人工智能技术的发展&#xff0c;我们有了新的解决方案——AI智剪软件。 AI智剪软件&#xff0c…

【gtpJavaScript】使用JavaScript实现套壳gtp与gtp打字输出效果

postman测试gtp接口 https://platform.openai.com/docs/api-reference/chat/create?langcurl 导入到postman中 记得弄一个gtp的key 然后请求测试gtp接口&#xff1a; 纯前端实现gtp请求页面 目录结构&#xff1a; 部分参考&#xff1a;GitHub - xxxjkk/chat-website: 简易版c…

德庄借助纷享销客CRM系统实现高效管理

德庄集团创于1999年&#xff0c;是一家集餐饮产业、食品产业、科技研发及文化研究为一体的现代化民营企业&#xff0c;下属9家子公司、2大现代化食品加工基地、1所研究所、1所培训学校、1个技术中心。拥有德庄、青一色、滟设、香漫谷、饭空等8大子品牌&#xff0c;呈现出良好的…