uniapp は WeChat プライバシープロトコル開発ガイドに適合 [uniapp+vue3+js]

ユニアプリはあまりやったことがなかったので、記事を見つけて作ってみたのでシェアしたいと思います。

2023.9.15 以降に WeChat に適合させる必要があるプライバシープロトコル開発ガイド

uniapp からの現在の声明はWeChat ミニプログラムプライバシー規約開発ガイド | uni-app 公式ウェブサイト

WeChat ミニプログラムミニプログラムプライバシー契約開発ガイド | WeChat オープンドキュメント

WeChatは公式にいくつかのデモを提供しています

完全なサンプルデモ

デモ 1:ホームページでのプライバシーポップアップロジックの使用 wx.getPrivacySetting と処理をデモンストレーションしますhttps://developers.weixin.qq.com/s/gi71sGm67hK0<button open-type="agreePrivacyAuthorization">

デモ 2:複数のページでのプライバシーポップアップウィンドウロジックの使用 wx.onNeedPrivacyAuthorization と処理を示し、また、複数のプライバシーインターフェイスへの同時呼び出しを処理する方法も示します。https://developers.weixin.qq.com/s/hndZUOmA7gKn<button open-type="agreePrivacyAuthorization">

デモ 3: wx.onNeedPrivacyAuthorization、wx.requirePrivacyAuthorize、<button open-type="agreePrivacyAuthorization"> および <input type="nickname"> コンポーネントを一緒に使用する方法を示しますhttps://developers.weixin.qq.com/s/jX7xWGmA7UKa

デモ 4:複数の tabBar ページでのプライバシーポップアップウィンドウロジックの使用 wx.onNeedPrivacyAuthorization と処理をデモンストレーションしますhttps://developers.weixin.qq.com/s/g6BWZGmt7XK9<button open-type="agreePrivacyAuthorization">

この方法はデモ 2 です: プライバシーインターフェイスが呼び出されるタイミングを監視し、プライバシーポップアップウィンドウをポップアップします。プライバシーポップアップウィンドウは、プライバシーインターフェイスの承認 (携帯電話番号、地理的位置などの承認など) を妨げます。 , プライバシーポップアップウィンドウの同意/拒否をクリックするまで続行されません。

プライバシー認証ポップアップウィンドウが拒否された場合、現時点で WeChat 認証にポップアップしていない認証は存在しません。

あれは

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

プライバシー認証がポップアップしないポップアップボックスの値を取得することはできません。このプライバシーインターフェイスは、同意または拒否を構成するものではありません。

開発前に、ミニプログラム管理のバックグラウンドで使用されるプライバシーインターフェイスを追加する必要があります-設定-基本設定-サービスコンテンツステートメント-ユーザープライバシー保護ガイドライン

承認されて初めて有効になります。

1. 「usePrivacyCheck」を追加します: true、

uniapp は、manifest.json、またはコンパイルされた dist/mp-weixin/app.json に追加できます。

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

2. 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. App.vueのOnLunchで使用

getPrivacy.jsのcheckUserPrivacyProtocol導入後

onLaunch() {
        checkUserPrivacyProtocol();
    },

4. 新しい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. プライバシーインターフェイスを呼び出すページでこのコンポーネントを使用します。

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

<privacy  />

レンダリングすると、WeChat のデフォルトの認証ポップアップウィンドウと同様のポップアップウィンドウが下部に表示されます。[許可] をクリックすると、WeChat の API 認証ポップアップウィンドウが表示されます。[いいえ] をクリックすると、何も表示されません。