uniapp se adapta a la guía de desarrollo del protocolo de privacidad WeChat [uniapp+vue3+js]

No he hecho mucho uniapp, así que encontré algunos artículos y lo hice, y me gustaría compartirlo con ustedes.

Guía de desarrollo de protocolos de privacidad que debe adaptarse a WeChat después del 15.9.2023

La declaración actual de uniapp es Guía de desarrollo del acuerdo de privacidad del programa WeChat Mini | sitio web oficial de uni-app

Mini programa WeChat Guía de desarrollo del acuerdo de privacidad del mini programa | Documentos abiertos de WeChat

WeChat ofrece oficialmente varias demostraciones

Demostración de ejemplo completa

demo1: demuestra el uso  wx.getPrivacySetting y  <button open-type="agreePrivacyAuthorization"> procesamiento de la lógica emergente de privacidad en la página de inicio  https://developers.weixin.qq.com/s/gi71sGm67hK0

demo2: demuestra el uso  wx.onNeedPrivacyAuthorization y  <button open-type="agreePrivacyAuthorization"> procesamiento de la lógica de la ventana emergente de privacidad en varias páginas y también demuestra cómo manejar llamadas simultáneas a múltiples interfaces de privacidad. https://developers.weixin.qq.com/s/hndZUOmA7gKn

demo3 : demuestra  cómo usar wx.onNeedPrivacyAuthorization,  y   componentes juntos  https://developers.weixin.qq.com/s/jX7xWGmA7UKawx.requirePrivacyAuthorize<button open-type="agreePrivacyAuthorization"><input type="nickname">

Demostración 4: demuestra el uso  wx.onNeedPrivacyAuthorization y  <button open-type="agreePrivacyAuthorization"> procesamiento de la lógica de la ventana emergente de privacidad en varias páginas de la barra de pestañas  https://developers.weixin.qq.com/s/g6BWZGmt7XK9

Este método es demo2: monitoree cuándo se llama a la interfaz de privacidad y luego abra una ventana emergente de privacidad, que obstaculizará la autorización de la interfaz de privacidad (como autorizar el número de teléfono móvil, la ubicación geográfica, etc.) , y no continuará hasta que haga clic en consentimiento/rechazo de la ventana emergente de privacidad.

Si se rechaza la ventana emergente de autorización de privacidad, no habrá ninguna autorización que no haya aparecido en la autorización de WeChat en este momento.

Eso es

wx.getSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

Es imposible obtener el valor del cuadro emergente que no muestra la autorización de privacidad. Esta interfaz de privacidad no constituye consentimiento o rechazo .

Antes del desarrollo, debe agregar la interfaz de privacidad utilizada en el fondo de administración del mini programa: Configuración-Configuración básica-Declaración de contenido del servicio-Pautas de protección de la privacidad del usuario

 

Entrará en vigor sólo después de su aprobación. 

1. Agregue  "__usePrivacyCheck__": verdadero,

uniapp se puede agregar en manifest.json o compilado en dist/mp-weixin/app.json

 "permission": {
    "scope.userLocation": {
      "desc": "将获取你的具体位置信息"
    }
  },
  "requiredPrivateInfos": [
    "getLocation"
  ],
  "__usePrivacyCheck__": true,
  "usingComponents": {}

2. Agregue getPrivacy.js

const PrivacyProtocol = {
    needAuthorization: false, 
    privacyContractName: ''
}
//获取微信侧同步的用户隐私协议开关
  export function checkUserPrivacyProtocol() {
    if (wx.getPrivacySetting) {
        wx.getPrivacySetting({
            success: (res) => {
                console.log('协议显示的值',res)
                PrivacyProtocol.needAuthorization = res.needAuthorization
                if (res.needAuthorization) {
                    // 需要弹出隐私协议  
                    PrivacyProtocol.privacyContractName = res.privacyContractName
                }
                uni.setStorageSync("PrivacyProtocol", PrivacyProtocol);
            }
        })
    }
}

3. Utilizado en OnLunch de App.vue

Después de introducir checkUserPrivacyProtocol de getPrivacy.js

onLaunch() {
        checkUserPrivacyProtocol();
    },

4. Cree un nuevo componente Privacy.vue

<template>
    <div>
        <div v-if="showPrivacyPopup" class="popup-container">
            <div class="popup-content">
                <div class="popup-header">{
   
   { AppName }} 申请</div>
                <div class="popup-center">
                    在你使用服务之前，请仔细阅读
                    <span
                        class="privacy-link"
                        @click="onClickPrivacyPopupTitle"
                    >
                        {
   
   { PrivacyProtocol.privacyContractName }}
                    </span>
                    。如果你同意，请点击“允许”开始使用。
                </div>
                <div class="button-container">
                    <button @click="handleRefusePrivacyAuthorization">
                        拒绝
                    </button>
                    <button
                        id="agree-btn"
                        class="btn-agree"
                        open-type="agreePrivacyAuthorization"
                        @agreeprivacyauthorization="
                            handleAgreePrivacyAuthorization
                        "
                    >
                        允许
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

let resolvePrivacyAuthorization;

const showPrivacyPopup = ref(false); // 是否需要弹出协议授权
const PrivacyProtocol = ref(uni.getStorageSync("PrivacyProtocol"));
const AppName = ref('小程序名字')
// 打开弹窗
const openPrivacyPopup = () => {
    showPrivacyPopup.value = true;
    console.log("PrivacyProtocol", PrivacyProtocol);
};

// 关闭弹窗
const closePrivacyPopup = () => {
    showPrivacyPopup.value = false;
};

// 用户点击同意
const handleAgreePrivacyAuthorization = () => {
    console.log("点击了同意");
    resolvePrivacyAuthorization({
        buttonId: "agree-btn",
        event: "agree"
    });
    closePrivacyPopup();
};

// 用户点击拒绝
const handleRefusePrivacyAuthorization = () => {
    console.log("点击了拒绝", resolvePrivacyAuthorization);
    resolvePrivacyAuthorization({
        event: "disagree"
    });
    // 关闭弹窗
    closePrivacyPopup();
    uni.showToast({
        title: "未同意授权，请重试",
        icon: "none",
        duration: 2500
    });
};

// 打开隐私协议
const onClickPrivacyPopupTitle = () => {
    wx.openPrivacyContract({
        success: () => {
            console.log("已打开");
        } // 打开成功
    });
};

// 监听调用微信api的函数
const saveWXCallBack = () => {
    console.log('111111111');
    if (wx.onNeedPrivacyAuthorization) {
        wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
            // 真机/预览可以拿到eventInfo，模拟器undefined
            console.log("调用接口/组件：", eventInfo);
            openPrivacyPopup();
            resolvePrivacyAuthorization = resolve;
        });
    }
};

onLoad(async () => {
    await saveWXCallBack();
    
});
</script>

<style scoped>
.popup-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 10000;
}

.popup-content {
    background-color: white;
    padding: 40rpx;
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    text-align: left;
}

.popup-header {
    font-size: 26rpx;
    margin-bottom: 20rpx;
}

.popup-center {
    font-size: 30rpx;
}
.privacy-link {
    color: #3478f7;
    cursor: pointer;
}

.button-container {
    display: flex;
    margin-top: 40rpx;
}

button {
    width: 200rpx;
    height: 70rpx;
    text-align: center;
    line-height: 70rpx !important;
    font-size: 28rpx;
    color: #101010;
    border: 1px solid #eee;
    cursor: pointer;
}

.btn-agree {
    background-color: rgb(7, 193, 96);
    color: #fff;
}
</style>

5. Utilice este componente en la página que llama a la interfaz de privacidad.

import privacy from "@/pages/components/privacy.vue";

<privacy  />

Al renderizar, la ventana emergente se muestra en la parte inferior, similar a la ventana emergente de autorización predeterminada de WeChat. Después de hacer clic en Permitir, aparecerá la ventana emergente de autorización API de WeChat. Si hace clic en No, no habrá nada.