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 {
    bindagreeprivacyauthorization?: 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}
          bindagreeprivacyauthorization={handleAgreePrivacyAuthorization}
          onClick={handleClickConfirm}>
          同意
        </Button>
      </AtModalAction>
    </AtModal>
  );
};

export default WxAgreementModal;

參考資料

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