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：314791147@qq.com

日期：2016-04-03