跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面
2014-02-06 16:11
387 查看
1.app启动画面设计
用photoshop设计启动画面,图片分辨率为720*1280保存的文件名为splash.png
将splash.png复制到res\drawable,如图
PS:要先添加闪屏插件才能使用(示例中已经添加,此步略过)
cordova plugin add org.apache.cordova.splashscreen
修改res\xml\config.xml加入
此节点为使用启动画面
<preference
name="SplashScreen"
value="splash"/>
此节点为启动画面延时单位为毫为,建议设置为20秒(防止网络延时,程序没有加载完成,导致黑屏。
<preference
name="SplashScreenDelay"
value="20000"/>
如图
App启动成功后关闭启动画面
在启动的页面中加入代码,设备初始化后,隐藏启动画面
document.addEventListener("deviceready", onDeviceReady,
false);
function onDeviceReady() {
navigator.splashscreen.hide();
}
启动app调试即可看到效果
相关文章推荐
- 跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面
- 百度云推送push-- 跨平台移动开发phonegap/cordova 3.3全系列教程
- 添加插件--跨平台移动开发phonegap/cordova 3.3全系列教程-helloworld
- 跨平台移动开发phonegap/cordova 3.3全系列教程-百度云推送push
- 跨平台移动开发phonegap/cordova 3.3全系列教程-百度云推送push
- 跨平台移动开发phonegap/cordova 3.3全系列教程-目录
- 跨平台移动开发phonegap/cordova 3.3全系列教程-helloworld
- 跨平台移动开发phonegap/cordova 3.3全系列教程-开发环境搭建
- 跨平台移动开发phonegap/cordova 3.3全系列教程-调用webservice/ajax
- 跨平台移动开发phonegap/cordova 3.3全系列教程-图片上传
- 跨平台移动开发phonegap/cordova 3.3全系列教程-开发环境搭建
- 跨平台移动开发phonegap/cordova 3.3全系列教程-helloworld
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析(系列二)
- 跨平台移动开发phonegap/cordova 4 ios 开发环境搭建
- cordova SplashScreen插件在android上退出app后不再显示启动画面的问题
- 使用Vue构建Ionic混合APP系列教程最后一篇(五):使用Vue CLI编译最终的Cordova应用
- 跨平台移动开发phonegap/cordova 3.3全系列教程
- 解决PhoneGap(Cordova)在iOS中启动画面闪动的问题 - 技术博客
- PhoneGap 教程:一个跨平台的 Todo App
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置