1. 程式人生 > >專案總結3:ionic3開發的App在啟動過程中部分手機出現白屏或黑屏問題之終極解決方案

專案總結3:ionic3開發的App在啟動過程中部分手機出現白屏或黑屏問題之終極解決方案

問題場景:採用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個月了沒有出現過啟動白黑屏的問題。