设置 phoneGap/Cordova 3.4 应用程序启动动画闪屏 SplashScreen

20,676次阅读
4 条评论

共计 950 个字符,预计需要花费 3 分钟才能阅读完成。

提醒:本文最后更新于2017-08-31 17:58,文中所关联的信息可能已发生改变,请知悉!

当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 事件处理函数中,加入隐藏闪屏画面的代码。参考如下:

bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
navigator.splashscreen.hide();
}

注意:

配置项 SplashScreenDelay 的值建议尽量设置大一些,比如 30000(30秒)。闪屏画面显示时,其他资源文件是按正常情况加载的(即程序不会等到启动画面消失再开始加载),如果设置的delay值太小,比如3000(3秒),而首页加载需要5000(5秒),则有2秒的时间屏幕会处于黑屏状态。所以我们设置的值应大于首页加载时间值时,当设备就绪后隐藏闪屏画面即可。

参考

http://blog.csdn.net/zythy/article/details/22405659
https://github.com/apache/cordova-plugin-splashscreen

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2014-05-26发表,共计950字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(4 条评论)
验证码
humorHan 评论达人 LV.1
2017-08-28 18:30:02 回复
Google Chrome 60.0.3112.113 Google Chrome 60.0.3112.113 Mac OS X 10.12.3 Mac OS X 10.12.3

加上之后的现象: 先黑屏,之后显示启动画面,之后是正常页面。
LZ的app是无黑屏现象的?

 Macintosh  Chrome  中国北京北京市联通
humorHan 评论达人 LV.1
2017-08-28 18:28:20 回复
Google Chrome 60.0.3112.113 Google Chrome 60.0.3112.113 Mac OS X 10.12.3 Mac OS X 10.12.3

确实是有启动动画,但是并没有解决问题呢?
现在的现象是先黑屏然后显示启动动画,之后再是页面!

 Macintosh  Chrome  中国北京北京市联通
xingheng 评论达人 LV.1
2016-10-09 17:12:17 回复
UC Browser 7.6 UC Browser 7.6 Windows 7 x64 Edition Windows 7 x64 Edition

设置大于3000ms 比如9000ms就会出现一个圈圈

 Windows  Chrome  中国广东省深圳市电信