最新消息:

phonegap设置启动界面(splashscreen)

android 大步 4829浏览 0评论
 

安装cordova-plugin-splashscreen插件

想要添加和设置启动界面,必须先要安装cordova的splashscreen插件。你可以先去phonegap的项目下的plusins/目录下查看是否有splashscreen插件。假设我这里的phonegap项目根目录是 testapp/ ,则需要打开testapp/plugins/。
截图如下:

如果没有,就需要手动安装。先将cmd的当前目录切换到phonegap项目的根目录下,再执行下面的命令安装splashscreen插件:
>phonegap cordova plugin add cordova-plugin-splashscreen
 
如果安装成功,则plugins/目录下就会有个叫做“cordova-plugin-splashscreen”的目录。
 
或者也可以直接使用下面的命令查看项目已经安装的cordova插件:
>phonegap cordova plugin ls
 
 

添加启动界面图片资料

假设我的phonegap项目的是testapp/ ,则你需要将不同分辨率的启动图片添加testapp\platforms\android\res\中的对应的drawable目录下。
 
 

配置config.xml文件

打开testapp/config.xml:
添加下面一行:
    <gap:plugin name="org.apache.cordova.splashscreen" />
 
很有可能,phonegap创建项目的时候,默认就有了这一行。如果已经有了这一行,那你就无需再次添加了。
 
 
假设我的启动图片名字叫splash.png
再添加下面两行:

 

 
value="splash" 中,"splash"是启动界面图片的文件名,系统会自动根据手机分辨率找对应的图片。
value="10000" 中,"1000"表示延迟多少后,从启动界面跳转到应用的主界面。
 
 

添加javascript在deviceready后跳转到主界面

在首页index.xml中添加:

 

 
注意:
上面配置项SplashScreenDelay的值建议尽量设置大一些,比如20000(20秒)。按照我的理解,启动画面显示时,首页仍然是按正常情况在加载(即程序不会等到启动画面消失再开始加载首页);如果设置的delay值太小,比如3000(3秒),而首页加载需要5000(5秒),则有2秒的时间屏幕会处于黑屏状态。设置的值大于首页加载时间值时,红色代码的那一行将提前隐藏启动画面。
 
 
==========完===================
 
 

 

来自为知笔记(Wiz)

 

转载请注明:大步's Blog » phonegap设置启动界面(splashscreen)

SiteMap