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 开发微信小程序时用户隐私协议的存放位置及实现方式 在 UniApp 中开发微信小程序时,用户隐私协议是一个非常重要的部分,尤其是在涉及敏感权限(如地理位置、摄像头等)的情况下。以下是关于用户隐私协议的具体说明: #### 隐私协议的存放位置 用户的隐私协议通常应存放在应用的设置页面或者独立的“关于我们”页面中。这种设计可以让用户随时查看并理解其数据是如何被使用的。具体来说,可以通过导航栏菜单项链接到一个专门展示隐私政策的页面。 对于微信小程序而言,开发者可以在 `pages.json` 文件中配置一个新的路由来指向隐私策略页: ```json { "path": "pages/privacyPolicy/privacyPolicy", "style": { "navigationBarTitleText": "隐私政策" } } ``` 此路径对应的是实际项目目录下的文件夹结构,例如 `/src/pages/privacyPolicy/index.vue` 或者类似的 Vue 组件形式[^1]。 #### 实现方式 为了向用户提供清晰透明的信息披露机制,需遵循以下原则和方法: 1. **显示隐私条款** 创建单独的一个 HTML 页面用于呈现完整的法律文档内容。利用 WXML 结合 WXSS 完成布局样式调整工作即可满足基本需求。 2. **弹窗提示初次访问者阅读同意书** 当应用程序启动运行期间检测尚未确认接受过最新版本通知的时候,则自动触发模态对话框询问是否继续操作前先审阅相关内容。可借助 WeUI 提供的标准组件库完成快速搭建任务。 3. **保存用户偏好设定记录** 使用 wx.setStorageSync 方法将最终决定状态持久化存储起来以便后续重复调用无需再次打扰正常流程体验过程[^2]。 下面给出一段简单的代码片段作为参考实例演示如何构建上述逻辑功能模块之一——即当首次进入某特定场景时提醒用户查阅隐私声明材料样本: ```javascript // app.js or page script file const hasAgreedPrivacy = uni.getStorageSync('has_agreed_privacy'); if (!hasAgreedPrivacy){ uni.showModal({ title:'重要提示', content:`本软件需要收集您的某些必要信息,请仔细阅读我们的<text style="color:#007AFF;" @click="navigateToPrivacy">《隐私保护指引》</text>`, success(res){ if (res.confirm){ // Mark user agreement status after confirmation. uni.setStorageSync('has_agreed_privacy', true); }else{ // Handle cancel action appropriately here... } }, }); } function navigateToPrivacy(){ uni.navigateTo({url:'/pages/privacyPolicy/privacyPolicy'}); } ``` 以上脚本实现了这样一个业务规则:如果发现当前会话不存在标记表明已经认可了相关条件约束的话,就会跳出警告消息告知详情地址;反之则不会有任何干扰行为发生。 另外值得注意的一点就是有关地理定位服务方面特别强调过的注意事项也要牢记心中以免触犯相关规定造成不必要的麻烦后果严重甚至可能导致整个账号永久冻结无法恢复正常使用权利等问题出现所以务必谨慎对待每一个细节环节处理妥当才行哦! --- ###
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值