微信小程序用户隐私协议保护指引自定义组件封装

news2024/12/23 10:43:56

这是一个微信小程序用户隐私协议保护指引自定义组件封装详细教程及代码。【建议收藏】
在做微信小程序有涉及表单提交,涉及用户信息收集时。提交代码会审核不过。
有需要了解到文档:https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

演示:扫码-进页面,拉下,点击-广告位申请,
在这里插入图片描述

需要以下处理:

  • 1.填写:入口1:设置—功能设置—用户隐私保护指引设置
  • 2.开发用户授权同意页面开发。
    在这里插入图片描述

开发微信小程序用户隐私协议保护指引自定义组件:
在这里插入图片描述
详细实现代码
privacyPopup.wxml:

<view class="layer_privacy" wx:if="{{showPrivacy}}">
  <view class="agree_box">
    <view class="tit">{{title}}</view>
    <view class="content">
        <view class="dec">{{desc1}}</view>
        <view class="dec_link" style="color:blue" bindtap="openPrivacyContract">{{privacyContractName}}</view>
        <view class="dec">{{desc2}}</view>
        <view class="btn_group">
          <button class="disagree_btn" bindtap="handleDisagree">不同意并退出</button>
          <button class="agree_btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgree">同意并继续</button>
        </view>
    </view>
  </view>
</view>

privacyPopup.wxss样式:

.layer_privacy{background-color:rgba(0, 0, 0, 0.5);position: fixed;top:0;right: 0;bottom: 0;left: 0;}
.agree_box{position: fixed;left: 0;right: 0;bottom: 0;height: 30%;background: #ffffff;padding: 25rpx;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;}
.agree_box .tit{text-align: center;line-height: 50rpx;margin-bottom: 40rpx;}
.agree_box .btn_group{padding: 0 20rpx;display: flex;justify-content: center;align-items: center;padding-top: 20rpx;}
.disagree_btn{line-height: 70rpx;color: #333;border-radius: 6rpx;padding: 0 40rpx;}
.agree_btn{background-color: #0052D9;line-height: 70rpx;color: #fff;border-radius: 6rpx;padding: 0 40rpx;}
.content .dec_link,.content .dec{display: inline-block;font-size: 26rpx;color: #333;}

privacyPopup.js

 Component({
    data: {
        title: "用户隐私保护提示",
        desc1: "请仔细阅读",
        desc2: "当您点击“同意并继续”时,即表示你已理解并同息该条款内容。如您“不同意并退出”,将无法申请广告位功能。",
        showPrivacy: false,
        privacyContractName:'',
    },
    lifetimes: {
      attached: function() {
        if (wx.getPrivacySetting) {
          wx.getPrivacySetting({
            success: res => {
                console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
                this.setData({
                  privacyContractName: res.privacyContractName
                })
                if (res.needAuthorization) {
                  this.popUp()
                } else{
                  this.triggerEvent("agree")
                }
            },
            fail: () => { },
            complete: () => { },
          })
        } else {
          // 低版本基础库不支持 wx.getPrivacySetting 接口,隐私接口可以直接调用
          this.triggerEvent("agree")
        }
      },
    },
    methods: {
        handleDisagree(e) {
            this.triggerEvent("disagree")
            this.hidenPopUp()
        },
        handleAgree(e) {
            this.triggerEvent("agree")
            this.hidenPopUp()
        },
        popUp() {
            this.setData({
              showPrivacy: true
            })
        },
        hidenPopUp() {
            this.setData({
              showPrivacy: false
            })
        },
        openPrivacyContract() {
          wx.openPrivacyContract({
            success: res => {
              console.log('openPrivacyContract success')
            },
            fail: res => {
              console.error('openPrivacyContract fail', res)
            }
          })
        }
    }
})

page需要引用页面:

page.json

{
  "component": true,
  "usingComponents": {
    "privacy-popup": "../../components/privacyPopup/privacyPopup"
  },
}

page.wxml

<privacy-popup bind:agree="agree" bind:disagree="disagree"></privacy-popup>

如果wx.getPrivacySettingneedAuthorization始终返回的是false, 则需要在app.json中添加"__usePrivacyCheck__": true,
在这里插入图片描述

以上就是完整的实现代码,代码整理不易,希望大家点赞收藏,支持!!!!!

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

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

相关文章

超分辨率遥感图像去云的扩散增强训练

GitHub - littlebeen/Cloud-removal-model-collection: A collection of the existing end-to-end cloud removal model readme 云恢复的扩散增强 基于ADM的超分辨率遥感图像去云扩散增强算法。 几种传统的CR模型可以参考https://github.com/littlebeen/Cloud-removal-model-co…

短链接推荐:一个可以监测用户行为的“营销神器”

客户对我的推广有兴趣吗&#xff1f;他喜欢我的产品吗&#xff1f;他打开了我的营销信息吗&#xff1f;这三个问题相信每一位推广者都遇到过。接下来&#xff0c;就将给大家介绍一位大聪明——它能帮你监测每一位用户的行为&#xff0c;让你分分秒秒掌握用户的心理&#xff01;…

深入了解Redis内存淘汰策略中的LRU算法应用

LRU算法简析 LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;算法是一种常见的内存淘汰策略&#xff0c;它根据数据的访问时间来决定哪些数据会被淘汰。LRU算法的核心思想是&#xff1a;最久未被访问的数据&#xff0c;被认为是最不常用的数据&#…

UE5 GAS开发P41-43 永久效果,去除永久效果,伤害区域,EnumClass,开始重叠与结束重叠事件

这一部分学习了怎么创建一个伤害性的地形(火焰地形,毒沼泽等都可以用这个方式创建) AuraEffectActor.h // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "GameplayEffect.h&q…

Linux驱动开发:掌握SPI通信机制

目录标题 1、SPI简介2、SPI通信机制3、Linux内核中的SPI支持4、SPI核心API5、SPI控制器驱动6、SPI设备驱动 7、编写SPI设备驱动8、调试SPI驱动 在Linux驱动开发中&#xff0c;串行外设接口(SPI)是一种常见的高速全双工通信协议&#xff0c;用于连接处理器和各种外设。本文将深入…

React【Day4下+5】

环境搭建 使用CRA创建项目&#xff0c;并安装必要依赖&#xff0c;包括下列基础包 Redux状态管理 - reduxjs/toolkit 、 react-redux路由 - react-router-dom时间处理 - dayjsclass类名处理 - classnames移动端组件库 - antd-mobile请求插件 - axios pnpm i reduxjs/toolkit r…

企业规模扩大,SD-WAN实现跨省快速组网

随着数字化时代的飞速发展&#xff0c;企业面临着前所未有的挑战与机遇。5G、VoIP、AI和物联网等新技术的兴起&#xff0c;不仅改变了商业格局&#xff0c;也对企业网络提出了更高的要求。随着企业规模的不断扩大&#xff0c;企业如何搭建跨省的、高性能、超融合、简化运维的组…

防火墙技术基础篇:认识安全策略、安全区域、域间转发及报文转发流程

防火墙技术基础篇&#xff1a;认识安全策略、安全区域、域间转发及报文转发流程 一、安全策略匹配机制 简单通俗的讲&#xff0c;防火墙设备最基本的用途就是定义数据如何转发&#xff0c;靠什么定义呢&#xff1f;最基本的就是安全策略&#xff0c;当流量来到防火墙之后首先…

LeetCode_链表的回文结构

✨✨所属专栏&#xff1a;LeetCode刷题专栏✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 题目描述&#xff1a; 对于一个链表&#xff0c;请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法&#xff0c;判断其是否为回文结构。给定一个链表的头指针A&#xff0c;请返回一个bo…

Edge下载文件提示无法安全下载的解决方法

问题描述&#xff1a;最近Edge在下载文件时总是提示&#xff1a;无法安全下载&#xff0c;本文记录一下解决方法。 提示截图&#xff1a; 解决方式一&#xff1a; 1. 点击下图红框的三个点&#xff0c;选择保留 2. 选择仍然保留 解决方式二&#xff1a; 第一种方式每下载一次…

微信小程序中,plugins 配置项如何配置多个插件

在微信小程序中&#xff0c;如果需要配置多个插件&#xff0c;你可以在 app.json 文件的 plugins 配置项中为每个插件指定一个唯一的自定义名称&#xff0c;并分别提供它们的 version 和 provider 信息。下面是一个配置多个插件的示例&#xff1a; json复制代码 { "pages…

Python 0基础_变现_38岁_day 16(文件操作)

在python&#xff0c;使用内置函数open()进行文件的一些读写操作 文件操作格式&#xff1a;open(文件路径&#xff0c;访问模式&#xff0c;字符编码) 前面两个参数是必备参数&#xff0c;后面的字符编码为选填&#xff0c;但是大多数情况下都会协商字符编码 访问模式 r 只读 w…

如何看待AIGC技术

目录 1.概述 2.技术应用 2.1.媒体与内容创作 2.2.教育与学习 ​​​​​​​2.3.艺术创作 ​​​​​​​2.4.游戏产业 ​​​​​​​2.5.工业设计 ​​​​​​​2.6.对未来社会的影响 2.7.可能的发展方向 ​​​​​​​2.8.小结 3.伦理与风险 3.1.AIGC技术面临…

科研工作学习中常用的录制动图软件——screenToGif

一、前言 俗话说&#xff0c;字不如表&#xff0c;表不如图&#xff0c;静图不如动图。 动图给人的直观感受&#xff0c;还是很不错的。在曾经的学生期间&#xff0c;进行组会汇报&#xff1b;还是如今工作中&#xff0c;给领导汇报。我经常使用screenToGif这款软件&#xff…

基于STM32F4系列的ETH IAP在线升级程序

目录 1、前言 2、以太网的移植&#xff08;无操作系统&#xff09; 3、移植FATS 系统 4、移植ETH 驱动及 DP83848驱动 5、Tftp 服务程序 6、注意事项 ​7、代码 资料下载地址&#xff1a;基于STM32F4系列的ETH IAP在线升级程序 1、前言 此bootloader程序可以通过http…

数字科技助力垃圾分类展厅,增强内容交互新体验!

如今&#xff0c;许多行业都开始运用数字技术&#xff0c;探索其在展览展示领域中的应用&#xff0c;其中垃圾分类展厅作为现代城市文明建设的重要一环&#xff0c;也通过这些技术的运用&#xff0c;打造出了更加生动且富有科技感的展示空间&#xff0c;它不仅提升公众对垃圾分…

TCP详解

2.1TCP 由IETF的RFC793定义的传输控制协议&#xff08;Transmission Control Protocol&#xff0c;TCP&#xff09;是一种基于字节流的传输层通信协议。在传输数据前需要在发送与接收者之间建立连接&#xff0c;通过相应机制保证其建立连接的可靠性。 TCP协议具备以下特性&am…

信息化工作人员必备常识8——DNS缓存【查看缓存与清理dns缓存】

信息化工作人员必备常识8——DNS缓存【查看缓存与清理dns缓存】 前言信息化人员必备常识回顾&#xff08;不想看回顾的直接往下滑哦~&#xff09;pingtelnetnslookup命令ipconfig命令域名DNS DNS缓存主机上解析DNS的优先级 清理DNS缓存查看当前电脑有哪些DNS缓存 前言 信息化相…

【超详细保姆教程】手把手教你如何修改el-tab的默认样式,把el-tab的label变成我们想要的

目录 前言实现效果官方的样式修改后的结果 步骤1、去掉分割线和下划线去掉前去掉后 2、设置插槽&#xff0c;自定义label的内容&#xff0c;加上border等结果 3、为选中的tab修改高亮结果 前言 做前端实习也有一段时间了&#xff0c;昨天晚上在学校上项目工程管理这门课的时候…

Edge浏览器下载文件提示 “无法安全下载” 的解决方法

提示如下&#xff1a; 虽然我们可以通过 "保留" 进行下载&#xff0c;但是每次需要选择&#xff0c;比较麻烦 解决方法&#xff1a; 1、打开注册表 HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft 2、创建2个 "项" Edge\InsecureContentAllowedForUrls…