uniapp隐私协议的详情

目录

第一步，小程序官网中，填写你需要的授权的隐私协议

第二步，HBuilder X小程序中添加

第三步，第一种方法使用原生的隐私协议提示框，勾选使用原生的隐私协议提示框，自动生成androidPrivacy.json文件，内容如下

第一种方法自己写自定义的隐私协议提示框

使用wx.requirePrivacyAuthorize() 接口，验证用户之前已经同意过隐私授权

隐私协议组件userPrivacy.vue代码

---

获取用户信息，电话，qq,位置，相册，摄像头等都要用户授权《用户服务协议》或《隐私政策》

,如果用户拒绝，那么就获取不到用户的信息。

第一步，小程序官网中，填写你需要的授权的隐私协议

第二步，HBuilder X小程序中添加

第三步，第一种方法使用原生的隐私协议提示框，勾选使用原生的隐私协议提示框，自动生成androidPrivacy.json文件，内容如下

{
	"version": "1",
	"prompt": "template",
	"title": "服务协议和隐私政策",
	"message": "　　请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
	"buttonAccept": "同意并接受",
	"buttonRefuse": "暂不同意",
	"hrefLoader": "system",
	"backToExit": "false",
	"second": {
		"title": "确认提示",
		"message": "　　进入应用前，你需先同意<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>，否则将退出应用。",
		"buttonAccept": "同意并继续",
		"buttonRefuse": "退出应用"
	},
	"disagreeMode": {
		"support": false,
		"loadNativePlugins": false,
		"visitorEntry": false,
		"showAlways": false
	},
	"styles": {
		"backgroundColor": "#00FF00",
		"borderRadius": "5px",
		"title": {
			"color": "#ff00ff"
		},
		"buttonAccept": {
			"color": "#ffff00"
		},
		"buttonRefuse": {
			"color": "#00ffff"
		},
		"buttonVisitor": {
			"color": "#00ffff"
		}
	}
}

第一种方法自己写自定义的隐私协议提示框

使用wx.requirePrivacyAuthorize() 接口，验证用户之前已经同意过隐私授权

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:() => {}
	})

隐私协议组件userPrivacy.vue代码

<template>
	<view v-if="showPrivacy">
		<view class="privacy_box" >
			<view class="content">
				<view class="title">隐私保护指引</view>
				<view class="des">
					在使用当前小程序服务之前，请仔细阅读
					<text class="link" @click="openPrivacyContract">{{ privacyContractName }}</text>
					。如你同意{{ privacyContractName }}，请点击“同意”开始使用。
				</view>
				<view class="btns">
					<button class="item reject" @click="exitMiniProgram">拒绝</button>
					<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization">
						同意
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Privacy",
		data() {
			return {
				showPrivacy: false,
				privacyContractName: '',
			};
		},
		mounted() {
			var _this = this;
			// #ifdef MP-WEIXIN
            //获取用户的隐私设置信息
			wx.getPrivacySetting({
				success(res) {
					console.log(res)
					if (res.needAuthorization) {
						_this.privacyContractName = res.privacyContractName
						_this.showPrivacy = true
					}
				}
			})
			// #endif
		},
		methods: {
           //查看隐私协议
			openPrivacyContract() {
				// #ifdef MP-WEIXIN
				wx.openPrivacyContract({
					fail: () => {
						wx.showToast({
							title: '遇到错误',
							icon: 'error'
						})
					}
				})
				// #endif
			},
           //拒绝
			exitMiniProgram() {
				uni.exitMiniProgram()
			},
            //同意
			handleAgreePrivacyAuthorization() {
				this.showPrivacy = false
			}
		}
	}
</script>

<style lang="scss">
	.privacy_box {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999999;
		display: flex;
		align-items: center;
		justify-content: center;

		.content {
			width: 632rpx;
			padding: 48rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 16rpx;
		}

		.content .title {
			text-align: center;
			color: #333;
			font-weight: bold;
			font-size: 32rpx;
		}

		.content .des {
			font-size: 26rpx;
			color: #666;
			margin-top: 40rpx;
			text-align: justify;
			line-height: 1.6;
		}

		.content .des .link {
			color: #07c160;
			text-decoration: underline;
		}

		.btns {
			margin-top: 48rpx;
			display: flex;
		}

		.btns .item {
			justify-content: space-between;
			width: 244rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx;
			box-sizing: border-box;
			border: none;
		}

		.btns .item::after {
			border: 0;
		}

		.btns .reject {
			background: #f4f4f5;
			color: #909399;
		}

		.btns .agree {
			background: #3769FF;
			color: #fff;
		}
	}
</style>

合起来

<template>
	<view>
 
        <!-- 用户隐私保护指引弹窗租金 -->
        <UserPrivacy ref="privacy"></UserPrivacy>
 
	</view>
</template>
 
<script>
import UserPrivacy from "@/components/user/userPrivacy.vue";
 
export default {
    components: {
	    UserPrivacy
    },
	data() {
		return {
			
		}
	},
	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.showPrivacy= 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>