留神:我是应用 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>
);
};