1. 程式人生 > >跨平臺移動開發phonegap/cordova 3.3全系列教程-app啟動畫面

跨平臺移動開發phonegap/cordova 3.3全系列教程-app啟動畫面

1.app啟動畫面設計

用photoshop設計啟動畫面,圖片解析度為720*1280


儲存的檔名為splash.png

將splash.png複製到res\drawable,如圖


PS:要先新增閃屏外掛才能使用(示例中已經新增,此步略過)

cordova plugin add org.apache.cordova.splashscreen

修改res\xml\config.xml加入

此節點為使用啟動畫面

<preferencename="SplashScreen"value="splash"/>

此節點為啟動畫面延時單位為毫為,建議設定為20秒(防止網路延時,程式沒有載入完成,導致黑屏。

<preferencename="SplashScreenDelay"value="20000"/>

如圖


App啟動成功後關閉啟動畫面

在啟動的頁面中加入程式碼,裝置初始化後,隱藏啟動畫面

document.addEventListener("deviceready", onDeviceReady,false);

            function onDeviceReady() {

                navigator.splashscreen.hide();      

}

啟動app除錯即可看到效果

針對程式設計師的養生保健微信18136761128(專治頸椎、久坐導到慢性疾病,已經上央視了,假一罰十)