MUI APP防止登陸頁面出現白屏

        最近在用MUI開發APP，總體效果，在IOS上，是完美的，但是在低端的Android手機上，就會出現性能問題，我個人覺得最嚴重的是，就是首頁，就是APP打開的第一個頁面，在iOS上，由於性能高，所以，基本能流暢切換，但是到了Android上，就會出現令人討厭的白屏了。

         本次我就自我談談我處理的邏輯，首先，我是有一個index.html頁面的，這個頁面作為一個入口頁面，然后APP打開的時候，會進入這個頁面，然后我在plusready里面檢查，APP是不是第一次啟動，如果是的話，就跳轉到歡迎頁面，如果不是，就進入登陸頁面。這里面，就會出現白屏了。因為APP第一次進來，頁面還有加載完畢，所以，會出現白屏。我的處理方法如下：

    一、設置一個啟動圖片，然后再手動關閉啟動界面，如下：

二、到index.html頁面，添加以下代碼：

mui.plusReady(function() {
                    setTimeout(function() {
                        mui.preload({
                            id: 'html/login.html',
                            url: 'html/login.html'
                        })//預打開登錄頁
                    }, 100);//延時加載登錄頁，這個可以不用演示，你可以放在mui.int里面
                    setTimeout(function() {//這里面也用了一個延時，因為一般登陸頁面，只要不是太多的東西，200毫秒應該能滿足了，時間長短，自己把控了。
                            /*
                             * 這里獲取本地存儲中的字段，來判定是否第一次打開app；
                             * 注意，只需要判定有這個值就可以了，因為只有兩種情況：
                             * 1、有這個值，並且值是true
                             * 2、壓根就沒有這個值
                             * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem
                             */
                            /*
                            這里用的是版本的名字，是為了后續更新版本后，我們更新應用或者升級版本的時候，把這個相應的修改
                            一下即可進入新的引導頁面了，如果固定一個，以后更新版本，就看不到歡迎頁了，這個看個人需求了。
                            */
                            var first = plus.storage.getItem("version1.3");
                            if (first) { //如果已經有值，那么就代表不是第一次打開，則直接進入主頁
                                plus.navigator.closeSplashscreen();//關閉啟動頁
                                mui.openWindow({
                                    id: "html/login.html",
                                    waiting: {
                                        autoShow: true
                                    },
                                    show: {
                                        aniShow: 'pop-in'
                                    }
                                });
                            } else { //否則將打開歡迎界面    
                                plus.navigator.closeSplashscreen();
                                
                            }
                        }, 500)
                        
                }, false)

 

三、到了這里，大家發現，如果index.html是空白的，雖然白屏的時間短了許多，但是還是能看到白屏，依然是我不能容忍的。所以，這里面有個小技巧，就是，你在index.html頁面，設置一個背景，這個背景顏色，或者圖片，和登陸頁面差不多的（就是沒有登陸輸入框和按鈕的那種圖片或者背景）。這樣的話，就基本能解決白屏問題了。

 

 

 

 

好了，本次教程到此結束， 轉載請保留原作者地址以及姓名（本人無償分享經驗，有償接單制作APP，有需要可以聯系我。）；

 

作者：南宮蕭塵  

E-mail：[e-mail]

日期：2016-04-03