ionic2常见问题-启动后白屏问题

时间:2024-04-22 12:06:56

问题描述

app启动后大概有几秒白屏,才会显示首页,如下gif图

ionic2常见问题-启动后白屏问题
启动有白屏.gif

解决方法1

  • 请查看以下3张图的标注
    ionic2常见问题-启动后白屏问题
    图 1-最初config.xml配置
    ionic2常见问题-启动后白屏问题
    图 2-更改后的splash配置
    ionic2常见问题-启动后白屏问题
    图 3
  • config.xml配置代码
    <preference name="ShowSplashScreen" value="true"/>
    <preference name="SplashScreen" value="screen"/>
    <preference name="SplashScreenDelay" value="3000"/>
    <preference name="AutoHideSplashScreen" value="false"/>
    <preference name="SplashShowOnlyFirstTime" value="false"/>
    <preference name="FadeSplashScreen" value="false"/>
    <feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
    </feature>
  • 目前虽然没有白屏了,但是启动画面显示时间比较长
    使用ionic build android生成的.apk启动时间比较长,如下gif图
    使用ionic build android --prod生成的.apk启动时间在5秒内
    所以我们生成环境的apk启动是不会慢的
    ionic2常见问题-启动后白屏问题
    没有白屏啦,但启动比慢.gif

解决方法2

也可以算不上解决方法,但是也可能比较有用,效果如下gif图

ionic2常见问题-启动后白屏问题
  • 只修改index.html,具体代码如下图, config.xml是最初的设置,这样的好处是可以用html控制首页的样式.
    ionic2常见问题-启动后白屏问题
    <div class="appSplash">
    <div style="font-size: 30px;text-align: center">这里可以放广告图片</div>
    <img src="./assets/img/qr_code.png" alt=""
    </div>

其他

    • config.xml配置代码加上<preference name="ShowSplashScreenSpinner" value="false"/>这句,就不会出现启动时候那个一直在转的圈圈,我上面的配置代码没有加
    • 参考链接
    • 当前版本信息
      ionic2常见问题-启动后白屏问题