專案總結3:ionic3開發的App在啟動過程中部分手機出現白屏或黑屏問題之終極解決方案
阿新 • • 發佈:2019-02-02
問題場景:採用ionic3開發的App,當專案比較大的時候,會出現部分真機裝置在啟動的過程中有白屏或黑屏的情況。
原因預測:個別手機,尤其是安卓手機的效能比較差,App在啟動後進入首頁或登入頁前的初始化工作還沒有完成。
方案總結:在網上查過很多資料發現大部分的解決辦法都是簡單的分為兩種:1、自動關閉啟動頁;2、設定具體的毫秒後手動關閉啟動頁;
但是,仍然會有部分專案部分手機還是無法解決這個問題,當你看到這篇文章的時候,很有可能以上兩種方案都不適用。
進一步分析原因: 我們無法準確評估自己的App啟動在不同的裝置上啟動到底需要多長時間,所以從理論上說當問題出現的時候,無論是簡單的自動關閉還是手動關閉都是不可取的,踩過大量的坑之後,思路終於轉變了下。
終極解決方案:讓程式去自動檢測應用在當前裝置每次啟動的初始化完畢的時間點,在恰好合適的時刻去關閉啟動頁再進入首頁或登入頁。
以下是我的專案中的具體實現程式碼:
let isStartByHand: boolean = true; // 是否手動關閉啟動 if (!isStartByHand) { // 自動關閉 platform.ready().then(() => { statusBar.styleDefault(); splashScreen.hide(); }); } else { // 手動關閉 let startTime = new Date().getMilliseconds(); // 除錯用 var isCleared: boolean = false; let timeOut = 2000, count = 0; // 記錄自動檢測的次數,不斷地尋找合適的時間節點 let interval = setInterval(()=>{ if (SplashScreen.installed() && Camera.installed() && File.installed() && AppVersion.installed() && ScreenOrientation.installed()) { console.log("SplashScreen已經安裝完畢=====interval=====" + "時間差毫秒值:" + (new Date().getMilliseconds()-startTime)); // 防止出現1~2秒鐘的白屏,再次延遲隱藏啟動頁 setTimeout(() => { clearInterval(interval); splashScreen.hide(); isCleared = true; }, timeOut + 1000 + count++ * 1000); // 加1000錯開定時任務延時 } },timeOut); // 防止啟動時間不夠出現閃屏(在首頁與啟動頁之間頻繁切換) setTimeout(() => { if (isCleared) { clearInterval(interval); } }, timeOut); platform.ready().then(() => { // 初始化訪問量服務 GlobalVariables.appVisitCountService = appVisitCountService; // App裝機量統計 appInstalledService.checkAndSendInstalledInfo(); // 強制檢驗更新 this.checkVersionUpdate(); clearInterval(interval); // 如果實際啟動較快,通過正常關閉啟動頁,則清除定時任務 console.log("========全部外掛已經安裝完畢=====ready.then=====" + "時間差毫秒值:" + (new Date().getMilliseconds()-startTime)); statusBar.styleDefault(); splashScreen.hide(); this.isIphoneX(platform); this.isDevice(platform); // 自動登入 this.autoLogin(); }); }
備註:如果複製程式碼套用後發現偶爾出現應用在啟動頁和首頁(或登入頁)之間來回切換的問題,則需要除錯更改時間引數。
後記:經過大量的反覆試驗,特別是採用出現啟動問題的真機,不斷地除錯,修改定時和延時任務的時間引數,達到均衡合理的狀態,終於把能用的團隊手機都適配了,目前上線5個月了沒有出現過啟動白黑屏的問題。