之前微信剛公布要求整改小程序獲取用戶隱私接口的改造公告那會(huì)，Taro還沒有支持這方面的更新，于是當(dāng)時(shí)就暫時(shí)擱置了一下，后面發(fā)現(xiàn)有人回復(fù)了我的提問，并且給出了解決方案。按照大佬給出的解決方案試了下，果然可行，所以在此記錄分享一下！
首先，當(dāng)時(shí)的帖子在這：微信隱私協(xié)議taro的解決方案
?
我這邊整理了一下完整的解決方案。
我這邊用的是：taro3+ts+taro-ui
小程序的基礎(chǔ)調(diào)試庫(kù)切到3.0.0，防止開發(fā)者工具報(bào)相關(guān)API找不到。
其次，執(zhí)行
npm i @tarojs/plugin-inject -D安裝插件，這個(gè)插件在這里的作用是繞過taro的編譯，將自定義的屬性和方法能夠傳遞到編譯后的微信組件上。
//taro組件
<Button abc="123">自定義屬性</Button>
//編譯后的微信小程序
<button abc="123">自定義屬性</button>然后在app.config.ts文件中，添加
const appConfig = {
window: {},
lazyCodeLoading: '',
requiredPrivateInfos: [],
permission: {},
__usePrivacyCheck__:true,//開啟隱私校驗(yàn)
}接著在config/index.js文件夾下，修改小程序的配置，將@tarojs/plugin-inject插件添加到插件配置中去，給taro的Button組件添加自定義方法名“bindagreeprivacyauthorization”，目前taro的最新版本聽說已經(jīng)支持了，但是應(yīng)該沒人敢擅自升級(jí)公司的框架版本吧.....我升了下，運(yùn)行不起來，放棄了。
const config = {
projectName: "小程序",
babel: {
plugins: [
['@tarojs/plugin-inject',{
components:{
Button:{
bindagreeprivacyauthorization: ""
}
}
}]
]
},然后因?yàn)槲矣昧藅s，所以還需要在項(xiàng)目根目錄的global.d.ts文件下對(duì)這個(gè)Button的ts做添加。如果沒用的可以跳過這一步。
declare module '@tarojs/components' {
export * from '@tarojs/components/types/index';
import { ComponentType } from 'react';
import { ButtonProps as OldButtonProps } from '@tarojs/components/types/Button';
// 修改的Props
interface ButtonProps extends OldButtonProps {
bindagreeprivacyauthorization?: any;
}
export const Button: ComponentType<ButtonProps>;
}
準(zhǔn)備工作就到此結(jié)束，下面開始封裝隱私協(xié)議彈窗。
import { Text, Button } from "@tarojs/components";
import { showToast } from "@tarojs/taro";
import React, { FC, useEffect, useState } from "react";
import { AtModal, AtModalAction, AtModalContent, AtModalHeader } from "taro-ui";
import classes from "./index.module.scss"
interface ModalType {
onConfirm: any;
isOpened: boolean;
}
const WxAgreementModal: FC<ModalType> = ({ onConfirm, isOpened }) => {
//控制隱私協(xié)議彈窗
const [open, setOpen] = useState(false)
//如果用戶取消授權(quán)，需要再次喚醒
useEffect(() => {
if (isOpened) {
setOpen(true)
}
}, [isOpened])
//初始化的時(shí)候監(jiān)聽是否需要授權(quán)
useEffect(() => {
wx.getPrivacySetting({
success: res => {
console.log("是否需要授權(quán)：", res.needAuthorization, "隱私協(xié)議的名稱為：", res.privacyContractName)
if (res.needAuthorization) {
setOpen(true)
} else {
onConfirm('agree')
}
},
fail: () => { },
complete: () => { },
})
}, [])
//點(diǎn)擊隱私協(xié)議
const goWxAgreement = () => {
wx.openPrivacyContract({
success: (res) => {
console.log('打開隱私協(xié)議成功', res)
}, // 打開成功
fail: (res) => {
console.error('隱私協(xié)議打開失敗', res)
}, // 打開失敗
complete: () => { }
})
}
//用戶取消
const cancelAgreementModal = () => {
showToast({
title: '您取消了授權(quán)',
icon: 'none',
duration: 2000
})
setOpen(false)
onConfirm('disagree')
}
//這里微信會(huì)同步收到用戶同意隱私協(xié)議，在這個(gè)方法或以后調(diào)用涉及用戶隱私相關(guān)api就可以正常獲取了
const handleAgreePrivacyAuthorization = () => {
console.log('同意')
}
//上面的回調(diào)方法打印不了，也就是目前只上報(bào)，不作回調(diào)，沒辦法關(guān)閉彈窗咱們只能自己設(shè)置點(diǎn)擊事件關(guān)閉彈窗了
const handleClickConfirm = () => {
onConfirm('agree')
setOpen(false)
}
return <AtModal
isOpened={open}
onClose={cancelAgreementModal}
closeOnClickOverlay={false}
className={classes.agreementModal}
>
<AtModalContent>
在你使用【xxxx】小程序服務(wù)之前，請(qǐng)仔細(xì)閱讀<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隱私保護(hù)指引</Text>。如你同意<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隱私保護(hù)指引</Text>，請(qǐng)點(diǎn)擊“同意”開始使用【xxxx】。
</AtModalContent>
<AtModalAction>
<Button onClick={cancelAgreementModal}>拒絕</Button>
<Button id="agree-btn" openType={"agreePrivacyAuthorization" as any} bindagreeprivacyauthorization={handleAgreePrivacyAuthorization} onClick={handleClickConfirm}>同意</Button>
</AtModalAction>
</AtModal>
}
export default WxAgreementModal
舉例在登錄頁中使用是這樣的
const Home = () =>{
const [phoneNumberModalVisible, setPoneNumberModalVisible] = useState<boolean>(false)
const [isAccredit, setIsAccredit] = useState(false);
const [openAgreement,setOpenAgreement] = useState(false);
//微信將獲取用戶手機(jī)號(hào)的api改成了收費(fèi)接口，如果是新用戶再?gòu)棾霁@取手機(jī)號(hào)的彈窗
const getLogin = async () => {
try {
if (isAccredit) {
const res = await request.get('xxxx', { data: { code: getStorageSync('AUTH_CODE') } });
if (res.success) {
const data = res.data || {};
if (data.success) {
showToast({
title: '登錄成功',
icon: 'success',
duration: 2000
})
setTimeout(() => {
navigateBack(-1)
}, 2000)
return;
}
// 判斷有沒有綁定手機(jī)號(hào)
if (!data?.phone) {
setPoneNumberModalVisible(true)
}
}
} else {
//重新喚醒隱私彈窗
setOpenAgreement(true)
}
} catch (e) {
console.error(e)
}
}
//查看微信授權(quán)
const handleWxModal = (status) => {
if (status === 'disagree') {
setIsAccredit(false)
} else {
setIsAccredit(true)
}
setOpenAgreement(false)
}
//手機(jī)號(hào)授權(quán)回調(diào)
const handleGetPhoneNumber = async e => {
try {
const { encryptedData, iv } = e.detail
if (!encryptedData || !iv) return Promise.reject()
if (e.detail) {
await setStorageSync('Phone', e.detail)
}
} catch (err) {
console.log(err)
}
}
return <View>
<Button onClick={getLogin} >
手機(jī)號(hào)快捷登錄
</Button>
{/* 提示手機(jī)綁定 */}
<AtModal isOpened={phoneNumberModalVisible}>
<AtModalContent>
<View>授權(quán)綁定您的手機(jī)號(hào)</View>
</AtModalContent>
<AtModalAction>
<Button onClick={handleReject}>拒絕</Button>
<Button openType="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
允許
</Button>
</AtModalAction>
</AtModal>
{/* 隱私彈窗 */}
<WxAgreementModal isOpened={openAgreement} onConfirm={handleWxModal} />
</View>
}如果登錄作為業(yè)務(wù)必要的入口的話，在登錄這里做一下這樣的操作，后面不管是再監(jiān)聽用戶位置啥的都不需要再授權(quán)了?。
另外說一下，微信官方給解決方案文章來源：http://www.zghlxwxcb.cn/news/detail-726967.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-726967.html
到了這里，關(guān)于【Taro】微信小程序關(guān)于隱私協(xié)議改造的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
