小程序隐私信息授权wx.onNeedPrivacyAuthorization vue2+uniapp / vue3

这篇具有很好参考价值的文章主要介绍了小程序隐私信息授权wx.onNeedPrivacyAuthorization vue2+uniapp / vue3。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

记录一下微信隐私信息授权接口相关配置使用。小程序是uniapp+vue2开发

1.首先需要去到微信公众平台,申请小程序中用到的所有隐私接口。可参考

用户隐私保护指引填写说明 | 微信开放文档

小程序用户隐私保护指引内容介绍 | 微信开放文档 在这里配置和查看需要申请的接口。

2.需要在manifest.json中配置 "__usePrivacyCheck__": true,正式开始使用的时候不配置也是可以的。

小程序隐私信息授权wx.onNeedPrivacyAuthorization vue2+uniapp / vue3,uniapp,小程序,隐私授权,小程序

小程序隐私信息授权wx.onNeedPrivacyAuthorization vue2+uniapp / vue3,uniapp,小程序,隐私授权,小程序

3.封装一个组件方便后续在每一个用到隐私接口的页面中引入使用

  其中uniapp中注意button上使用的是@agreeprivacyauthorization来触发隐私授权方法

<template>
	<view class="privacy-box">
		<u-popup :show="show" @close="close" @open="open" :round="10">
			<view class="popup-box">
				<view class="">
					隐私指引弹窗
				</view>
				<view class="" @click="openPrivacyPolicy">
					在您使用xxx小程序前,请仔细阅读<text style="color: #2F74ED;">《xxxx隐私保护协议》</text>。
					如您同意《xxxxx隐私保护协议》,请点击“同意”,开始使用xxxx小程序。
				</view>
				<view class="btn-group">
					<button @click="refuse">拒绝</button>
					<button id="agree-btn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization" type="primary">同意</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

js部分直接在mounted中调用api即可

export default {
		data() {
			return {
				show: false
			}
		},
		mounted() {
			wx.onNeedPrivacyAuthorization(resolve => {
				console.log("done");
				// 需要用户同意隐私授权时
				// 弹出开发者自定义的隐私授权弹窗
				this.show = true
				this.resolvePrivacyAuthorization = resolve
			})
		},
		methods: {
			openPrivacyPolicy() {
				wx.openPrivacyContract()
			},
			handleAgreePrivacyAuthorization() {
				console.log("用户点击同意授权");
				this.resolvePrivacyAuthorization({
					buttonId: 'agree-btn',
					event: 'agree'
				})
				this.show = false
			},
			refuse() {
				this.show = false
				this.resolvePrivacyAuthorization({
					event: 'disagree'
				})
				console.log("不同意");
			},
			close() {
				this.show = false
			},
		}
	}

tips:如果到进入页面时候就调用授权位置信息,也不会和隐私授权弹窗冲突。这里会自动判断是否授权过隐私授权,先弹出隐私授权的弹窗后再弹出授权位置信息。同理获取手机号组件。

获取手机号和复制这种只有在用户点击的时候才会触发弹出隐私授权弹框。

另外获取用户昵称 input type=“nickname”无法触发隐私授权,可以通过wx.requirePrivacyAuthorize来辅助验证。

///以下vue3封装组件写法

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from "vue"
	import {
		paramasUserStore
	} from "@/store/params.js"
	const paramsStore = paramasUserStore()
	const {
		proxy
	} = getCurrentInstance()
	onMounted(() => {
		wx.onNeedPrivacyAuthorization(resolve => {
			console.log("done");
			// 需要用户同意隐私授权时
			// 弹出开发者自定义的隐私授权弹窗
			show.value = true
			proxy.resolvePrivacyAuthorization = resolve
		})
	})
	const show = ref(false)

	//跳转到隐私授权介绍页面
	function openPrivacyPolicy() {
		wx.openPrivacyContract()
	}

	function handleAgreePrivacyAuthorization() {
		console.log("用户点击同意授权");
		proxy.resolvePrivacyAuthorization({
			buttonId: 'agree-btn',
			event: 'agree'
		})
		show.value = false
	}

	function refuse() {
		proxy.resolvePrivacyAuthorization({
			event: 'disagree'
		})
		show.value = false
		console.log("不同意");
	}

	function close() {
		show.value = false
	}
</script>
.privacy-box {
		// width: 100%;
		// height: 540rpx;

		.popup-box {
			width: 94%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 auto;

			// justify-content: center;
			>view:first-child {
				font-size: 36rpx;
				font-weight: bold;
				color: #1AAD19;
				padding: 40rpx 0;
			}

			>view:nth-child(2) {
				text-indent: 40rpx;
				line-height: 60rpx;
				margin-bottom: 40rpx;
			}

			.btn-group {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;
				>button {
					width: 240rpx;
					height: 100rpx;
				}
			}
		}
	}

 

官方新增隐私弹窗功能

--不用开发者自己书写弹窗组件和逻辑,只需要在manifest.json中配置 "__usePrivacyCheck__": true即可启用。(目前最新项目本人使用该模式进行隐私授权的提示)

小程序隐私信息授权wx.onNeedPrivacyAuthorization vue2+uniapp / vue3,uniapp,小程序,隐私授权,小程序文章来源地址https://www.toymoban.com/news/detail-741478.html

到了这里,关于小程序隐私信息授权wx.onNeedPrivacyAuthorization vue2+uniapp / vue3的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序wx.getLocation 真机调试不出现隐私弹窗

            在小程序的开发过程中,首页中包含要获取用户地理位置的功能,所以在这里的onLoad()中调用了wx.getLocation(),模拟调试时一切正常,但到了真机环境中就隐私框就不再弹出,并且出现了报错,在打印之后发现getLocation的成功和失败均没有进行          (设置

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

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

    2024年02月08日
    浏览(54)
  • 微信小程序 wx.openSetting打开不显示,封装用户授权

            测试功能的时候,想要设置用户相册的功能,打开突然什么也没有,要么就是显示“个人信息与权限使用记录”,就连打印出来的 console.log(\\\"授权\\\",res.authSetting) 授权信息也是空的。         去社区翻回答都在扯皮,也没有准确的说法,只能去看文档了。 授权

    2024年02月14日
    浏览(84)
  • 微信小程序添加用户授权《隐私保护协议》

    官方文档:wx.onNeedPrivacyAuthorization(function listener) | 微信开放文档 微信小程序平台上需要进行隐私配置,审核成功后 大概半小时左右 才会生效。 小程序公众平台 --- 设置 --- 服务内容声明 --- 用户隐私保护指引(提交审核时,也会检测是否采集用户隐私,有用到隐私接口的话需

    2024年02月08日
    浏览(57)
  • uniapp新版微信小程序用户隐私协议授权

    manifest.json文件中进行配置 App.vue中配置 判断用户有没有进行过隐私授权 编写组件 使用组件

    2024年02月09日
    浏览(59)
  • 针对小程序wx.getUserProfile接口将被收回后做出的授权调整

    小程序文档中提出的调整说明 调整说明: 自 2022 年 10 月 25 日 24 时后(以下统称 “生效期” ),用户头像昵称获取规则将进行如下调整: 自生效期起,小程序 wx.getUserProfile 接口将被收回:生效期后发布的小程序新版本,通过 wx.getUserProfile 接口获取用户头像将统一返回默认

    2024年02月09日
    浏览(41)
  • 小程序隐私保护授权处理方式之弹窗组件

    欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 *分享一个使用比较久的🪜 小程序隐私保护授权弹窗组件 调用wx.getUserProfile进行授权时,返回错误信息:{errMsg: “getUserProfile:fail api scope is not declared in the privacy agreement”, errno: 112} 是因

    2024年02月10日
    浏览(45)
  • uniapp授权小程序隐私弹窗效果demo(整理)

    官方“小程序隐私协议开发指南”文档 1、开通调用微信接口-比如获取当前位置 2、更新隐私说明

    2024年02月09日
    浏览(42)
  • 微信小程序授权登录wx.getUserProfile获取不到昵称及头像解决方案

    半年前做的个小程序,更新了二个文字,重新上传审核通过,悲剧了,新用户的昵称全部变为微信用户,头像全部变为默认头像,查了半天代码没找到原因,相当头大,搜了一下文档,尴尬了,11月9号新更新的规则,不再返回昵称和头像值....需要用头像昵称获取能力去触发获

    2024年02月11日
    浏览(43)
  • 关于微信小程序用户隐私保护授权低耦合解决方案

    uniapp项目源码链接:https://download.csdn.net/download/sfsgtc/88404742 图片预览: 项目说明:         2023年8月10日微信官方发布《关于小程序隐私保护指引设置》的公告,从2023年9月15日起必须用户点击同意隐私保护政策并同步给微信之后,开发者才可以调用微信提供的隐私接口。

    2024年02月07日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包