Taro 微信小程序隐私协议

官方文档

• 小程序隐私协议开发指南
  

开发环境

• taro 版本^3.0.18

解决方案

设置调试基础库 3.0.0+

安装依赖
@tarojs/plugin-inject 版本^0.0.2（适配taro3.0+）

修改设置 config/index.js

  babel: {
    plugins: [
      ['@tarojs/plugin-inject',{
        components:{
          Button:{
            bindagreeprivacyauthorization: ""
          }
        }
      }]
    ]
  }

修改 global.d.ts

declare module '@tarojs/components' {
  export * from '@tarojs/components/types/index';
  import { ComponentType } from 'react';
  import { ButtonProps as OldButtonProps } from '@tarojs/components/types/Button';

  interface ButtonProps extends OldButtonProps {
    onAgreePrivacyAuthorization?: any;
  }

  export const Button: ComponentType<ButtonProps>;
}

调整 src/app.config.js

  //开启隐私校验
  __usePrivacyCheck__: true,

新增隐私声明弹窗

import React, { FC, useEffect, useState } from 'react';
import { Text, Button } from '@tarojs/components';
import { AtModal, AtModalAction, AtModalContent } from 'taro-ui';
import classes from './index.module.scss';

export enum EPrivacyConfirmRes {
  'AGREE',
  'DISAGREE',
}

interface ModalType {
  onConfirm: (res: EPrivacyConfirmRes) => void;
}

const WxAgreementModal: FC<ModalType> = ({ onConfirm }) => {
  /** 是否显示 */
  const [open, setOpen] = useState(false);

  /** 检查授权 */
  useEffect(() => {
    wx.getPrivacySetting({
      success: res => {
        if (res.needAuthorization) {
          setOpen(true);
        }
      },
      fail: () => {},
      complete: () => {},
    });
  }, []);

  /** 查看隐私协议 */
  const goWxAgreement = () => {
    wx.openPrivacyContract({
      success: res => {
        console.log('打开隐私协议成功', res);
      },
      fail: res => {
        console.error('隐私协议打开失败', res);
      },
      complete: () => {},
    });
  };

  /** 用户取消 */
  const cancelAgreementModal = () => {
    onConfirm(EPrivacyConfirmRes.DISAGREE);
    wx.exitMiniProgram();
  };

  /** 同意授权回调（测试无效） */
  const handleAgreePrivacyAuthorization = () => {
    console.log('同意');
  };

  /** 同意且关闭弹窗 */
  const handleClickConfirm = () => {
    onConfirm(EPrivacyConfirmRes.AGREE);
    setOpen(false);
  };

  return (
    <AtModal
      isOpened={open}
      onClose={cancelAgreementModal}
      closeOnClickOverlay={false}
      className={classes.agreementModal}>
      <AtModalContent>
        在您使用xxx小程序服务之前，请仔细阅读
        <Text className={classes.link} onClick={goWxAgreement}>
          xxx隐私保护指引
        </Text>
        。如您同意
        <Text className={classes.link} onClick={goWxAgreement}>
          xxx隐私保护指引
        </Text>
        ，请点击“同意”开始使用xxx。
      </AtModalContent>
      <AtModalAction>
        <Button onClick={cancelAgreementModal}>拒绝</Button>
        <Button
          id='agree-btn'
          openType={'agreePrivacyAuthorization' as any}
          onAgreePrivacyAuthorization={handleAgreePrivacyAuthorization}
          onClick={handleClickConfirm}
          className={styles.btnPrivacyAgree}>
          同意
        </Button>
      </AtModalAction>
    </AtModal>
  );
};

export default WxAgreementModal;

参考资料

• wx.getPrivacySetting接口needAuthorization一直返回false