请问ionic在splash之后出现好几秒黑屏才转入主界面怎么处理啊?跪谢!
发布于 1年前 作者 lurenzhao 1717 次浏览 来自 问答

请问,如题,是什么原因导致的呢?总不能把splah时间定义的超长吧。我只定义了三秒 <preference name="SplashScreenDelay" value="3000"/>

3 回复

估计要加长这个时间才行

要么加长,要么在device ready中根据是否加载晚来隐藏splashscreen

P.S.黑屏白屏其实是同一个问题,但这个问题相当难解决,笔者花了快1天才搞定

ionic默认集成了 splashscreen 插件,这个cordova插件效果不是很完美,默认配置只在首次打开app时显示splash screen,但实际效果是:

When the app starts the splash screen shows for a few seconds as expected, and then the screen goes black for @1 second and then white for @2 seconds and then the main app page appears.

Is there any way to prevent the black and white pages appearing? I read somewhere that a black page appears when there is no splash page but I do have a splash page and it appears fine.

在 stackoverflow 找到了这个问题描述,简直太贴切了,但是单靠问题下面的回答无法解决白屏问题,还需要改配置文件

最初发现的现象是黑屏(把上面英文描述里的white换成黑),后来找到了原因:主视图容器 ion-nav-view 是空的,而它的背景色是 #000 ,所以修复方法是给里面塞个 ion-view :

<ion-nav-view> <ion-view></ion-view> </ion-nav-view>

或者添css,把 ion-nav-view 的背景色改成白色。但问题还没解决,黑屏问题变成白屏问题了,解决方案比较麻烦

把splashscreen插件降级到v2.0.0

v2.0.0之后的版本有bug,目前(2016/1/9)自带的版本是v3.0.0。先cd到项目文件夹,然后命令行:

// 删掉现有版本
cordova plugin rm cordova-plugin-inappbrowser
// 安装v2.0.0
cordova plugin add cordova-plugin-inappbrowser

改配置文件MyApp/config.xml

<preference name="SplashScreen" value="screen"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="auto-hide-splash-screen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="SplashScreenDelay" value="10000"/>

取消自动隐藏(改为代码控制隐藏),把持续时间改为较大的值(10秒),设置每次打开应用都显示splash screen

P.S.默认只有 SplashScreen 和 SplashScreenDelay ,需要把其它的( SplashMaintainAspectRatio 可选)都添上

改app.js

手动隐藏splash screen,在run里面添上

.run(['$rootScope', function($rootScope) {
        // init
        // $rootScope.isLoading = false;

        // hide splash immediately
        if(navigator && navigator.splashscreen) {
            navigator.splashscreen.hide();
        }
    });
}])

这样就好了,不要延时调用hide,否则仍然会出现白屏(有些解决方案要求$timeout 50毫秒hide,仍然会出现白屏,不要这样做)

最怨念的问题结束了,看似简单的功能,想要有 完美的原生体验 却很难,奇奇怪怪的问题很难解决,目前可行的解决方案可能过段时间就不行了,可以查看 White page showing after splash screen before app load 感受一下

回到顶部