Die neueste Version des Popup-Fensters der neuen Version der Datenschutzvereinbarung des WeChat-Applets
1. Das WeChat-Miniprogramm wurde erneut aktualisiert
Aktualisiert am 22.08.2023: [Originallink]
Schnittstellen wie getPrivacySetting, onNeedPrivacyAuthorization und requirePrivacyAuthorize, die an den folgenden Richtlinien beteiligt sind, können jetzt normal debuggt werden. Debugging-Anweisungen:
- Vor dem 15. September 2023 werden nach der Konfiguration in app.json
__usePrivacyCheck__: truedatenschutzbezogene Funktionen aktiviert. Wenn sie nicht konfiguriert oder auf „false“ konfiguriert sind, werden sie nicht aktiviert. __usePrivacyCheck__Nach dem 15. September 2023 werden datenschutzbezogene Funktionen aktiviert , unabhängig davon, ob eine Konfiguration in app.json vorliegt . uniapp muss „ usePrivacyCheck „: true in manifest.json hinzufügen
"mp-weixin" : {
"appid" : "wx4xxxxxxxxa5c",
"__usePrivacyCheck__": true
},
Wenn die folgenden Schnittstellen beteiligt sind, muss ein Popup-Fenster mit Datenschutzvereinbarung hinzugefügt werden
| Informationen verarbeitet | Schnittstelle oder Komponente |
|---|---|
| Sammeln Sie Ihren Spitznamen und Avatar | ,, wx.getUserInfo (recycelt), wx.getUserProfile (recycelt), (recycelt) |
| Sammeln Sie Ihre Standortinformationen | wx.authorize({scope:'scope.userLocation'})、wx.authorize({scope: 'scope.userLocationBackground'})、wx.authorize({scope: 'scope.userFuzzyLocation'})、wx.getLocation、wx .startLocationUpdate、wx.startLocationUpdateBackground、wx.getFuzzyLocation |
| Sammeln Sie Standortinformationen Ihrer Wahl | wx.choosePoi、wx.chooseLocation |
| Sammeln Sie Ihre Adresse | wx.chooseAddress |
| Sammeln Sie Ihre Rechnungsinformationen | wx.chooseInvoiceTitle、wx.chooseInvoice |
| Sammeln Sie Ihre WeChat-Übungsschritte | wx.authorize({scope: 'scope.werun'})、wx.getWeRunData |
| Sammeln Sie Ihre Mobiltelefonnummer | 、 |
| Sammeln Sie Ihr Kfz-Kennzeichen | wx.chooseLicensePlate |
| Sammeln Sie Informationen zu den von Ihnen ausgewählten Fotos oder Videos | wx.chooseImage、wx.chooseMedia、wx.chooseVideo |
| Sammeln Sie Ihre ausgewählten Dateien | wx.chooseMessageFile |
| Zugriff auf Ihr Mikrofon | wx.authorize({scope: 'scope.record'})、wx.startRecord、RecorderManager.start、、wx.joinVoIPChat |
| Greifen Sie auf Ihre Webcam zu | wx.authorize({scope: 'scope.camera'})、wx.createVKSession、、、 |
| Greifen Sie auf Ihr Bluetooth zu | wx.authorize({scope: 'scope.bluetooth'})、wx.openBluetoothAdapter、wx.createBLEPeripheralServer |
| Verwenden Sie Ihre Albumberechtigungen (nur Schreiben). | wx.authorize({scope: 'scope.writePhotosAlbum'})、wx.saveImageToPhotosAlbum、wx.saveVideoToPhotosAlbum |
| Verwenden Sie Ihre Adressbuchberechtigungen (nur Schreiben). | wx.authorize({scope: 'scope.addPhoneContact'})、wx.addPhoneContact |
| Verwenden Sie Ihre Kalenderberechtigungen (nur Schreiben). | wx.authorize({scope: 'scope.addPhoneCalendar'})、wx.addPhoneRepeatCalendar、wx.addPhoneCalendar |
| Rufen Sie Ihren Beschleunigungsmesser an | wx.stopAccelerometer, wx.startAccelerometer, wx.onAccelerometerChange, wx.offAccelerometerChange |
| Rufen Sie Ihren Magnetfeldsensor auf | wx.stopCompass, wx.startCompass, wx.onCompassChange, wx.offCompassChange |
| Rufen Sie Ihren Orientierungssensor an | wx.stopDeviceMotionListening, wx.startDeviceMotionListening, wx.onDeviceMotionChange, wx.offDeviceMotionChange |
| Rufen Sie Ihren Gyrosensor an | wx.stopGyroskop、wx.startGyroskop、wx.onGyroskopÄnderung、wx.offGyroskopÄnderung |
| Lesen Sie Ihre Zwischenablage | wx.setClipboardData、wx.getClipboardData |
2. Umsetzungsideen
- Überprüfen Sie beim Initialisieren und Aufrufen des Miniprogramms zunächst, ob der Benutzer die Datenschutzvereinbarung autorisiert hat. Wenn keine Autorisierung vorliegt, wird ein Popup-Fenster mit der Datenschutzvereinbarung für die Benutzerautorisierung angezeigt.
- Der Benutzer klickt, um die Autorisierung zu bestätigen und kann das Miniprogramm normal verwenden.
- Wenn der Benutzer die Autorisierung storniert und auf die Funktion klickt, für die eine Autorisierung erforderlich ist, z. B. auf die Schaltfläche zum Abrufen der Mobiltelefonnummer, auf die Schaltfläche zum Einschalten von Bluetooth und auf die Funktion, die die Privatsphäre des Benutzers betrifft, wird das Fenster erneut angezeigt um es dem Benutzer zu ermöglichen, die Autorisierung zu bestätigen, bevor er die entsprechende Funktion nutzt. Andernfalls können Sie nur Seiten durchsuchen und die Funktionen des Miniprogramms nicht nutzen.
- Der Name und der Inhalt der Datenschutzvereinbarung werden über die WeChat-Schnittstelle abgerufen.
Rufen Sie die Benutzeroberfläche für den Namen der Datenschutzvereinbarung ab
uni.getPrivacySetting({
success: res => {
console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
},
fail: () => {
},
complete: () => {},
})
Die Schnittstelle zum Abrufen von Datenschutzvereinbarungsinhalten lautet wie folgt: Durch Aufrufen dieser Methode wird automatisch die Seite mit den Datenschutzvereinbarungsdetails aufgerufen.
openYsXyDetail(){
uni.openPrivacyContract({});
},
- Wenn es sich um ein natives Applet handelt, müssen Sie in der folgenden Codeimplementierung nur alle uni. durch wx. ersetzen, um es zu verwenden.
3. Ergebnisse erzielen
Wenn der Benutzer das Miniprogramm initialisiert und aufruft, wird ein Autorisierungsfenster angezeigt. Wenn der Benutzer auf die Anmeldeschaltfläche klickt, wird dieses Fenster auch angezeigt, wenn der Benutzer nicht autorisiert ist.
4. Code-Implementierung
<template>
<view class="login-page">
<!-- 当用户点击授权同意隐私协议后才可以正常点击登录按钮获取手机号码-->
<button open-type="getPhoneNumber" @getphonenumber="authPhone" v-if="ysxy.agree">
<u-icon name="fingerprint" color="#2979ff" size="68"></u-icon>
</button>
<!-- 当用户未授权同意意思协议时，打开授权隐私协议的弹窗，否则无法登录系统-->
<button v-else @click="ysxy.show = true">
<u-icon name="fingerprint" color="#2979ff" size="68"></u-icon>
</button>
<u-modal v-model="ysxy.show" :negative-top="200" title="用户隐私提示保护" :show-confirm-button="false"
:mask-close-able="true">
<view class="slot-content" >
<view class="ysbox">
感谢您使用本产品，您使用本产品前应当仔细阅读并同意<span @click="openYsXyDetail" class="ysname">{
{ ysxy.name }}</span>
当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法更好的体验产品。
</view>
<div class="auth-btncard">
<div class="btn-unok">
<u-button :hair-line='false' :custom-style="customStyleUnOk" @click="ysxy.show=false">
拒绝</u-button>
</div>
<div class="btn-ok">
<u-button :hair-line='false' :custom-style="customStyleOk" open-type="agreePrivacyAuthorization"
@click="ysxy.show=false;ysxy.agree=true;"> 同意</u-button>
</div>
</div>
</view>
</u-modal>
</view>
</template>
<script>
import global from "../../common/utils/global";
export default {
data() {
return {
ysxy:{
show:false,
name:'《小程序隐私保护指引》',
agree:false
},
customStyleOk: {
marginTop: '20rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
border: 'none',
color: '#157DFB'
},
customStyleUnOk: {
marginTop: '20rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
border: 'none',
color: 'gray'
},
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.initYsxy();
//#endif
},
methods: {
openYsXyDetail(){
uni.openPrivacyContract({});
},
initYsxy(){
this.ysxy.agree = false;
let _this=this;
if (uni.getPrivacySetting) {
uni.getPrivacySetting({
success: res => {
console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
if (res.needAuthorization) {
_this.ysxy.name = res.privacyContractName
_this.ysxy.show = true;
} else {
//已经同意了
_this.ysxy.agree = true;
}
},
fail: () => {
},
complete: () => {},
})
}
},
}
}
</script>
<style lang="scss" scoped>
.ysbox{
margin: 40rpx;
.ysname{
color: #157DFB;
}
}
.auth-btncard {
.btn-unok {
width: 50%;
float: left;
}
.btn-ok {
width: 50%;
float: left;
margin: 0;
padding: 0;
border: 0px solid transparent; //自定义边框
outline: none; //消除默认点击蓝色边框效果
u-button {
margin: 0;
padding: 0;
border: 0px solid transparent; //自定义边框
outline: none; //消除默认点击蓝色边框效果
}
}
}
</style>