跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面
2014-03-20 15:24
567 查看
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调试即可看到效果
相关文章推荐
- 跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面
- 跨平台移动开发phonegap/cordova 3.3全系列教程-调用webservice/ajax
- 跨平台移动开发phonegap/cordova 3.3全系列教程-图片上传
- 跨平台移动开发phonegap/cordova 3.3全系列教程-helloworld
- 跨平台移动开发phonegap/cordova 3.3全系列教程-百度云推送push
- 跨平台移动开发phonegap/cordova 3.3全系列教程-开发环境搭建
- 跨平台移动开发phonegap/cordova 3.3全系列教程-helloworld
- 跨平台移动开发phonegap/cordova 3.3全系列教程-开发环境搭建
- 跨平台移动开发phonegap/cordova 3.3全系列教程-百度云推送push
- 跨平台移动开发phonegap/cordova 3.3全系列教程-目录
- 添加插件--跨平台移动开发phonegap/cordova 3.3全系列教程-helloworld
- 百度云推送push-- 跨平台移动开发phonegap/cordova 3.3全系列教程
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
- 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自动更新App的Web内容
- [Phonegap+Sencha Touch] 移动开发76 让cordova app访问远端网站也能调用cordova插件功能
- [Phonegap+Sencha Touch] 移动开发76 让cordova app訪问远端站点也能调用cordova插件功能
- [Phonegap+Sencha Touch] 移动开发61 使用 URL Schemes实现一个App启动另一个App的功能
- 探索开发跨平台移动App,谈Jquery Mobile 和PhoneGap应用