監(jiān)測應用進入前后臺

在JavaScript中，監(jiān)聽H5頁面是否在前臺或后臺運行，主要依賴于Page Visibility API。這個API在大多數(shù)現(xiàn)代瀏覽器中都是支持的，包括蘋果的Safari和谷歌的Chrome（也就基本覆蓋了Android和iOS平臺）。下面是一個簡單的示例代碼，展示如何使用這個API來判斷頁面的可見性狀態(tài)：

// 頁面可見性變化時觸發(fā)的事件處理函數(shù)
function handleVisibilityChange() {if (document.visibilityState === 'hidden') {// 當頁面進入后臺時的操作console.log('頁面進入后臺');} else if (document.visibilityState === 'visible') {// 當頁面從后臺回到前臺時的操作console.log('頁面從后臺回到前臺');}
}// 給文檔添加可見性狀態(tài)變化的監(jiān)聽器
document.addEventListener('visibilitychange', handleVisibilityChange);// 初始化時檢查一次頁面狀態(tài)
handleVisibilityChange();

這段代碼首先定義了一個handleVisibilityChange函數(shù)，該函數(shù)會在頁面的visibilityState發(fā)生變化時被調用。visibilityState可以是visible、hidden、prerender或unloaded等值，這里我們主要關注visible和hidden兩種狀態(tài)，分別代表頁面在前臺和后臺。

然后，通過document.addEventListener給文檔注冊了一個監(jiān)聽器，用于監(jiān)聽visibilitychange事件。最后，調用一次handleVisibilityChange函數(shù)來初始化檢查頁面當前的狀態(tài)。

需要注意的是，雖然大部分現(xiàn)代瀏覽器支持Page Visibility API，但還是存在一些老舊瀏覽器可能不支持。因此，在生產環(huán)境中使用時，最好進行特性檢測以確保兼容性：

if (typeof document.hidden !== "undefined") {// Page Visibility API supported// 你的代碼...
} else if (typeof document.msHidden !== "undefined") {// For IE// 你的代碼...
} else if (typeof document.webkitHidden !== "undefined") {// For older Chrome and Safari// 你的代碼...
} else {console.log("Page Visibility API not supported.");
}

這段額外的檢測代碼可以幫助你確認當前環(huán)境是否支持Page Visibility API，并根據(jù)不同的瀏覽器前綴做適配。

手勢生成

html

<div className="page-container"><divid="container"style={{ width: "300px", height: "300px" }}ref={(ref) => { this.container = ref }}/>
</div>

react

import GestureUnlockRenderer, { Anchor } from 'fly-gesture-unlock';container;
gestureUnlockRenderer;
gestureEnd = (selectedAnchors: Anchor<ExtraStatus>[]) => {const anchorIds = selectedAnchors.map(anchor => anchor.id).join('');console.log(anchorIds);
};type ExtraStatus = never;// 借助提供的輔助函數(shù)生成錨點
const anchorDefines = GestureUnlockRenderer.AnchorMatrixFactory({canvasSize: { width: this.container.clientWidth, height: this.container.clientHeight },padding: 35,matrix: { row: 3, column: 3 },anchor: { anchorCircleRadius: 30, centerCircleRadius: 10 },
});this.gestureUnlockRenderer = new GestureUnlockRenderer<ExtraStatus>({container: this.container,anchorDefines,anchorStatusStyles: {'not-selected': {// 錨點圓的邊框寬、邊框顏色、填充顏色anchorCircleBorderWidth: 1,anchorCircleBorderColor: '#3ea1e5',},'selected': {// 錨點圓的邊框寬、邊框顏色、填充顏色anchorCircleBorderWidth: 1.5,anchorCircleBorderColor: '#128ce8',anchorCircleFillColor: '#ffffff',// 中心圓的邊框寬、邊框顏色、填充顏色centerCircleFillColor: '#128ce8'},},lineStatusStyles: {'normal': {lineColor: '#128ce8',lineWidth: 1,},},events: {'end': this.gestureEnd,},
});