解決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的體驗將會很差,所以,盡量記錄起來!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM