phonegap/cordova 启动页面
启动phonegap应用时,因为phonegap还在加载一系列的东西,总会出现一段时间的黑屏。解决方法是设置一个启动页面(闪屏)来过渡,让应用的用户体验更好一些。
先讲ios版本的:
首先,你需要准备一下图片:
- Default-568h@2x~iphone.png (640x1136 pixels)
- Default-Landscape@2x~ipad.png (2048x1496 pixels)
- Default-Landscape~ipad.png (1024x748 pixels)
- Default-Portrait@2x~ipad.png (1536x2008 pixels)
- Default-Portrait~ipad.png (768x1004 pixels)
- Default@2x~iphone.png (640x960 pixels)
- Default~iphone.png (320x480 pixels)
名字最好也这样命名,然后替换掉project's Resources/splash。便可以了。
android版本的:
制作9宫格的启动画面(不明请自行百度,主要为了适应不同的分辨率),然后,替换platforms/android/res/drawable*
目录(*号代表不同尺寸)
尺寸应该是:
- xlarge (xhdpi): at least 960 × 720
- large (hdpi): at least 640 × 480
- medium (mdpi): at least 470 × 320
- small (ldpi): at least 426 × 320
然后在config.xml中配置
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />
最后,不要忘了安装splashScreen插件 如不会安装,参考这里 点击打开
安装插件后,我们需要做的就算 在 deviceready
事件中把启动画面隐藏掉就行了。(因为启动页面已经完成了他的使命)
android直接navigator.splashscreen.hide()就可以了。
ios有点特殊,需要
setTimeout(function() {
navigator.splashscreen.hide();
}, 1000);
这是插件本身存在的差异。
至于navigator.splashscreen.show(),因为启动画面默认已启动就会显示,所以我们无需手动去调用该方法
另外,还有一种方法,可以通过把
android/screen-hdpi-landscape.png
android/screen-hdpi-portrait.png
android/screen-ldpi-landscape.png
android/screen-ldpi-portrait.png
android/screen-mdpi-landscape.png
android/screen-mdpi-portrait.png
android/screen-xhdpi-landscape.png
android/screen-xhdpi-portrait.png以及
ios/screen-ipad-landscape-2x.png
ios/screen-ipad-landscape.png
ios/screen-ipad-portrait-2x.png
ios/screen-ipad-portrait.png
ios/screen-iphone-landscape-2x.png
ios/screen-iphone-landscape.png
ios/screen-iphone-portrait-2x.png
ios/screen-iphone-portrait.png
ios/screen-iphone-portrait-568h-2x.png
都放在www/res/screens目录下,然后在config中做相应配置。实现同样的效果(这种文档上有写,但我没有验证过)
大家也可以参考一下官方文档,点击这里
phonegap/cordova 启动页面的更多相关文章
- cordova启动页面和图标的设置
一.config.xml配置 在cordova5.0版本以后,需要安装cordova-plugin-splashscreen插件以后才能修改和设置App的启动页面. 安装splashscreen插件: ...
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/40780111 Phonegap/Cordova项目中的config.xml文件.里面配 ...
- PhoneGap+Cordova+SenchaTouch-01-环境搭建
转http://my.oschina.net/zhongwenhao/blog/369465 环境搭建基于 windows ,mac系统可以借鉴 1.安装NodeJS 和ruby http://no ...
- 跨平台移动开发phonegap/cordova 3.3全系列教程-目录
目录(更新完成后会附上源码供参考) 第一章 android平台开发 phonegap/cordova简介 1.开发环境搭建 2.helloworld 3.启动画面 4.结合asp.net/jqmboi ...
- phonegap+cordova+ionic调用原生API
上一篇博客讲了phonegap+cordova+ionic的环境搭建,今天再来分享一篇cordova调用原生API的文章.从技术角度上来讲,这并不是很难,只是有些细节要是没有注意,或者某些步骤不知道的 ...
- 解决ionic 启动页面图片没有显示及启动页出现黑白屏
1.ionic 正确打包完app, 并且按照正常的步骤配置config.xml文件之后 ,启动页面还是不能正常的显示出来,而是黑了一下之后,就进入首页了 原因很有可能就是你没有装cordova-plu ...
- WINDOWS下PhoneGap(Cordova)安装笔记
1.首先下载Node.js 安装nodejs很简单直接点击安装文件下一步直至成功即可,安装notejs的同时npm也会同时安装 成功后打开notejs的命令行工具 输入“node -v”," ...
- 为什么很多APP要有启动页面
我们启动APP时,一般都会是一张含有LOGO的图片.这张图片叫做启动页面. 这个启动页面是必须.一定需要的吗?有什么作用? 这是苹果官方对于iOS启动页的设计说明: 为了增强应用程序启动时的用 ...
- phonegap(cordova)环境配置
首先要配置好 java jdk 和 java jre 环境 配置之后 控制台 javac -version 查看是否配置成功 然后配置 Android sdk 配置之后 控制台 输入 adb 查看 ...
随机推荐
- 20141124-JS函数
函数: 函数是由事件驱动或者当它被调用时执行的可重复色代码块. <head> <script> function hanshu() { alert("你好!" ...
- 杭电ACM2091--空心三角形
http://acm.hdu.edu.cn/showproblem.php?pid=2091 scanf 和 printf的输入输出功能并不强大.有时候我们需要清空输入输出流,所以一定切记getcha ...
- git使用小结
本篇文章主要介绍自己在平时工作中使用git的一些常用命令,之前都是记录在本子上面,现在把他们记录在博客上,便于保存和回顾. 1. 建立自己的git仓库 1.1 在一个新建的repo文件夹里面,执行gi ...
- ABAP OO与ALV结合方式探索(2)
接上篇 一开始设计的BO 类是为了实现功能而实现功能 从类的单一职责的角度而言 先把这个BO对象拆分 这里又有一个需要考虑的点: 如何传递内表数据到ALV 如果引入一个中间变量,数据就会被do ...
- iOS开发之窗口和视图
视图就是应用程序的界面.视图可以使用nib文件实现,也可以使用代码创建.一个视图也是一个响应器(UIResponder的子类)这意味着一个视图可以与用户交互.因此,视图不只是用户可看到的界面,也是可以 ...
- activiti系列导读
此用于管理activiti系列标签文章,activiti的分析是建立在目前最新的版本5.21之上. 官方指导手册链接:http://www.activiti.org/userguide/index.h ...
- C# CacheHepler Class
internal class CacheHelper { /// <summary> /// Insert value into the cache using /// appropria ...
- Thinkphp常用的方法和技巧(转)
2012年09月26日 Thinkphp 里一些常用方法和技巧的整理,包括常用的快捷键以及在程序开发时用到的一些实用方法,关于快捷键用得不是很熟练,总之,掌握这些方法和技巧,对于我们开发 thinkp ...
- 再也不要说,jquery动画呆板了
1 show()方法和hide()方法 $("selector").show() 从display:none还原元素默认或已设置的display属性$("selecto ...
- Vbox安装oracle-linux报错:VT-x features locked or unavailable in M
1.安装完Vbox后,通过vbox来安装oracle-linux时报“VT-x features locked or unavailable in MSR”: 2.报错原因:CPU没有开启虚拟化支持 ...