設置 phoneGap/Cordova 3.4 應用程序啓動動畫閃屏 SplashScreen

當Cordova 程序打包並安裝到手機中後，咱們會發現啓動程序時，會有數秒的黑屏現象，常見的解決方法則是設置閃屏後面。

這裏以 Android 程序爲例，介紹Cordova設置啓動畫面的方法。

1. 添加動畫閃屏支持

打開cmd，進入項目目錄下，執行命令：

cordova plugin add org.apache.cordova.splashscreen

2. 製做啓動畫面圖片

根據 platforms\android\res\ 目錄下的不一樣目錄下的圖片大小，分別製做不一樣屏幕適應的 png 格式圖片，並一一替換。

3. 增長項目配置項

在項目根目錄下的config.xml中添加兩個配置項：

<preference name=」SplashScreen」value=」splash」 />
<preference name=」SplashScreenDelay」 value=」30000″ />

第一個配置指定了啓動畫面的文件名；
第二個設置指定啓動畫面停留的時間（單位爲毫秒）。

4. 增長隱藏閃屏畫面處理

當設備就緒後，便可及時隱藏閃屏。在 deviceready 事件處理函數中，加入隱藏閃屏畫面的代碼。參考以下：

1	bindEvents: function() {

2	document.addEventListener('deviceready', this.onDeviceReady, false);

3

},

4	onDeviceReady: function() {

5	app.receivedEvent('deviceready');

6	<strong><span style="color: #ff0000;">navigator.splashscreen.hide();</span></strong>

7

}

注意：

配置項 SplashScreenDelay 的值建議儘可能設置大一些，好比 30000（30秒）。閃屏畫面顯示時，其餘資源文件是按正常狀況加載的（即程序不會等到啓動畫面消失再開始加載），若是設置的delay值過小，好比3000（3秒），而首頁加載須要5000（5秒），則有2秒的時間屏幕會處於黑屏狀態。因此咱們設置的值應大於首頁加載時間值時，當設備就緒後隱藏閃屏畫面便可。