启动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 启动页面的更多相关文章

  1. cordova启动页面和图标的设置

    一.config.xml配置 在cordova5.0版本以后,需要安装cordova-plugin-splashscreen插件以后才能修改和设置App的启动页面. 安装splashscreen插件: ...

  2. [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置

    原文地址:http://blog.csdn.net/lovelyelfpop/article/details/40780111 Phonegap/Cordova项目中的config.xml文件.里面配 ...

  3. PhoneGap+Cordova+SenchaTouch-01-环境搭建

    转http://my.oschina.net/zhongwenhao/blog/369465 环境搭建基于 windows  ,mac系统可以借鉴 1.安装NodeJS 和ruby http://no ...

  4. 跨平台移动开发phonegap/cordova 3.3全系列教程-目录

    目录(更新完成后会附上源码供参考) 第一章 android平台开发 phonegap/cordova简介 1.开发环境搭建 2.helloworld 3.启动画面 4.结合asp.net/jqmboi ...

  5. phonegap+cordova+ionic调用原生API

    上一篇博客讲了phonegap+cordova+ionic的环境搭建,今天再来分享一篇cordova调用原生API的文章.从技术角度上来讲,这并不是很难,只是有些细节要是没有注意,或者某些步骤不知道的 ...

  6. 解决ionic 启动页面图片没有显示及启动页出现黑白屏

    1.ionic 正确打包完app, 并且按照正常的步骤配置config.xml文件之后 ,启动页面还是不能正常的显示出来,而是黑了一下之后,就进入首页了 原因很有可能就是你没有装cordova-plu ...

  7. WINDOWS下PhoneGap(Cordova)安装笔记

    1.首先下载Node.js  安装nodejs很简单直接点击安装文件下一步直至成功即可,安装notejs的同时npm也会同时安装 成功后打开notejs的命令行工具 输入“node -v”," ...

  8. 为什么很多APP要有启动页面

    我们启动APP时,一般都会是一张含有LOGO的图片.这张图片叫做启动页面. 这个启动页面是必须.一定需要的吗?有什么作用?   这是苹果官方对于iOS启动页的设计说明:   为了增强应用程序启动时的用 ...

  9. phonegap(cordova)环境配置

    首先要配置好  java jdk 和 java jre 环境 配置之后 控制台  javac -version 查看是否配置成功 然后配置 Android sdk 配置之后 控制台 输入 adb 查看 ...

随机推荐

  1. 9款完美体验的HTML5/jQuery应用

    1.jQuery动画图标菜单导航 仿苹果样式 这次要分享的这款jQuery插件非常酷,它是一款带有动画按钮的jQuery菜单插件.而且从菜单的外观上来看,有点苹果菜单风格的味道.当我们将鼠标滑过菜单项 ...

  2. 关于CORS

    前几天碰到CORS问题,只要在“Access-Control-Allow-Origin”响应头中添加对应域名即可. 今天做一个上传文件的demo,利用XMLHttpRequest向服务器发送post请 ...

  3. Request.IsLocal与Request.Url.IsLoopback的区别

    均在服务器上访问时: http://localhost:17810 Request.IsLocal => trueRequest.Url.IsLoopback => true http:/ ...

  4. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

    JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...

  5. 使用原生Sql查询实现按分类推送最新文章到首页

    一般在网站的首页都会有网站最新文章的推送,而这些文章又属于不同的分类.如果某个分类的文章突然集中在一个时间段发布,那么就会造成首页上所有文章都是该分类的文章,其他的文章分类就变成不可见的了.所以,我希 ...

  6. solr6安装部署

    难得写篇自己的原创文档了,哈哈哈,原谅我知识浅薄,积淀太少 一.涉及到的软件和环境jdk1.8.0_92,tomcat8,zookeeper3.4.8,solr6.1.0(solr6需要jdk8以上环 ...

  7. LANMP 如何禁止访问 .htaccess 文件

    很多朋友问我,为什么他已经在 Apache 规则里面加了禁止别人直接下载 .htaccess 文件,为什么还是可以下载? 其实这个很简单,因为 .htaccess 在 LANMP 环境下,当他作为文件 ...

  8. php读取html并截取字符串

    一般php采集代码能用的到,这里只是简单的实现代码. <?php $title='脚本学堂'; $hello='jbxue.com!'; $file=file_get_contents('htt ...

  9. php多层数组与对象的转换实例代码

    通过json_decode(json_encode($object)可以将对象一次性转换为数组,但是object中遇到非utf-8编码的非ascii字符则会出现问题,比如gbk的中文,何况json_e ...

  10. easyui菜单栏的使用

    <div id="tabs" class="easyui-tabs" data-options="plain:true,fit:true,bor ...