之前微信刚公布要求整改小程序获取用户隐私接口的改造公告那会,Taro还没有支持这方面的更新,于是当时就暂时搁置了一下,后面发现有人回复了我的提问,并且给出了解决方案。按照大佬给出的解决方案试了下,果然可行,所以在此记录分享一下!
首先,当时的帖子在这:微信隐私协议taro的解决方案
我这边整理了一下完整的解决方案。
我这边用的是:taro3+ts+taro-ui
小程序的基础调试库切到3.0.0,防止开发者工具报相关API找不到。
其次,执行
npm i @tarojs/plugin-inject -D
安装插件,这个插件在这里的作用是绕过taro的编译,将自定义的属性和方法能够传递到编译后的微信组件上。
//taro组件
<Button abc="123">自定义属性</Button>
//编译后的微信小程序
<button abc="123">自定义属性</button>
然后在app.config.ts文件中,添加
const appConfig = {
window: {},
lazyCodeLoading: '',
requiredPrivateInfos: [],
permission: {},
__usePrivacyCheck__:true,//开启隐私校验
}
接着在config/index.js文件夹下,修改小程序的配置,将@tarojs/plugin-inject插件添加到插件配置中去,给taro的Button组件添加自定义方法名“bindagreeprivacyauthorization”,目前taro的最新版本听说已经支持了,但是应该没人敢擅自升级公司的框架版本吧.....我升了下,运行不起来,放弃了。
const config = {
projectName: "小程序",
babel: {
plugins: [
['@tarojs/plugin-inject',{
components:{
Button:{
bindagreeprivacyauthorization: ""
}
}
}]
]
},
然后因为我用了ts,所以还需要在项目根目录的global.d.ts文件下对这个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>;
}
准备工作就到此结束,下面开始封装隐私协议弹窗。
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 }) => {
//控制隐私协议弹窗
const [open, setOpen] = useState(false)
//如果用户取消授权,需要再次唤醒
useEffect(() => {
if (isOpened) {
setOpen(true)
}
}, [isOpened])
//初始化的时候监听是否需要授权
useEffect(() => {
wx.getPrivacySetting({
success: res => {
console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
if (res.needAuthorization) {
setOpen(true)
} else {
onConfirm('agree')
}
},
fail: () => { },
complete: () => { },
})
}, [])
//点击隐私协议
const goWxAgreement = () => {
wx.openPrivacyContract({
success: (res) => {
console.log('打开隐私协议成功', res)
}, // 打开成功
fail: (res) => {
console.error('隐私协议打开失败', res)
}, // 打开失败
complete: () => { }
})
}
//用户取消
const cancelAgreementModal = () => {
showToast({
title: '您取消了授权',
icon: 'none',
duration: 2000
})
setOpen(false)
onConfirm('disagree')
}
//这里微信会同步收到用户同意隐私协议,在这个方法或以后调用涉及用户隐私相关api就可以正常获取了
const handleAgreePrivacyAuthorization = () => {
console.log('同意')
}
//上面的回调方法打印不了,也就是目前只上报,不作回调,没办法关闭弹窗咱们只能自己设置点击事件关闭弹窗了
const handleClickConfirm = () => {
onConfirm('agree')
setOpen(false)
}
return <AtModal
isOpened={open}
onClose={cancelAgreementModal}
closeOnClickOverlay={false}
className={classes.agreementModal}
>
<AtModalContent>
在你使用【xxxx】小程序服务之前,请仔细阅读<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隐私保护指引</Text>。如你同意<Text style={{ color: '#3b7eff' }} onClick={goWxAgreement}>xxxx隐私保护指引</Text>,请点击“同意”开始使用【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);
//微信将获取用户手机号的api改成了收费接口,如果是新用户再弹出获取手机号的弹窗
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;
}
// 判断有没有绑定手机号
if (!data?.phone) {
setPoneNumberModalVisible(true)
}
}
} else {
//重新唤醒隐私弹窗
setOpenAgreement(true)
}
} catch (e) {
console.error(e)
}
}
//查看微信授权
const handleWxModal = (status) => {
if (status === 'disagree') {
setIsAccredit(false)
} else {
setIsAccredit(true)
}
setOpenAgreement(false)
}
//手机号授权回调
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} >
手机号快捷登录
</Button>
{/* 提示手机绑定 */}
<AtModal isOpened={phoneNumberModalVisible}>
<AtModalContent>
<View>授权绑定您的手机号</View>
</AtModalContent>
<AtModalAction>
<Button onClick={handleReject}>拒绝</Button>
<Button openType="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
允许
</Button>
</AtModalAction>
</AtModal>
{/* 隐私弹窗 */}
<WxAgreementModal isOpened={openAgreement} onConfirm={handleWxModal} />
</View>
}
如果登录作为业务必要的入口的话,在登录这里做一下这样的操作,后面不管是再监听用户位置啥的都不需要再授权了 。
另外说一下,微信官方给解决方案文章来源:https://www.toymoban.com/news/detail-726967.html
文章来源地址https://www.toymoban.com/news/detail-726967.html
到了这里,关于【Taro】微信小程序关于隐私协议改造的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!