注意：我是使用hooks的，其他可以參考封裝思路大同小異的

首先寫一個(gè)PrivacyAgreement.js文件

import { useState, useEffect } from "react";
// Taro 額外添加的 hooks 要從 '@tarojs/taro' 中引入
import { useDidShow, useDidHide,useReady } from '@tarojs/taro'
import { View, Text, Button } from "@tarojs/components";
import { AtFloatLayout, AtButton } from "taro-ui";
import "./index.scss";
let privacyHandler
let privacyResolves = new Set()
let closeOtherPagePopUpHooks = new Set()
if (wx.onNeedPrivacyAuthorization) {
  wx.onNeedPrivacyAuthorization(resolve => {
    console.log('觸發(fā) onNeedPrivacyAuthorization')
    if (typeof privacyHandler === 'function') {
      privacyHandler(resolve)
    }
  })
}
const closeOtherPagePopUp = (closePopUp) => {
  closeOtherPagePopUpHooks.forEach(hook => {
    if (closePopUp !== hook) {
      hook()
    }
  })
}
export default ({
  showPrivacyClk
}) => {
  // 顯示和隱藏
  const [showPrivacy, setShowPrivacy] = useState(false)
  const [closePopUpCopy, setclosePopUpCopy] = useState(false)
  useEffect(() => {
    const closePopUp = () => {
      disPopUp()
    }
    console.log('closePopUp',closePopUp)
    privacyHandler = resolve => {
      console.log('3456')
      privacyResolves.add(resolve)
      popUp()
      // 額外邏輯：當(dāng)前頁面的隱私彈窗彈起的時(shí)候，關(guān)掉其他頁面的隱私彈窗
      closeOtherPagePopUp(closePopUp)
    }
    closeOtherPagePopUpHooks.add(closePopUp)
    setclosePopUpCopy(closePopUp)
  }, [])

  const disPopUp = () => {
    if (showPrivacy === true) {
      wx.showTabBar()
      setShowPrivacy(false)
    }
  }

  const popUp = () => {
    if (showPrivacy === false) {
      wx.hideTabBar()
      setShowPrivacy(true)
    }
  }
  // 打開隱私協(xié)議頁面
  const openPrivacyContractClk = () => {
    wx.openPrivacyContract()
  }
  // 用戶點(diǎn)擊拒絕隱私協(xié)議
  const refundPrivacy = () => {
    wx.showTabBar()
    disPopUp()
    privacyResolves.forEach(resolve => {
      console.log('resolve111', resolve);
      resolve({
        event: 'disagree',
      })
    })

    privacyResolves.clear()
    closeOtherPagePopUpHooks.delete(closePopUpCopy)
  }
  // 用戶點(diǎn)擊同意隱私協(xié)議
  const handleAgreePrivacyAuthorization = e => {
    // // 顯示tabbar
    wx.showTabBar()
    disPopUp()
    // 這里演示了同時(shí)調(diào)用多個(gè)wx隱私接口時(shí)要如何處理：讓隱私彈窗保持單例，點(diǎn)擊一次同意按鈕即可讓所有pending中的wx隱私接口繼續(xù)執(zhí)行 （看page/index/index中的 wx.getClipboardData 和 wx.startCompass）
    privacyResolves.forEach(resolve => {
      console.log('resolve2222', resolve);
      resolve({
        event: 'agree',
        buttonId: 'agree-btn'
      })
    })
    privacyResolves.clear()
  }
  return (
    <View>
      {
        showPrivacy ?
          (
            <View>
              <View className="privacyAgreementMask"></View>
              <View className="privacyAgreementIdx">
                在您使用小程序服務(wù)之前，請您仔細(xì)閱讀<Text onClick={openPrivacyContractClk} className="privacyTitle">《小程序隱私保護(hù)協(xié)議》</Text>
                。如您同意該隱私保護(hù)指引，請點(diǎn)擊“同意”開始使用小程序
                <View className="pivacyAgreementBtn">
                  <View className="btnLeftCon"><AtButton type='primary' full={false} onClick={refundPrivacy}>拒絕</AtButton></View>
                  <View className="btnLeftCon btnRightCon">
                    <Button id="agree-btn" class="agree" open-type="agreePrivacyAuthorization" onAgreeprivacyauthorization={handleAgreePrivacyAuthorization}>同意</Button>
                  </View>
                </View>
              </View>
            </View>
          ) : ''
      }
    </View>);
};

樣式文件index.scss如下

.privacyAgreementMask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4);
  z-index: 998;
}

.privacyAgreementIdx {
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  height: 400rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 50rpx 32rpx;
  box-shadow: 0px 2px 25px 0px rgba(189, 189, 189, 0.2);
  z-index: 999;

  .privacyTitle {
    color: skyblue;
  }

  .pivacyAgreementBtn {
    display: flex;
    justify-content: center;
    margin-top: 100rpx;

    .btnLeftCon {
      margin-right: 40rpx;

      &:last-child {
        margin-right: 0;
      }

      .at-button {
        width: 160rpx;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 24rpx;
        color: #57bf6a;
        background-color: #f2f2f2;
      }

      button {
        width: 160rpx !important;
        height: 70rpx !important;
        line-height: 70rpx !important;
        font-size: 24rpx !important;
        color: #57bf6a !important;
        background-color: #f2f2f2 !important;
      }
    }

    .btnRightCon {
      .at-button {
        color: #fff;
        background-color: #57bf6a;
      }

      button {
        color: #fff !important;
        background-color: #57bf6a !important;
      }
    }
  }
}

在需要用到隱私協(xié)議的組件或者api的頁面里面引用文章來源地址http://www.zghlxwxcb.cn/news/detail-744950.html

import { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import {
  View
} from "@tarojs/components";
// 引入隱私協(xié)議組件
import PrivacyAgreement from "@/components/PrivacyAgreement.js";

export default () => {
  // 是否當(dāng)前頁面，用來解決引用隱私彈窗組件，切換我的頁面問題
  const [isPageIndex, setIsPageIndex] = useState(true);
  
  // 監(jiān)聽當(dāng)前路由變化
  useEffect(() => {
    // 獲取定位
    gotLocation()
    // 用來解決多個(gè)頁面引用隱私協(xié)議組件，來回拒絕切換導(dǎo)致隱私協(xié)議不顯示問題（沒有這個(gè)問題可以不用相關(guān)代碼）
    const unlisten = Taro.onAppRoute(res => {
      if (res.path === 'pages/index/index') {
        setIsPageIndex(true);
      } else {
        setIsPageIndex(false);
      }
    });
    return () => {
      unlisten && unlisten();
    };
  }, []);
  // 獲取到當(dāng)前位置
  const gotLocation = () => {
    wx.getLocation({
      type: "wgs84",
      success(res) {
        
      },
      fail(rs) {
        // 拒絕隱私協(xié)議
        if(rs.errno === 104)return
      },
    });
  }

  return (
    <View>
      {/* 隱私協(xié)議 */}
      {isPageIndex && <PrivacyAgreement></PrivacyAgreement>}
    </View>
  );
};

到了這里，關(guān)于使用taro或react框架的，針對微信小程序隱私協(xié)議的組件封裝，網(wǎng)上找了很久都沒有相關(guān)模版，只有自己寫了一個(gè)，現(xiàn)分享給有困難的同伴的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！