Всплывающий компонент защиты конфиденциальности пользователя апплета uniapp WeChat

Используйте wx.requirePrivacyAuthorize для реализации защиты конфиденциальности пользователей апплета WeChat.

Введение

Официальное объявление мини-программы WeChat «Объявление об установлении правил защиты конфиденциальности для мини-программ» . Если их не обработать, многие авторизации станут непригодными для использования, например, псевдоним аватара, получение номера мобильного телефона, местоположение, доступ к фотоальбомам, загрузка фотографий и видео, доступ к содержимому буфера обмена и т. д. Подробную информацию см. в разделе «Введение в пользователя мини-программы». Рекомендации по защите конфиденциальности»  .

2. Настройки конфиденциальности

1. На  общедоступной платформе WeChat установите 【设置】- 【服务内容与声明】 правила защиты конфиденциальности пользователей и добавьте разрешения интерфейса, необходимые проекту.

ps: [Руководство по защите конфиденциальности пользователей ] После отправки официальный представитель рассмотрит его. Только после прохождения проверки соответствующие разрешения интерфейса вступят в силу.

Например: Сообщение об ошибке при загрузке аватара выглядит следующим образом.

ChooseAvatar:fail область API не заявлена ​​в соглашении о конфиденциальности。

2. Откройте uniapp проект  manifest.json , выберите [ 源码视图] и добавьте следующую конфигурацию:

"mp-weixin": {
    "__usePrivacyCheck__": true, //隐私政策
 },

3. Установите как минимум базовую библиотеку отладки инструментов разработчика WeChat.2.33.0

 

3. Решение

1) Проверьте, есть ли у пользователя разрешение на конфиденциальность.

Используйте интерфейс wx.requirePrivacyAuthorize(), чтобы убедиться, что пользователь ранее согласился на авторизацию конфиденциальности.

onReady() {
	var _this = this;
			
	// 隐私政策
	wx.getPrivacySetting({
		success: res => {
			// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
			console.log(res)
			if (res.needAuthorization) {
				// 需要弹出隐私协议
				_this.$refs.privacy.privacyShow = true;
				return;
			} else {
				// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
			}
		},
		fail: () => {},
		complete:() => {}
	})
},

 Если возвращаемое значение потребностиAuthorization истинно, пользователю необходимо выполнить авторизацию конфиденциальности.

2) Индекс представляет компоненты

<template>
	<view>

        <!-- 用户隐私保护指引弹窗租金 -->
        <UserPrivacy ref="privacy"></UserPrivacy>

	</view>
</template>

<script>
import UserPrivacy from "@/components/user/userPrivacy.vue";

export default {
    components: {
	    UserPrivacy
    },
	data() {
		return {
			// 隐私设置弹窗开关
			privacyShow: false,
		}
	},
	onReady() {
		var _this = this;
		// #ifdef MP-WEIXIN
		// 隐私政策
		wx.getPrivacySetting({
		    success: res => {
				// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
				console.log(res)
				if (res.needAuthorization) {
					// 显示用户隐私组件弹窗
					_this.$refs.privacy.privacyShow = true;
					return;
				} else {
					// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
                    // 调用授权位置接口
                    _this.getLocation();
				}
			},
			fail: () => {},
			complete:() => {}
		})
		// #endif,
	methods: {
        // 获取当前位置
		getLocation() {
			let _this = this;
			var mapkey = uni.getStorageSync('webConfig').web_config_str.mapkey;
			uni.getFuzzyLocation({
				type: 'gcj02', //国测局坐标gcj02
				geocode: true, //是否解析地址信息，仅App平台支持
				isHighAccuracy: true, //开启高精度定位
				success(res) {
					console.log('==获取当前位置的经纬度-成功==');
					console.log(res);

					_this.longitude = res.longitude;
					_this.latitude = res.latitude;

					// 设置经纬度缓存
					uni.setStorageSync('longitude', res.longitude);
					uni.setStorageSync('latitude', res.latitude);

					// 引入腾讯地图SDK核心类
					var QQMapWX = require('@/util/qqmap-wx-jssdk.min.js');
					var qqmapsdk = new QQMapWX({
						key: mapkey,
					});

					// 根据经纬度获取所在位置
					qqmapsdk.reverseGeocoder({
						location: {
							longitude: res.longitude,
							latitude: res.latitude,
						},
						success: function(res) {
							console.log("==根据经纬度获取所在位置==");
							console.log(res);
							_this.city = res.result.ad_info.city;

							// 设置城市缓存
							uni.setStorageSync('province', res.result.ad_info.province);
							uni.setStorageSync('city', res.result.ad_info.city);
							uni.setStorageSync('district', res.result.ad_info.district);
							uni.setStorageSync('address', res.result.address);

							}
						});
					},
				fail(err) {
					console.log('获取当前位置的经纬度-失败');
                    // 设置默认城市、经纬度
				}
			});
		},
	}
}
</script>

3) Код компонента всплывающего окна

<template>
	<view>

		<!-- 隐私保护指引弹窗 -->
		<u-popup v-model="privacyShow" mode="center" width="600rpx" border-radius="20" :mask-close-able="false">
			<view class="privacyBox">
				<view class="privacyTit">用户隐私保护提示</view>
				<view class="privacyDesc">
					感谢您的使用，在使用本小程序前，应当阅读并同意<text
						@click="openClick">《用户隐私保护指引》</text>。当您点击同意并开始使用程序服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。
				</view>
				<view class="privacyPost">
					<view class="refuseBtn">
						<navigator target="miniProgram" open-type="exit">不同意并退出</navigator>
					</view>
					<button class="agreeBtn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="agreeClick">同意并继续</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 隐私设置弹窗开关
				privacyShow: false,
			}
		},
		onReady() {

		},
		methods: {
			// 打开隐私协议
			openClick() {
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			
			// 同意
			agreeClick() {
				// 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
				this.privacyShow = false;
				
				// 重新授权定位，调取父组件方法
				this.$parent.getLocation();
			},

		}
	}
</script>

<style scoped lang="scss">
	.privacyBox {
		width: 600rpx;
		padding: 60rpx;
		box-sizing: border-box;
	}

	.privacyTit {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-text-main;
		text-align: center;
		overflow: hidden;
	}

	.privacyDesc {
		font-size: 28rpx;
		color: $uni-text-sub;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.privacyDesc text {
		color: $uni-primary;
	}

	.privacyPost {
		overflow: hidden;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.privacyPost .refuseBtn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		background: $uni-info-dark;
		border-radius: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.privacyPost .agreeBtn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		background: $uni-primary;
		border-radius: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-left: 20rpx;
	}
</style>

 ps: Структура всплывающих компонентов, версия uView1 используется для демонстрации. Базовый стиль маски можно заменить представлением.

4) Рендеринг всплывающих окон

Справочные примеры: шахматный и карточный зал самообслуживания Yuewanyule, автомойка самообслуживания Kuaishifang.