一、前言
微信小程序官方公告《關(guān)于小程序隱私保護指引設(shè)置的公告》
需要處理的隱私接口《插件用戶隱私保護說明內(nèi)容介紹》
二、注意事項
1.2023 年 9 月 15 號之前，默認不會啟用隱私相關(guān)功能，所以檢測不到需要彈窗的情況，可以在 manifest.json 中配置 "__usePrivacyCheck__": true 之后，接口才可以檢測到是否需要彈窗。
2.自動打開隱私保護指引界面需在「小程序管理后臺」配置《小程序用戶隱私保護指引》，官方《用戶隱私保護指引填寫說明》。注：每個用到的隱私接口(同一類型)都需要在后臺聲明，僅有聲明所處理的用戶信息，才可以調(diào)用平臺提供的對應(yīng)接口或組件。若未聲明，對應(yīng)接口或組件將直接禁用
3.微信開發(fā)者工具的調(diào)試基礎(chǔ)庫，最好大于2.33.0，推薦最新版本文章來源：http://www.zghlxwxcb.cn/news/detail-715100.html
三、解決方案
1.manifest.json配置
"mp-weixin": {
"appid": "**********",
"setting": {
"urlCheck": false,
"minified": true
},
"__usePrivacyCheck__": true,
.........2.app.vue中驗證
// app.vue
globalData: {
privacyContractName: '', //隱私協(xié)議的名字
showPrivacy: false //控制隱私彈窗顯隱
},
onLaunch(){
const that = this;
wx.getPrivacySetting({
success(res) {
console.log('是否需要授權(quán)：', res.needAuthorization, '隱私協(xié)議的名稱為：', res.privacyContractName);
if (res.needAuthorization) {
that.globalData.privacyContractName = res.privacyContractName;
that.globalData.showPrivacy = true;
} else {
that.globalData.showPrivacy = false;
}
}
});
}3.創(chuàng)建組件
// 組件privacyPopup.vue
<template>
<view class="privacy" v-if="showPrivacy">
<view class="content">
<view class="title">隱私保護指引</view>
<view class="des">
在使用當(dāng)前小程序服務(wù)之前，請仔細閱讀
<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>
</template>
<script>
export default {
name: 'privacyPopup',
data() {
return {
privacyContractName: '',
showPrivacy: false
};
},
created() {
setTimeout(() => {
this.showPrivacy = getApp().globalData.showPrivacy;
this.privacyContractName = getApp().globalData.privacyContractName;
}, 500);
},
methods: {
// 同意隱私協(xié)議
handleAgreePrivacyAuthorization() {
const that = this;
wx.requirePrivacyAuthorize({
success: res => {
that.showPrivacy = false;
getApp().globalData.showPrivacy = false;
}
});
},
// 拒絕隱私協(xié)議
exitMiniProgram() {
const that = this;
uni.showModal({
content: '如果拒絕,我們將無法獲取您的信息, 包括手機號、位置信息、相冊等該小程序十分重要的功能,您確定要拒絕嗎?',
success: res => {
if (res.confirm) {
that.showPrivacy = false;
uni.exitMiniProgram({
success: () => {
console.log('退出小程序成功');
}
});
}
}
});
},
// 跳轉(zhuǎn)協(xié)議頁面
// 在真機上點擊高亮的協(xié)議名字會自動跳轉(zhuǎn)頁面 微信封裝好的不用操作
openPrivacyContract() {
wx.openPrivacyContract({
fail: () => {
uni.showToast({
title: '網(wǎng)絡(luò)錯誤',
icon: 'error'
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.privacy {
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: 85vw;
padding: 50rpx;
box-sizing: border-box;
background: #fff;
border-radius: 16rpx;
.title {
text-align: center;
color: #333;
font-weight: bold;
font-size: 34rpx;
}
.des {
font-size: 26rpx;
color: #666;
margin-top: 40rpx;
text-align: justify;
line-height: 1.6;
.link {
color: #07c160;
text-decoration: underline;
}
}
.btns {
margin-top: 60rpx;
display: flex;
justify-content: space-between;
.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;
}
.reject {
background: #f4f4f5;
color: #909399;
}
.agree {
background: #07c160;
color: #fff;
}
}
}
}
</style>
4.使用
// index.vue
// 在頁面中直接引入使用就行 不需要任何多余操作
<template>
<view class="content">
<privacyPopup></privacyPopup>
<view>......</view>
</view>
</template>
<script>
import privacyPopup from '@/components/privacyPopup/privacyPopup.vue';
export default {
components: {
privacyPopup
},
}
</script>5.效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-715100.html
到了這里，關(guān)于uniapp微信小程序用戶隱私保護通用組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
