小程序隐私协议保护指引接入(uniapp)

匍匐前进的小白

已于 2023-09-13 17:51:24 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序 uni-app

于 2023-09-13 17:49:59 首次发布

本文链接：https://blog.csdn.net/weixin_57605398/article/details/132857922

本文介绍了如何在微信小程序中更新用户隐私保护指引，包括配置API、使用开发者工具调整基础库版本、在manifest.json中启用隐私相关功能，并详细展示了隐私保护弹窗组件的代码实现和与隐私接口的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、需要在小程序后台更新用户隐私保护指引如图：

1.1.1、涉及到隐私协议的api：小程序用户隐私保护指引内容介绍 | 微信开放文档

1.1.2、官方文档：小程序隐私协议开发指南 | 微信开放文档

2、需要把开发者工具的基础库调整到2.33.0

3、需要在manifest.json中配置__usePrivacyCheck__: true,隐私相关功能都会启用。

4、代码如下：

4.1.1 隐私保护指引弹窗：文件名 privacy-popup

<template>
	<view>
		<view class="privacy-popup" v-show="showPrivacy"></view>
		
		<view :class="['popup', showPrivacy?'show':'']" 
		:style="{ 'height': popupHeight, 'max-height': popupMaxHeight,}">
			<!-- 头部 -->
			<view class="popup-header">
				<slot name="header"></slot>
			</view>
			
			<!-- 标题 -->
			<view class="title" v-if="title" >
				{{ title }}
			</view>
			<!-- 内容区域 -->
			<view class="" >
				<slot></slot>
			</view>
			
			<!-- 底部区域 -->
			<view class="popup-footer">
				<view class="relative">
					<view @click="openPrivacyContract">
					  在使用前请仔细阅读<text style="color: royalblue;">{{ privacyContractName }}</text>。
					</view> 
					
					<view >
					  当您点击同意即表示你已理解并同意该条款内容。如拒绝，将无法正常使用小程序。
					</view>
					
					<view class="flex justify-content-between" style="padding-bottom: 20rpx;">
						<view class=""></view>
							
						<view class="flex items-center">
							<view class="btn" @click="handleDisagreePrivacyAuthorization">
								<view class=""> 拒绝 </view>
							</view>
							
							<view class="" style="width: 40rpx;"></view>
							
							<button id="agree-btn" class="transparent-btn" open-type="agreePrivacyAuthorization" @click="handleAgreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">
								<view class="btn" style="width: 168rpx;height: 74rpx;">
									<view class=""> 允许 </view>
								</view>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		props: {
			popupHeight: {
				type: String,
				default: () => 'auto'
			},
			popupMaxHeight: {
				type: String,
				default: () => '1130rpx'
			},
			backgroundSize: {
				type: String,
				default: () => 'cover'
			},
			value: {
				type: Boolean,
				default: () => true
			},
		
			title: String,
		},
		data() {
			return {
				resolvePrivacyAuthorization: null,
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			// 兼容低版本
			console.log("wx.onNeedPrivacyAuthorization:....", wx.onNeedPrivacyAuthorization,)
			if (wx.onNeedPrivacyAuthorization) {
				// 需要用户同意隐私授权时
				wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
					console.log('触发本次事件的接口：' + eventInfo.referrer)
					this.resolvePrivacyAuthorization = resolve;
					this.$store.dispatch('SET_SHOW_PRIVACY');
				})
			}
			// #endif
		},
		
		computed: {
			privacyContractName() {
				return this.$store.getters.privacyContractName;
			},
			showPrivacy: {
				get() {
					return this.$store.getters.showPrivacy;
				},
				set(v) {
					this.$emit('input', v)
				},
			},
		},
		methods: {
			close() {
				this.showPrivacy = false
			},
			// 小程序隐私保护指引设置 相关方法 Start
			openPrivacyContract() {  
				wx.openPrivacyContract({  
				  success: (res) => {  
				  }  
				});  
			},  
			async handleAgreePrivacyAuthorization() {
				if(this.resolvePrivacyAuthorization) {
					// 告知平台用户已经同意，参数传同意按钮的id
					await this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
				}
				await this.$store.dispatch('SET_SHOW_PRIVACY', {
					handOper: true, // 是否主动操作
					isPrivacy: false,  // 是否关闭弹框
				});
			},  
			async handleDisagreePrivacyAuthorization() {
				if(this.resolvePrivacyAuthorization) {
					// 告知平台用户已经拒绝
					await this.resolvePrivacyAuthorization({ event: 'disagree' })
				};
				await this.$store.dispatch('SET_SHOW_PRIVACY', {
					handOper: true, // 是否主动操作
					isPrivacy: false,  // 是否关闭弹框
				});
			},
			// 小程序隐私保护指引设置 相关方法 End
		},
		options: {
			virtualHost: false,
		},
	}
</script>

<style scoped lang="scss">
	.privacy-popup {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 10000;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;

	.popup {
		left: 0;
		width: 100vw;
		background-color: #000;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		z-index: 10000;
		position: fixed;
		bottom: 0;
		transition: .3s all;
		transform: translateY(calc(100% + 100rpx));
		display: flex;
		flex-direction: column;
		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 auto; 
			font-size: 32rpx;
			color: #fff;
			height: 68rpx;
		}
	}

	.popup.show {
		transform: translateY(0%);
	}

	.popup-footer {
		position: relative;
		color: #fff;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		bottom: 0;
		padding: 30rpx;
		.btn{
			width: 168rpx;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			border-radius: 40rpx;
			font-size: 34rpx;
			color: #fff;
			background-color: royalblue;
		}
	}
}
</style>

4.1.2、文件store/modules/user.js

export const MUTATIONS = {
	SET_PRIVACY_SHOW: "SET_PRIVACY_SHOW", // 是否显示隐私保护指引弹窗
	SET_PRIVACY_NAME: "SET_PRIVACY_NAME", // 隐私保护指引名称由官方返回
};

export const ACTIONS = {
	SET_SHOW_PRIVACY: 'SET_SHOW_PRIVACY', // 隐私保护指引逻辑
}

export default {
   state: {
     showPrivacy: false, // 是否显示隐私保护指引弹窗
	 privacyContractName: '', // 隐私保护指引名称
   },
   
   getters: {
     showPrivacy: state => state.showPrivacy, // 是否显示隐私保护指引弹窗
	 privacyContractName: state => state.privacyContractName, // 隐私保护指引名称  
    
   },
   
   mutations: {
      // 是否显示隐私保护指引弹窗
	    [MUTATIONS.SET_PRIVACY_SHOW](state, data) {
	         state.showPrivacy = data;
	    },

	  // 隐私保护指引名称
		[MUTATIONS.SET_PRIVACY_NAME](state, data) {
			 state.privacyContractName = data;
		},
   },

   actions: {
      async [ACTIONS.SET_SHOW_PRIVACY](store, data){
			  // 兼容低版本
			  if(!wx.getPrivacySetting) {
				  return false;
			   }
				
				return new Promise(async (resolve, reject) => {
					if(data && data.handOper) {
						store.commit(MUTATIONS.SET_PRIVACY_SHOW, data.isPrivacy);
						return resolve(false);
					}else{
						// 小程序隐私保护指引
						wx.getPrivacySetting({
							success: res => {
								console.log("getPrivacySetting:", res)
                            // 返回结果为
// res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }

					store.commit(MUTATIONS.SET_PRIVACY_SHOW, res.needAuthorization);
					store.commit(MUTATIONS.SET_PRIVACY_NAME, res.privacyContractName);
								
								if (res.needAuthorization) {
									// 需要弹出隐私协议;
									return resolve(true);
								} else {
									// 用户已经同意过隐私协议，所以不需要再弹出隐私协议 
                                    // 也能调用已声明过的隐私接口
									return resolve(false);
								}
							},
							fail: () => {},
							complete: () => {}
						})
					}
				})
			
			},

   }

}

4.1.3、在有涉及到隐私api的页面调用 <privacy-popup></privacy-popup>组件

   <!-- #ifdef MP-WEIXIN -->
		<!-- 隐私保护指引弹窗 -->
         <privacy-popup  title="隐私协议声明" popupHeight="380rpx"></privacy-popup>
	<!-- #endif -->

5、比如点击复制api即可调用隐私保护指引弹窗（复制、获取手机号码等都为隐私api）