利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南
沒怎么做過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)文章
javascript將數(shù)組插入到另一個(gè)數(shù)組中的代碼
下面的代碼主要功能就是將數(shù)組arr2插入到數(shù)組arr1的index位置,需要的朋友可以參考下2013-01-01JavaScript比較當(dāng)前時(shí)間是否在指定時(shí)間段內(nèi)的方法
這篇文章主要介紹了JavaScript比較當(dāng)前時(shí)間是否在指定時(shí)間段內(nèi)的方法,涉及javascript時(shí)間與字符串的轉(zhuǎn)換及比較操作相關(guān)技巧,需要的朋友可以參考下2016-08-08Bootstrap select下拉聯(lián)動(dòng)(jQuery cxselect)
這篇文章主要為大家詳細(xì)介紹了Bootstrap select下拉聯(lián)動(dòng),JQuery插件之cxselect,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01小程序卡片切換效果組件wxCardSwiper的實(shí)現(xiàn)
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02JavaScript日期庫(kù)date-fn.js使用方法解析
這篇文章主要介紹了JavaScript日期庫(kù)date-fn.js使用方法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09用js判斷頁面刷新或關(guān)閉的方法(onbeforeunload與onunload事件)
Onunload,onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用,可以在<script>腳本中通過window.onunload來指定或者在<body>里指定2012-06-06