目录
第三步,第一种方法使用原生的隐私协议提示框,勾选使用原生的隐私协议提示框,自动生成androidPrivacy.json文件,内容如下
使用wx.requirePrivacyAuthorize() 接口,验证用户之前已经同意过隐私授权
获取用户信息,电话,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>