【Taro】微信小程序关于隐私协议改造

之前微信刚公布要求整改小程序获取用户隐私接口的改造公告那会，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>
}

如果登录作为业务必要的入口的话，在登录这里做一下这样的操作，后面不管是再监听用户位置啥的都不需要再授权了 。

另外说一下，微信官方给解决方案