解决ionic 启动页面图片没有显示及启动页出现黑白屏

1、ionic 正确打包完app， 并且按照正常的步骤配置config.xml文件之后 ，启动页面还是不能正常的显示出来，而是黑了一下之后，就进入首页了

原因很有可能就是你没有装cordova-plugin-splashscreen这个插件，尝试安装：

cordova plugin add cordova-plugin-splashscreen

重新打包，即可显示出来启动页图片

2、启动页打开后会在图片消失会出现一小段黑屏的时间

解决方法：

首先，启动页的图片消失时间默认是在config.xml配置的

<preference name="SplashScreenDelay" value="3000"/>

也就是3s后自动消失，但是往往这个时候，app的资源还没有加载完整，所以，会在消失后显示一小段时间黑屏；

因此，我们不要让他在config.xml配置自动消失，或者让他持续很长时间才消失，例如10s,然后我们在app.js 让他在设置资源加载完成准备就绪的时候才让他消失显示我们的app主页；

config.xml配置改为：

  <preference name="SplashScreen" value="screen"/>
  <preference name="AutoHideSplashScreen" value="false"/>  
  <preference name="ShowSplashScreenSpinner" value="false"/>  
  <preference name="SplashMaintainAspectRatio" value="true"/>  
  <preference name="SplashShowOnlyFirstTime" value="false"/>  
  <preference name="SplashScreenDelay" value="10000"/>  
  <preference name="FadeSplashScreenDuration" value="300"/>

然后，app.js添加代码 navigator.splashscreen.hide()，如下：

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    //啟動頁面消失
    navigator.splashscreen.hide();
  });

这样，这个bug就可以解决了。ionic app 的细节问题很多，如果不尝试去解决的话，那app的体验将会很差，所以，尽量记录起来！

转载于:https://www.cnblogs.com/luleixia/p/6594990.html