uniapp 微信小程序添加隐私保护指引

隐私弹窗:

1. 启用隐私相关功能在manifest.json文件中配置 __usePrivacyCheck__: true

"mp-weixin" : {
        "__usePrivacyCheck__" : true,
    },

2. 创建组件:

<template>
	<view>
		<!-- 隐私政策弹窗 -->
		<uni-popup ref="popup">
			<view class="popupWrap">
				<view class="popupTxt">
					在您使用【最美万年历】之前,请仔细阅读<text class="blueColor"
						@click="handleOpenPrivacyContract">{{privacyContractName}}</text>。如您同意{{privacyContractName}},请点击“同意”开始使用【最美万年历】。
				</view>
				<view class="popupBot">
					<button id="disagree-btn" type="default" @click="handleDisagree">拒绝</button>
					<button id="agree-btn" type="primary" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "privacyPopup",
		data() {
			return {
				privacyContractName: "" //协议名称
			};
		},
		mounted() {
			wx.getPrivacySetting({
				success: res => {
					console.log("是否需要授权:", res, res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
					if (res.needAuthorization) {
						this.privacyContractName = res.privacyContractName;
						this.$refs.popup.open('center')
					}
				},
				fail: () => {},
				complete: () => {},
			})
		},
		methods: {
			handleDisagree(e) {
				this.$refs.popup.close()
			},
			handleAgreePrivacyAuthorization(res) {
				// 用户同意隐私协议事件回调
				// 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了
				this.$refs.popup.close()
                //通知父组件
				this.$emit("agreePrivacy")
				console.log(res, "handleAgreePrivacyAuthorization");
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: (res) => {
						console.log(res, "openPrivacyContract complete");
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.popupWrap {
		width: 540rpx;
		box-sizing: border-box;
		padding: 42rpx;
		background: white;
		border-radius: 30rpx;

		.blueColor {
			color: rgba(39, 152, 240, 1);
		}

		.popupTxt {
			line-height: 48rpx;
		}

		.popupBot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 30rpx;
		}
	}
</style>

2. 在需要授权的页面引入改组件

例:

<privacyPopup @agreePrivacy="执行同意协议后的逻辑"></privacyPopup>

PS:

也可使用获取手机号和隐私政策藕合方式 ,这样在用户拒绝隐私协议后 ,再次点击授权手机号 可继续弹出授权弹窗,直至用户同意协议为止

<button id="agree-btn" type="primary" 
open-type="getPhoneNumber|agreePrivacyAuthorization" 
@getphonenumber="handleBindPhone"	
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>

 官方文档入口:

 小程序隐私协议开发指南 | 微信开放文档

UniApp 开发微信小程序时,实现隐私保护指引的直接弹窗样式通常涉及自定义组件和微信小程序提供的 API。以下是实现方式的具体说明: ### 弹窗结构设计 在页面的 `template` 中,可以使用类似 `uni-popup` 的组件来构建弹窗结构。该组件可以灵活控制弹窗的显示样式和行为,例如禁止遮罩点击关闭功能,确保用户必须进行操作。以下是一个典型的弹窗结构示例: ```html <uni-popup ref="uPopup" :mask-click="false" type="center"> <view class="agreement-view" :style="{ width: scrollWidth * 0.80 + 'px', height: scrollHeight * 0.70 + 'px' }"> <!-- 弹框提示头 --> <view class="u-text-center">用户使用须知</view> <scroll-view scroll-y class="agreement-content" :style="{ height: (scrollHeight - 110) * 0.70 + 'px' }"> 您描述的内容 </scroll-view> <view class="agreement-btns" :style="{ height: (scrollHeight*0.7 - (scrollHeight - 120) * 0.70) - 42 + 'px' }"> <navigator class="no-btn text" target="miniProgram" open-type="exit">暂不使用</navigator> <view class="yse-btn text" @tap="admit">同意</view> </view> </view> </uni-popup> ``` 该弹窗包含标题、可滚动的内容区域和两个操作按钮(“暂不使用”和“同意”)。弹窗的宽度和高度通过动态计算设置,以适配不同屏幕尺寸 [^2]。 ### 弹窗的触发逻辑 在页面的 `script` 部分,可以通过调用微信小程序的 `wx.getPrivacySetting` API 来获取用户的隐私协议设置状态,并根据结果决定是否显示弹窗。以下是一个简单的逻辑示例: ```javascript onLoad() { const that = this; wx.getPrivacySetting({ success(res) { if (!res.hasPrivacyAuthorized) { // 如果用户尚未同意隐私协议,则显示弹窗 that.$refs.uPopup.open(); } } }); } ``` 上述代码在页面加载时检查用户的隐私协议状态,如果用户尚未同意,则通过 `uni-popup` 的 `open` 方法显示弹窗 [^1]。 ### 自定义组件引入 为了提高代码的复用性,可以将隐私协议弹窗封装为一个自定义组件,并在需要的页面中引入。例如,定义一个名为 `privacy-popup.vue` 的组件,并在页面中通过以下方式引入: ```html <template> <popup ref="privacyComponent" position="bottom" /> </template> <script setup> import popup from '/components/privacy-popup.vue' </script> ``` 通过这种方式,可以实现弹窗样式的统一管理,并简化页面代码 [^3]。 ### 样式与交互优化 弹窗的样式可以通过 CSS 进行定制,例如调整边距、字体大小和按钮样式,以匹配小程序的整体风格。同时,可以为按钮绑定点击事件,实现用户操作后的逻辑处理(如跳转页面或关闭弹窗)。 ### 总结 通过结合 `uni-popup` 组件、微信小程序隐私协议 API 和自定义组件的设计,可以高效实现隐私保护指引的直接弹窗样式。这种方式不仅灵活,而且能够适配不同场景下的需求。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值