当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. SQL语法

    full outer--全连.两表相同的组合在一起,A表有,B表没有的数据(显示为null),同样B表有,A表没有的显示为(null) A表 left join B表--左连,以A表为基础,A表的全部 ...

  2. C++11新特性——初始化列表 initializer_list

    破事水: 由于最近数据结构有个实验报告说是要对字符串进行排序,想偷个懒不想一个一个地赋值,虽然可以用strcpy和传入二级指针的形式直接写,但是这样感觉不美观漂亮. 然后就去膜了一下C++11的新特性 ...

  3. 如何用shared_ptr减少锁的争用

    在并发环境下锁的使用是家常便饭, 如何减少锁的使用是优化程序性能的一个方面. c++11里面新增了智能指针std::shared_ptr, 这个东西也许能给我们带来些启发. shared_ptr的一个 ...

  4. maxscale

    一.maxscale简介1.MaxScale是maridb开发的一个mysql数据中间件,其配置简单,能够实现读写分离,并且可以根据主从状态实现写库的自动切换.2.官网:https://mariadb ...

  5. 掌握Thinkphp3.2.0----连贯操作

    其实在TP中,说起来语句中的各个关键词都被封装成了函数,将各个由关键词演变来的函数连起来就是所谓的连贯操作.只要注意各个函数直接参数传递的区别就可以了. 再者,不是所有的函数都可以进行连贯操作!!!比 ...

  6. tensorfolw配置过程中遇到的一些问题及其解决过程的记录(配置SqueezeDet: Unified, Small, Low Power Fully Convolutional Neural Networks for Real-Time Object Detection for Autonomous Driving)

    今天看到一篇关于检测的论文<SqueezeDet: Unified, Small, Low Power Fully Convolutional Neural Networks for Real- ...

  7. cloudera learning6:Hadoop Security

    保证Hadoop安全的最有效方法是对cluster进行隔离(isolation,常用方法是把大集群划分若干个小集群). Hadoop安全措施的目的是防止好的人不小心做了坏的事,而非防止坏人坏事. Ke ...

  8. tomcat404报错解决

    本地启动tomcat,不报错.也可正常打开http://localhost:8080 但是eclipse中启动tomcat不报错.但是打开http://localhost:8080时报404 思考,原 ...

  9. awk的数组使用经历

    背景:之前是一个数学妞,所以操作系统类的就由windows系列霸占了,甚至“cmd"是什么东西,环境变量是什么概念......其实说那么多就是想表明一点:你现在很有可能比我知道得多得多呢! ...

  10. JSONModel对架构的影响及解决方案

    越来越多的项目使用CocoaPods,使用CocoaPods很有可能会用过JSONModel. JSONModel是个很强大的库,只要根据JSON定义好对应的类并继承JSONModel,就可以把JSO ...