uniapp实现微信小程序隐私协议组件封装

这篇具有很好参考价值的文章主要介绍了uniapp实现微信小程序隐私协议组件封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp实现微信小程序隐私协议组件封装。

uniapp实现微信小程序隐私协议组件封装,uni-app,微信小程序,notepad++

<template>
	<view class="diygw-modal basic" v-if="showPrivacy" :class="showPrivacy?'show':''" style="z-index: 1000000">
		<view class="diygw-dialog diygw-dialog-modal basis-lg">
			<view class="justify-end diygw-bar">
				<view class="content"> {{title}} </view>
			</view>
			<view>
				<view class="flex diygw-dialog-content flex-direction-column privacy-content">
					<view class="diygw-col-24"> {{contentstart}}<text :style="{color:agreebg}"  @tap="handleOpenPrivacyContract">{{privacy}}</text>。{{contentend}} </view>
					<view class="flex diygw-col-24">
						<button id="agree-btn" :style="{background:agreebg,color:agreecolor}" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree" class="diygw-btn  radius flex-sub margin-xs">同意并继续</button>
					</view>
					<view class="flex diygw-col-24">
						<button id="disagree-btn" :style="{background:disagreebg,color:disagreecolor}" class="diygw-btn  radius flex-sub margin-xs" @tap="handleDisagree">不同意</button>
					</view>
				</view>
			</view>
		</view>	
	</view> 
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '用户隐私保护提示'
			},
			contentstart:{
				type: String,
				default:'亲爱的用户,感谢您信任并使用本小程序。请您在点击同意之前仔细阅读并充分理解',
			},
			privacy:{
				type: String,
				default:'《用户隐私保护指引》',
			},
			contentend:{
				type: String,
				default:'当点击同意并继续时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力;如您不同意,将无法继续使用小程序相关功能。',
			},
			agreebg:{
				type: String,
				default:'#07c160',
			},
			agreecolor:{
				type: String,
				default:'#fff',
			},
			disagreebg:{
				type: String,
				default:'#aaaaaa',
			},
			disagreecolor:{
				type: String,
				default:'#fff',
			},
			isexit:{
				type:Boolean,
				default:true
			},
		},
		data() {
			return {
				showPrivacy: false,
				resolvePrivacyAuthorization: null,
				privacyResolves: new Set()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 监听何时需要提示用户阅读隐私政策
			init() {
				let thiz = this;
				// #ifdef MP-WEIXIN
				if (wx.onNeedPrivacyAuthorization) {
					wx.requirePrivacyAuthorize({
						success: (e) => {
							// 用户同意授权
							// 继续小程序逻辑
							console.log(e)
						  // 用户同意授权
						  // 继续小程序逻辑
						},
						fail: (e) => {
							console.log(e)
						}, // 用户拒绝授权
						complete: () => {}
					})
					wx.onNeedPrivacyAuthorization((resolve) => {
						thiz.resolvePrivacyAuthorization = resolve
						thiz.openPrivacy()
					})
				}
				// #endif
			},
			//打开隐私协议
			openPrivacyContract() {
				wx.openPrivacyContract({
					success(res) {
						console.log('打开隐私协议', res);
					},
					fail(err) {
						console.error('打开隐私协议失败', err)
					}
				});
			},
			// 不同意
			handleDisagree() {
				this.resolvePrivacyAuthorization({
						event: 'disagree',
						buttonId: 'disagree-btn'
				});
				//关闭弹窗
				this.disopenPrivacy()
				if(this.isexit){
					//退出小程序
					wx.exitMiniProgram();
				}
				
			},
			// 同意并继续
			handleAgree() {
				this.resolvePrivacyAuthorization({
						event: 'agree',
						buttonId: 'agree-btn'
				});
				//关闭弹窗
				this.disopenPrivacy()
			},
			//打开弹窗
			openPrivacy() {
				if (this.showPrivacy === false) {
					this.showPrivacy = true
				}
			},
			//关闭弹窗
			disopenPrivacy() {
				if (this.showPrivacy === true) {
					this.showPrivacy = false
				}
			},
		}
	}
</script>

<style>
	.privacy-content{
		padding:10px;
		line-height: 1.5;
		font-size: 28rpx;
	}
</style>

隐私协议封装组件后快速调用。

<diy-privacy></diy-privacy>文章来源地址https://www.toymoban.com/news/detail-728116.html

到了这里,关于uniapp实现微信小程序隐私协议组件封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序用户隐私保护通用组件

    微信小程序官方公告《关于小程序隐私保护指引设置的公告》 需要处理的隐私接口《插件用户隐私保护说明内容介绍》 1.2023 年 9 月 15 号之前,默认不会启用隐私相关功能,所以检测不到需要弹窗的情况,可以在 manifest.json 中配置 \\\"__usePrivacyCheck__\\\": true 之后,接口才可以检测

    2024年02月08日
    浏览(52)
  • uniapp微信小程序《隐私保护协议》弹窗处理流程

    背景 《关于小程序隐私保护指引设置的公告》 《小程序隐私协议开发指南》 流程 1.第一步 必须设置且审核通过!!! 2.第二步 uniapp在manifest.json中添加!!! 很多人前两步没做或者做的不对,导致出现needAuthorization一直为false情况 3.第三步 此处需要根据情况决定,在何时弹

    2024年02月08日
    浏览(72)
  • 一文看懂微信小程序新版隐私协议(附带弹窗组件)

    微信小程序近期又迎来了一次改革–9月15日之后如果小程序涉及调用微信的隐私接口获取用户的信息的,需要用户手动同意协议后才可正常调用接口,否则会返回报错信息。 隐私接口目前常用的有:手机号快捷获取、读取照片、获取用户的头像昵称(包括快捷填写能力)等。

    2024年02月09日
    浏览(38)
  • 【微信小程序 uniapp】 ws-wx-privacy 微信隐私保护弹出框 隐私协议弹出框

    插件地址 (https://mp.weixin.qq.com/wxamp/basicprofile/index?token=1956320193lang=zh_CN) 4. 将调试基础库改为 3.0.0以上。 微信开发者工具-详情-本地设置-调试基础库 5. 页面 使用示例 仅有在指引中 声明所处理的用户信息 ,才可以调用平台提供的对应接口或组件。若未声明,对应接口或组件将

    2024年02月08日
    浏览(53)
  • 微信小程序新版隐私协议弹窗实现最新版

    2023.08.22更新:【原文连接】 以下指南中涉及的 getPrivacySetting、onNeedPrivacyAuthorization、requirePrivacyAuthorize 等接口目前可以正常接入调试。调试说明: 在 2023年9月15号之前,在 app.json 中配置 __usePrivacyCheck__: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。

    2024年02月10日
    浏览(79)
  • 微信小程序-关于新版隐私协议接口wx.onNeedPrivacyAuthorization的适配解读以及实现代码

    代码插件已集成,即插即用, 五分钟集成进项目, 免费下载 ,欢迎大家交流  微信小程序用户隐私保护协议弹窗插件下载 官方公告地址:关于小程序隐私保护指引设置的公告 | 微信开放社区 1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下,否则将会

    2024年02月10日
    浏览(51)
  • uniapp 开发微信小程序之新版隐私协议

    自从微信小程序官方更新隐私协议,用户必须同意之后,才能获取个人信息,这就导致在获取用户信息之前,需要有个隐私协议弹窗 大致如下图: 微信小程序官方提供的API和 uniapp 开发的稍微有点区别,这里只记录 uniapp 开发的,如果需要微信原生的,请自行官网查看。 首先

    2024年02月09日
    浏览(46)
  • 微信小程序-关于新版隐私协议接口wx.onNeedPrivacyAuthorization getPrivacySetting requirePrivacyAuthorize的适配解读以及实现代码

    代码插件已集成,即插即用, 五分钟集成进项目, 免费下载 ,欢迎大家交流  微信小程序用户隐私保护协议弹窗插件下载 官方公告地址:关于小程序隐私保护指引设置的公告 | 微信开放社区 1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下,否则将会

    2024年02月10日
    浏览(46)
  • 微信小程序隐私协议接入

     2023.09.14更新: 隐私相关功能启用时间延期至 2023年10月17日。在 2023年10月17日之前,在 app.json 中配置 __usePrivacyCheck__: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。在 2023年10月17日之后,不论 app.json 中是否有配置 __usePrivacyCheck__ ,隐私相关功能都会

    2024年02月08日
    浏览(43)
  • 【Taro】微信小程序隐私协议改造

     微信要求小程序开发者在2023.9.15日前将小程序中调用获取用户隐私api的接口时,都必须要先让用户授权,如果用户拒绝授权,那么小程序的对应接口或组件将直接禁用。 那么首先,请将微信小程序开发者工具-详情-本地设置-基础调试库 切换至2.33.0以上。低于该调试库会报错

    2024年02月09日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包