设置 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秒的时间屏幕会处于黑屏状态。因此咱们设置的值应大于首页加载时间值时，当设备就绪后隐藏闪屏画面便可。