首页 > 编程语言 >uniapp小程序隐私协议弹窗组件。自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用

uniapp小程序隐私协议弹窗组件。自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用

时间:2023-09-04 11:34:31浏览次数:60  
标签:console log color 微信 100% 用户 隐私 res

上代码  隐私组件代码 直接复制 就能用 

<template>
<view class="zero-privacy" :class="[{'zero-bottom':position=='bottom'}]" v-if="showPrivacy">
<view class="zero-privacy-container" :style="{'--color':color,'--bgcolor':bgcolor}">
<view class="title">
用户隐私保护提示
</view>
<view class="content">
使用前请仔细阅读
<text @click.stop="handleOpenPrivacyContract">{{ privacyContractName }}</text>。
当您点击同意后,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法使用该服务。
</view>
<view class="footer">
<navigator class="close btn disagree-btn" target="miniProgram" open-type="exit" @click="handleRefuse">拒绝
</navigator>
<button id="agree-btn" class="btn agree-btn" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgree">
同意
</button>
</view>
</view>
</view>
</template>
<script>
export default {
name: "zero-privacy",
emits: ['agree', 'disagree'],
props: {
position: {
type: String,
default: 'center'
},
color: {
type: String,
default: '#0396FF'
},
bgcolor: {
type: String,
default: '#ffffff'
},
onNeed: {
type: Boolean,
default: true
},
hideTabBar: {
type: Boolean,
default: false
}
},
data() {
return {
resolvePrivacyAuthorization: null,
showPrivacy: false,
privacyContractName: "", // 小程序协议名称
};
},
methods: {
open(name) {
if (this.hideTabBar) {
uni.hideTabBar({
success: (res) => {
// console.log("hideTabBar", res);
},
fail: (err) => {
// console.error("hideTabBar", err);
},
});
}
this.privacyContractName = name
this.showPrivacy = true;
},
close() {
this.showPrivacy = false;
if (this.hideTabBar) {
uni.showTabBar({
success: (res) => {
// console.log("showTabBar", res);
},
fail: (err) => {
// console.error("showTabBar", err);
},
});
}
},
// 点击同意
handleAgree() {
// 需要用户同意隐私授权时
if (this.onNeed) {
this.resolvePrivacyAuthorization({
buttonId: "agree-btn",
event: "agree",
});
}
this.close();
this.$emit('agree')
},
// 点击取消
handleRefuse() {
if (this.onNeed) {
this.resolvePrivacyAuthorization({
event: "disagree",
});
}
this.close();
this.$emit('disagree','123')
},
// 查看隐私协议内容
handleOpenPrivacyContract() {
uni.openPrivacyContract({
success: (res) => {
// console.log("openPrivacyContract success", res);
},
fail: (err) => {
// console.error("openPrivacyContract fail", err);
},
});
},
// 进入时获取隐私是否需要弹出隐私协议
checkPrivacySetting() {
uni.getPrivacySetting({
success: (res) => {
// console.log('getPrivacySetting', res);
// 如果是needAuthorization为false,无需弹出隐私协议
if (res.needAuthorization === false) {
return;
}

if (this.onNeed) {
uni.onNeedPrivacyAuthorization((resolve) => {
this.open(res.privacyContractName)
this.resolvePrivacyAuthorization = resolve;
});
} else {
this.open(res.privacyContractName)
}
},
fail: () => {},
complete: () => {},
});
},
},
mounted() {
this.checkPrivacySetting();
},
};
</script>

<style lang="scss">
.zero-privacy {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
-webkit-justify-content: center;
animation: fadeIn 0.2s linear both;
}


.zero-privacy-container {
width: 580rpx;
min-height: 400rpx;
background: var(--bgcolor);
border-radius: 16px;
padding: 50rpx;
font-size: 14px;
animation: fadeInBig 0.2s 0.2s linear both;
backdrop-filter: blur(10rpx); //毛玻璃属性

.title {
color: #333333;
font-size: 36rpx;
text-align: center;
}

.content {
color: #595959;
margin-top: 36rpx;
margin-bottom: 36rpx;
line-height: 50rpx;

text {
color: var(--color);
}
}

.footer {
display: flex;
justify-content: space-between;

// 重置微信小程序的按钮样式
button:after {
border: none;
}

.btn {
width: 200rpx;
line-height: 80rpx;
border-radius: 24px;
text-align: center;
}

.disagree-btn {
background-color: #f6f6f6;
color: #4c4c4c;
}

.agree-btn {
line-height: 80rpx;
background-color: var(--color);
color: #fff;
margin: 0;
}
}
}

.zero-bottom {
align-items: flex-end;

.zero-privacy-container {
width: 100%;
animation: fadeIn 0.2s linear both;
animation: fadeInUp 0.2s 0.2s linear both;
padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
border-radius: 24px 24px 0 0;
}

.footer {
padding: 0 40rpx;

.btn {
width: 250rpx;
}
}
}

@keyframes fadeIn {
0% {
opacity: 0.5;
}

100% {
opacity: 1;
}
}

@keyframes fadeInBig {
0% {
opacity: 0;
transform: scale(0.5);
}

100% {
opacity: 1;
transform: scale(1);
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}

100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
</style>

 

 

<view class="container">
<zero-privacy :onNeed='false'></zero-privacy> -->
<zeroPrivacy :onNeed='false' :hideTabBar='true' @agree="agree" @disagree="disagree"></zeroPrivacy>
</view>

 

agree(e){
console.log(e)
console.log('123123123同意')
},
disagree(e){
console.log(e)
console.log('123123123拒绝')

},

标签:console,log,color,微信,100%,用户,隐私,res
From: https://www.cnblogs.com/zhangershi/p/17676477.html

相关文章

  • 微信聊天记录报告制作教程
    前言马上要到我们家小宝的生日了,思来想去没想好送什么东西,在上班摸鱼的时候无意间看到了三年前很火的《微信聊天记录统计报告》,这个东西很好玩,所以我决定搞一下。但是大体浏览了一下,发现事情没有想象的那么简单,所以借这次机会讲一整个过程记录下来,也是一次学习的机会啦。参考文......
  • 微信小程序自定义头部导航栏
    微信小程序自定义头部导航栏虽然小程序自带的顶部导航栏比较好用,但是扩展性比较差。在实际开发中我们经常需要针对导航栏进行一些功能性操作。比如点击返回按钮返回到固定的页面,设置其他背景颜色字体颜色以及增加一些按钮等等。下面我们一起来看看导航栏的定制;先看下demo的效果:......
  • 微信小程序开发基础知识一
    小程序和普通前端网页开发的区别1、运行环境:微信小程序是在微信内部运行的,而普通前端网页是在浏览器中运行的。这意味着微信小程序必须依赖微信提供的运行时环境,而普通前端网页可以在不同的浏览器上运行。因此,微信小程序开发需要专门的开发工具和技术栈。2、开发语言:微信小程序主......
  • 我的 Kafka 旅程 - 基于账号密码的 SASL+PLAIN 认证授权 · 配置 · 创建账号 · 用户
    本文基于Kafka3.0+的KRaft模式来阐述默认的Kafka不受认证约束,可不用账号就可以连接到服务,也就是默认的PLAIN方式,不需要认证;配置了SASL认证之后,连接Kafka只能用凭证连接登录。SASL支持的认证方式有多种:GSSAPI,PLAIN,SCRAM-SHA-256,SCRAM-SHA-512,OAUTHBEARERGSSAPI......
  • 基于微信小程序的图书馆座位预约系统设计与实现-计算机毕业设计源码+LW文档
    选题意义: 该系统可以监测到图书馆座位的使用情况,便于学生查询图书馆的分布、座位多少、是否空闲等基本数据。学生可以通过手机或者计算机等终端进行座位预约,方便快捷。对于占座现象,学生可以通过系统进行反馈,方便图书馆管理人员及时处理。基于微信小程序的图书馆座位预约系统的使......
  • shell命令概述 Shell作用:命令解释器 介于操作系统内核与用户之间,负责解释命令行 获得
    Logo共40408字发布文章 草稿箱 1目录shell命令概述获得命令帮助Linux命令行的格式文件和目录管理Bash的命令历史Bash的命令别名重定向vim文本编辑器vim编辑器的工作模式命令模式中的基本操作末行模式中的基本操作用户和组账号概述用户账号文件——password用户账号文件——shadow......
  • shell命令概述 Shell作用:命令解释器 介于操作系统内核与用户之间,负责解释命令行 获得
    Logo共40408字发布文章 草稿箱 1目录shell命令概述获得命令帮助Linux命令行的格式文件和目录管理Bash的命令历史Bash的命令别名重定向vim文本编辑器vim编辑器的工作模式命令模式中的基本操作末行模式中的基本操作用户和组账号概述用户账号文件——password用户账号文件——shadow......
  • shell命令概述 Shell作用:命令解释器 介于操作系统内核与用户之间,负责解释命令行 获得
    Logo共40408字发布文章 草稿箱 1目录shell命令概述获得命令帮助Linux命令行的格式文件和目录管理Bash的命令历史Bash的命令别名重定向vim文本编辑器vim编辑器的工作模式命令模式中的基本操作末行模式中的基本操作用户和组账号概述用户账号文件——password用户账号文件——shadow......
  • 微信小程序开发部署发布流程
    微信小程序开发部署发布流程最近因为有比赛,所以在进行敏捷小程序开发,由于我比较菜,不会JS原生,所以选择了符合技术栈的技术路线。MPFlutter框架+dart语言的开发。这样就可以符合“同时产出小程序与APP”的需求。1.微信小程序申请微信公众平台(qq.com)进行申请,注册,认证。按照......
  • 用户组的创建、‘删除和修改
    一:概述 为了方便用户共享系统中的文件或者其他的资源,LInux开发者引入了组的功能。Linux系统中每一个用户都一定隶属于至少一个群组,系统在创建用户时为每一个用户都创建了一个同名的组,并且把该用户也加入其中。用户也可以加入其他的组中以获取需要的资源。通过用户组可以方便用户......