Aperçu du popup de confidentialité :
1、Activation des fonctionnalités de confidentiailté dans manifest.json avec usePrivacyCheck : true
"mp-weixin" : {
"__usePrivacyCheck__" : true,
},
2、Création du composant
<template>
<view>
<!-- Popup de politique de confidentialité -->
<uni-popup ref="popup">
<view class="popup-wrap">
<view class="pop-title">Protection des données personnelles</view>
<view class="popup-txt">
Merci d'utiliser notre Mini Program. Avant de continuer, vous devez lire et accepter
<text class="blue-color" @click="handleOpenPrivacyContract">{{privacyContractName}}</text>
. En cliquant sur « Accepter et continuer », vous reconnaissez avoir compris et accepté les termes de ce contrat, qui aura une force obligatoire sur le plan juridique. Si vous refusez, vous ne pourrez pas utiliser les fonctionnalités du Mini Program.
</view>
<view class="popup-bot">
<button id="disagree-btn" type="default" @click="handleDisagree">Refuser</button>
<button id="agree-btn" type="primary" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">Accepter et continuer</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
name: "privacyPopup",
data() {
return {
privacyContractName: "" // Nom du contrat
};
},
mounted() {
this.checkPrivacy()
},
methods: {
// Vérification de l'autorisation
checkPrivacy() {
return new Promise((resolve,reject) => {
uni.getPrivacySetting({
success: res => {
if (res.needAuthorization) {
this.privacyContractName = res.privacyContractName;
this.$refs.popup.open('center')
} else {
resolve(res)
}
},
fail: (err) => {
reject(err)
}
})
})
},
// Fermeture du contrat
handleDisagree(e) {
this.$refs.popup.close()
},
handleAgreePrivacyAuthorization(res) {
// Callback lors de l'acceptation de la politique de confidentialité
// Après acceptation, toutes les interfaces et composants de confidentialité déclarés peuvent être utilisés
this.$refs.popup.close()
// Émission vers le composant parent
this.$emit("agreePrivacy")
},
handleOpenPrivacyContract() {
// Ouverture de la page de politique de confidentialité
uni.openPrivacyContract({
success: () => {}, // Succès
fail: () => {}, // Échec
complete: (res) => {
console.log(res, "openPrivacyContract complete");
}
})
},
}
}
</script>
<style lang="scss" scoped>
.popup-wrap {
width: 540upx;
box-sizing: border-box;
padding: 42upx;
background: white;
border-radius: 30upx;
.pop-title {
text-align: center;
font-size: 31upx;
color: #000;
font-weight: bold;
margin-bottom: 20upx;
}
.blue-color {
color: rgba(39, 152, 240, 1);
}
.popup-txt {
line-height: 48upx;
font-size: 28upx;
}
.popup-bot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30upx;
>button {
color: #FFF;
font-size: 26rpx;
font-weight: 500;
line-height: 80rpx;
width: 46%;
text-align: center;
height: 80rpx;
border-radius: 16rpx;
border: none;
background: #07c160;
}
>button:nth-of-type(1){
color: #07c160;
background: #f2f2f2;
}
}
}
</style>
3、Utilisation du composant
<privacyPopup @agreePrivacy="logique_exécutée_après_acceptation"></privacyPopup>
Extension :
Comme les autorisations de confidentialité peuvent être requises à différents endroits dans le Mini Program, l'importatino répétée du composant peut être fastidieuse. 1、Placer le compoasnt dans la page App.vue 2、Utiliser Vuex pour écouter globalement si une autorisation est nécessaire et utiliser une variable d'état Vuex pour déclencher l'affichage 3、Créer une fonction utilitaire pour vérifier si l'autorisation est nécessaire et mettre à jour le state Vuex en conséquence