使用wx.requirePrivacyAuthorize實現(xiàn)微信小程序用戶隱私保護。
一、前言
微信小程序官方公告《關于小程序隱私保護指引設置的公告》。不處理的話，會導致很多授權無法使用，比如頭像昵稱、獲取手機號、位置、訪問相冊、上傳圖片視頻、訪問剪切板內容等等，具體詳見《小程序用戶隱私保護指引內容介紹》?。
二、隱私相關設置
1、在?微信公眾平臺的【設置】- 【服務內容與聲明】?，設置用戶隱私保護指引，添加項目需要的接口權限。
ps：【用戶隱私保護指引】提交之后，官方會進行審核。審核通過之后，對應的接口權限才會生效。
比如：上傳頭像報錯如下。
chooseAvatar:fail api scope is not declared in the privacy agreement。
2、打開uniapp?項目的?manifest.json?，選擇【源碼視圖】， 添加配置如下配置
"mp-weixin": {
"__usePrivacyCheck__": true, //隱私政策
},
3、設置微信開發(fā)者工具的調試基礎庫，最低2.33.0
?
三、解決方案
1）驗證用戶是否已經(jīng)隱私授權
使用wx.requirePrivacyAuthorize()?接口，驗證用戶之前已經(jīng)同意過隱私授權
onReady() {
var _this = this;
// 隱私政策
wx.getPrivacySetting({
success: res => {
// 返回結果為: res = { needAuthorization: true/false, privacyContractName: '《xxx隱私保護指引》' }
console.log(res)
if (res.needAuthorization) {
// 需要彈出隱私協(xié)議
_this.$refs.privacy.privacyShow = true;
return;
} else {
// 用戶已經(jīng)同意過隱私協(xié)議，所以不需要再彈出隱私協(xié)議，也能調用隱私接口
}
},
fail: () => {},
complete:() => {}
})
},
?如果needAuthorization返回值為true，則需要用戶進行隱私授權。
2）index引入組件
<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 {
// 用戶已經(jīng)同意過隱私協(xié)議，所以不需要再彈出隱私協(xié)議，也能調用隱私接口
// 調用授權位置接口
_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('==獲取當前位置的經(jīng)緯度-成功==');
console.log(res);
_this.longitude = res.longitude;
_this.latitude = res.latitude;
// 設置經(jīng)緯度緩存
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,
});
// 根據(jù)經(jīng)緯度獲取所在位置
qqmapsdk.reverseGeocoder({
location: {
longitude: res.longitude,
latitude: res.latitude,
},
success: function(res) {
console.log("==根據(jù)經(jīng)緯度獲取所在位置==");
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('獲取當前位置的經(jīng)緯度-失敗');
// 設置默認城市、經(jīng)緯度
}
});
},
}
}
</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>。當您點擊同意并開始使用程序服務時，即表示您已理解并同意該條款內容，該條款將對您產(chǎn)生法律約束力。如您拒絕，將無法進入小程序。
</view>
<view class="privacyPost">
<view class="refuseBtn">
<navigator target="miniProgram" open-type="exit">不同意并退出</navigator>
</view>
<button class="agreeBtn" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="agreeClick">同意并繼續(xù)</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
// 隱私設置彈窗開關
privacyShow: false,
}
},
onReady() {
},
methods: {
// 打開隱私協(xié)議
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：彈窗組件框架，demo用的uView1版本。底層遮罩樣式，可自行用view代替。
4）彈窗效果圖
參考示例：悅玩悅樂自助棋牌室、快洗坊自助洗車。文章來源：http://www.zghlxwxcb.cn/news/detail-694185.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-694185.html
到了這里，關于uniapp微信小程序用戶隱私保護的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
