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

1 bindEvents: function() {
2     document.addEventListener('deviceready', this.onDeviceReady, false);
3 },
4     onDeviceReady: function() {    
5     app.receivedEvent('deviceready');
6     <strong><span style="color: #ff0000;">navigator.splashscreen.hide();</span></strong>
7 }

注意:

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

设置 phoneGap/Cordova 3.4 应用程序启动动画闪屏 SplashScreen的更多相关文章

  1. Phonegap之ios对iPhone6和Plus的闪屏适配 -- xmTan

    故事的发生起于,由于老板强烈要求app在iPhone6和5有一样的工具栏,然后前端妹子用@media为iPhone6和Plus做了样式适配.然后问题来了,竟然奇葩的发现@media样式只对iPhone ...

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

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

  3. 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用

    1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...

  4. delphi FMX APP程序图标,闪屏,程序名

  5. Android程序启动加载动画实现

    package com.example.bmob_test.ui;//程序启动动画,图片颜色由浅到深,方法一 import com.example.bmob_test.LogActivity; imp ...

  6. ios常见细节问题-删掉main.storyboard程序启动屏幕变黑-崩溃

    删掉程序默认的main.storyboard文件后,程序启动崩溃 如图所示.原因是删掉main.storyboard文件后没有在info.plist文件里面设置 删掉main.storyboard后程 ...

  7. 跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面

    1.app启动画面设计 用photoshop设计启动画面,图片分辨率为720*1280 保存的文件名为splash.png 将splash.png复制到res\drawable,如图 PS:要先添加闪 ...

  8. phonegap/cordova 启动页面

    启动phonegap应用时,因为phonegap还在加载一系列的东西,总会出现一段时间的黑屏.解决方法是设置一个启动页面(闪屏)来过渡,让应用的用户体验更好一些. 先讲ios版本的: 首先,你需要准备 ...

  9. 设置程序启动时加载的storyboard

    这个设置表明:程序启动时会加载Main.storyboard

随机推荐

  1. JSF 与 HTML 标签的联系

    *页面的开头 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ t ...

  2. ASM FailGroup验证

    ASM-FailGroup验证 一.FailGroup有效性验证 创建DiskGroup,在Redundancy选项 High:至少3块disk,至少3个failgroup,每一个extent存在1主 ...

  3. Eclipse修改编码格式

    ♣修改工作空间默认编码 ♣修改文件的编码 ♣修改某文件类型的编码 ♣修改JSP文件类型的编码 1.修改工作空间默认编码 window -> preferences ->  General ...

  4. track message forwards, avoiding request loops, and identifying the protocol capabilities of all senders along the request/response chain

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html The TRACE method is used to invoke a remote, ...

  5. .NET基于Redis缓存实现单点登录SSO的解决方案[转]

    一.基本概念 最近公司的多个业务系统要统一整合使用同一个登录,这就是我们耳熟能详的单点登录,现在就NET基于Redis缓存实现单点登录做一个简单的分享. 单点登录(Single Sign On),简称 ...

  6. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  7. linux 压缩 解压zip 命令

    将当前目录下的所有文件和文件夹全部压缩成test.zip文件,-r表示递归压缩子目录下所有文件zip -r test.zip ./* 打包目录zip test2.zip test2/*解压test.z ...

  8. stream数据流

    首先必须先要了解Buffer,Buffer是js和c++的结合体,类数组,通常与Stream一起用: 1. (1).Buffer是个类,因此可以构建成对象 (2).buf具有数组的性质 字符串转换成二 ...

  9. [CC]DgmOctree—执行Cell遍历和单元计算

    DgmOctree类的executeFunctionForAllCellsAtLevel和executeFunctionForAllCellsStartingAtLevel方法通过回调函数octree ...

  10. onload事件-----addLoadEvent函数

    在给网页加一些特效时经常要在<body>中加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!')”,但这样做有个大的缺陷 ...