关于前端:使用taro或react框架的针对微信小程序隐私协议的组件封装网上找了很久都没有相关模版只有自己写了一个

留神：我是应用 hooks 的，其余能够参考封装思路大同小异的
首先写一个 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('触发 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()
      // 额定逻辑：以后页面的隐衷弹窗弹起的时候，关掉其余页面的隐衷弹窗
      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)
    }
  }
  // 关上隐衷协定页面
  const openPrivacyContractClk = () => {wx.openPrivacyContract()
  }
  // 用户点击回绝隐衷协定
  const refundPrivacy = () => {wx.showTabBar()
    disPopUp()
    privacyResolves.forEach(resolve => {console.log('resolve111', resolve);
      resolve({event: 'disagree',})
    })
 
    privacyResolves.clear()
    closeOtherPagePopUpHooks.delete(closePopUpCopy)
  }
  // 用户点击批准隐衷协定
  const handleAgreePrivacyAuthorization = e => {
    // // 显示 tabbar
    wx.showTabBar()
    disPopUp()
    // 这里演示了同时调用多个 wx 隐衷接口时要如何解决：让隐衷弹窗放弃单例，点击一次批准按钮即可让所有 pending 中的 wx 隐衷接口继续执行（看 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">
                在您应用小程序服务之前，请您仔细阅读 <Text onClick={openPrivacyContractClk} className="privacyTitle">《小程序隐衷爱护协定》</Text>。如您批准该隐衷爱护指引，请点击“批准”开始应用小程序
                <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;
      }
    }
  }
}

在须要用到隐衷协定的组件或者 api 的页面外面援用

import {useState, useEffect} from "react";
import Taro from "@tarojs/taro";
import {View} from "@tarojs/components";
// 引入隐衷协定组件
import PrivacyAgreement from "@/components/PrivacyAgreement.js";
 
export default () => {
  // 是否以后页面，用来解决援用隐衷弹窗组件，切换我的页面问题
  const [isPageIndex, setIsPageIndex] = useState(true);
  
  // 监听以后路由变动
  useEffect(() => {
    // 获取定位
    gotLocation()
    // 用来解决多个页面援用隐衷协定组件，来回回绝切换导致隐衷协定不显示问题（没有这个问题能够不必相干代码）const unlisten = Taro.onAppRoute(res => {if (res.path === 'pages/index/index') {setIsPageIndex(true);
      } else {setIsPageIndex(false);
      }
    });
    return () => {unlisten && unlisten();
    };
  }, []);
  // 获取到以后地位
  const gotLocation = () => {
    wx.getLocation({
      type: "wgs84",
      success(res) { },
      fail(rs) {
        // 回绝隐衷协定
        if(rs.errno === 104)return
      },
    });
  }
 
  return (
    <View>
      {/* 隐衷协定 */}
      {isPageIndex && <PrivacyAgreement></PrivacyAgreement>}
    </View>
  );
};