欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南

 更新時(shí)間:2023年12月13日 11:19:56   作者:lu947  
這篇文章主要給大家介紹了關(guān)于利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南的相關(guān)資料,適配最新微信小程序隱私協(xié)議開發(fā)指南,兼容uniapp版本,需要的朋友可以參考下

沒怎么做過uniapp,找了一些文章做了出來,給大家分享一下

2023.9.15以后需要適配微信的隱私協(xié)議開發(fā)指南

目前uniapp的說法是微信小程序隱私協(xié)議開發(fā)指南 | uni-app官網(wǎng)

微信小程序小程序隱私協(xié)議開發(fā)指南 | 微信開放文檔

微信官方提供了幾個(gè)demo

完整示例demo

demo1: 演示使用 wx.getPrivacySetting 和 <button open-type="agreePrivacyAuthorization"> 在首頁處理隱私彈窗邏輯 https://developers.weixin.qq.com/s/gi71sGm67hK0

demo2: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type="agreePrivacyAuthorization"> 在多個(gè)頁面處理隱私彈窗邏輯,同時(shí)演示了如何處理多個(gè)隱私接口同時(shí)調(diào)用。 https://developers.weixin.qq.com/s/hndZUOmA7gKn

demo3: 演示 wx.onNeedPrivacyAuthorization、wx.requirePrivacyAuthorize、<button open-type="agreePrivacyAuthorization"> 和 <input type="nickname"> 組件如何結(jié)合使用 https://developers.weixin.qq.com/s/jX7xWGmA7UKa

demo4: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type="agreePrivacyAuthorization"> 在多個(gè) tabBar 頁面處理隱私彈窗邏輯 https://developers.weixin.qq.com/s/g6BWZGmt7XK9

此方法是demo2:監(jiān)聽什么時(shí)候調(diào)用隱私接口,然后彈出隱私彈窗,隱私彈窗會(huì)阻礙隱私接口授權(quán)(例如授權(quán)手機(jī)號(hào),地理位置等),直到點(diǎn)擊了隱私彈窗的同意/拒絕才會(huì)繼續(xù)執(zhí)行。

如果拒絕了隱私授權(quán)彈窗,那么此時(shí)的微信授權(quán)中不存在未彈出的授權(quán)

也就是

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

是取不到未彈出隱私授權(quán)的彈框的值的。該隱私接口不屬于同意,也不屬于拒絕。

在開發(fā)之前,需要在小程序管理后臺(tái)-設(shè)置-基本設(shè)置-服務(wù)內(nèi)容聲明-用戶隱私保護(hù)指引中添加用到的隱私接口

審核通過后,才能生效。 

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: ''
}
//獲取微信側(cè)同步的用戶隱私協(xié)議開關(guān)
  export function checkUserPrivacyProtocol() {
    if (wx.getPrivacySetting) {
        wx.getPrivacySetting({
            success: (res) => {
                console.log('協(xié)議顯示的值',res)
                PrivacyProtocol.needAuthorization = res.needAuthorization
                if (res.needAuthorization) {
                    // 需要彈出隱私協(xié)議  
                    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 }} 申請(qǐng)</div>
                <div class="popup-center">
                    在你使用服務(wù)之前,請(qǐng)仔細(xì)閱讀
                    <span
                        class="privacy-link"
                        @click="onClickPrivacyPopupTitle"
                    >
                        {{ PrivacyProtocol.privacyContractName }}
                    </span>
                    。如果你同意,請(qǐng)點(diǎn)擊“允許”開始使用。
                </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); // 是否需要彈出協(xié)議授權(quán)
const PrivacyProtocol = ref(uni.getStorageSync("PrivacyProtocol"));
const AppName = ref('小程序名字')
// 打開彈窗
const openPrivacyPopup = () => {
    showPrivacyPopup.value = true;
    console.log("PrivacyProtocol", PrivacyProtocol);
};
 
// 關(guān)閉彈窗
const closePrivacyPopup = () => {
    showPrivacyPopup.value = false;
};
 
// 用戶點(diǎn)擊同意
const handleAgreePrivacyAuthorization = () => {
    console.log("點(diǎn)擊了同意");
    resolvePrivacyAuthorization({
        buttonId: "agree-btn",
        event: "agree"
    });
    closePrivacyPopup();
};
 
// 用戶點(diǎn)擊拒絕
const handleRefusePrivacyAuthorization = () => {
    console.log("點(diǎn)擊了拒絕", resolvePrivacyAuthorization);
    resolvePrivacyAuthorization({
        event: "disagree"
    });
    // 關(guān)閉彈窗
    closePrivacyPopup();
    uni.showToast({
        title: "未同意授權(quán),請(qǐng)重試",
        icon: "none",
        duration: 2500
    });
};
 
// 打開隱私協(xié)議
const onClickPrivacyPopupTitle = () => {
    wx.openPrivacyContract({
        success: () => {
            console.log("已打開");
        } // 打開成功
    });
};
 
// 監(jiān)聽調(diào)用微信api的函數(shù)
const saveWXCallBack = () => {
    console.log('111111111');
    if (wx.onNeedPrivacyAuthorization) {
        wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
            // 真機(jī)/預(yù)覽可以拿到eventInfo,模擬器undefined
            console.log("調(diào)用接口/組件:", 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.在調(diào)用了隱私接口的頁面使用該組件

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

效果圖,彈窗顯示在底部,類似于微信默認(rèn)的授權(quán)彈窗,在點(diǎn)擊允許后會(huì)彈出微信的api授權(quán)彈窗,若點(diǎn)擊否,則什么都沒有。

總結(jié) 

到此這篇關(guān)于利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南的文章就介紹到這了,更多相關(guān)uniapp適配微信隱私協(xié)議開發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論