设置 phoneGap/Cordova 3.4 应用程序启动动画闪屏 SplashScreen

当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秒的时间屏幕会处于黑屏状态。所以我们设置的值应大于首页加载时间值时,当设备就绪后隐藏闪屏画面即可。

时间: 2024-10-13 11:43:57

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

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

故事的发生起于,由于老板强烈要求app在iPhone6和5有一样的工具栏,然后前端妹子用@media为iPhone6和Plus做了样式适配.然后问题来了,竟然奇葩的发现@media样式只对iPhone4和5起了作用,然后在6和6S的样式效果和5是一样的,奇了怪了! 然后我去查找原因,无意中去获取设备屏幕宽高时发现了这神奇的现象: CGRect screenBounds = [[UIScreen mainScreen] bounds]; NSString *str = NSStringFromCG

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

Phonegap/Cordova项目中的config.xml文件,里面配置了下面的内容: <icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" /> <icon gap:platform="android" gap:qualifier="mdpi" src=&quo

程序启动动画

#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIImageView *splashView; @property (strong, nonatomic) UIWindow *window; @end #import "AppDelegate.h" @interface AppDe

android Theme启动APP闪屏处理

//1.设置背景图Theme <style name="Theme.AppStartLoad" parent="android:Theme">       <item name="android:windowBackground">@drawable/ipod_bg</item>       <item name="android:windowNoTitle">true</

UI进阶之程序启动原理及UIApplication

UIApplication对象介绍: 1> 一个UIApplication代表是一个应用程序,而且是单例的. ** 用来封装整个应用程序的一个对象, 比如当应用程序执行到某个时期要做什么, 生命周期等. 2> 获取UIApplication对象: [UIApplication sharedApplication];(单例的) /** 验证单例模式, 参考代码: - (void)viewDidLoad { [super viewDidLoad]; UIApplication *app1 = [U

在您的应用程序添加启动动画

这是弥补2014.11.30 虽然你可能认为你需要编写闪屏的代码,苹果已经可以非常轻松地把它做在Xcode中.不需要任何编码.你只需要做的是设置一些配置. 什么是闪屏 对于那些新学代码的人,可能没有听说过“闪屏”把,让我先作一个简单的解释.闪屏是常见于iOS应用程序,以及其他桌面应用程序.这是你启动一个应用程序时,你看到的第一个画面.通常情况下,初始屏幕是一个覆盖整个屏幕的图像,消失后加载主屏幕.下图显示了几种闪屏: 简单闪屏(开始页面) 闪屏的主要目的是为了让用户知道你的程序在加载,并给用户提

PhoneGap+Cordova+SenchaTouch-04-退出程序和对话框的使用

sencha touch 2.4.1对话框的使用是很简单的. 下面简单介绍下st对话框的使用,查看官方文档,在Ext.Msg中,找到show 方法,有个示例挺好 图1 按着示例做就搞定了! 我的代码如下,也是示例. Ext.Msg.confirm("Confirmation", "Are you sure you want to do that?", Ext.emptyFn); 效果图如下: 这里,我想把按钮等英文改为中文,查看文档,可以看到Ext.Msg有个but

设置程序启动时加载的storyboard

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

Phonegap(cordova)创建项目,并结合eclipse开发工具进行打包生成apk包

1.使用phonegap(cordova)创建并编辑项目 (1)创建一个文件夹用于存放稍后创建的Android程序,这里我们在E盘创建了一个文件夹AndroidProject,适用cd命令进入该目录,接下来适用phonegap命令创建对应的android项目. phonegap的创建指令:  phonegap create hello com.example.hello HelloWorld hello:你的项目文件夹名称,   com.example.hello:你的项目内部包名   Hell