ionic开发介绍之Config.xml文件关于splash和icon(实现手动关闭splash)

本文只是简单的简绍。适用于刚刚开发ionic项目的同学学习了解

软件在手机上启动需要splash，，一篇文章

Ionic工程可以在浏览器方便的做测试。但是在手机上运行的时候还需要，准备图标和启动画面（ionic启动打开网页需要一段时间，因此最好配上splash）。关于在手机上运行则涉及到对应的硬件平台。就相关到cordova。Cordova负责生成各个平台上的运行软件。同时对相应平台提供硬件资源接口。注：cordova主要是把www目录下的网页打包成各种平台下的运行软件，其次是提供各个平台下硬件资源的接口。其中在项目根目录的config.xml是cordova的配置文件。包括应用的名称，图标，启动页面，插件，使用等。根目录下的config.xml在生成对应平台下的运行软件时会被复制在对应的平台的目录里（platforms/目录下）：

   app/platforms/ios/AppName/config.xml

   app/platforms/blackberry10/www/config.xml

   app/platforms/android/res/xml/config.xml

其详细简绍请查看：官方文档：

http://cordova.apache.org/docs/en/3.6.0/config_ref/index.html

 

 

大体上的步骤是：
官方文档为：

http://cordova.apache.org/docs/en/3.6.0/config_ref/images.html；

 

在工程目录下新建resources目录，在目录里放置icon.png和splash.png两个文件，注意名字类型是固定的。不能起别的名字。详细解释请看其他作者的文章：

http://ionichina.com/topic/54e455ab2be672f1111c01e2

 

然后在项目路径下执行 ionic resources 就会在ressources目录下生产Android和iOS两个平台的icon和splash

$ ionic resources --icon

$ ionic resources –splash

使用这两个可以单独生产Android和ios的图标，同时在项目的根目录会的config.xml里会添加对应的资源

当图片资源准备好之后，执行命令：

Ionic build android

Ionic run android

 

在手机上运行一般就会显示出splash界面，如果没有的化，执行命令：

Ionic plugin addorg.apache.cordova.splashscreen 添加splash插件

如果启动正常，但是splash结束之后出现了一段时间黑屏然后才出现app页面内容，说明splash太早结束了，虽然在工程根目录下的config.xml有调整splash实际的方法。但是终究还是不稳定，所以呢，好的办法是，让splash一直显示，然后在进入软件页面正文后，通过代码控制splash消失。具体的实现是如下：

在config.xml文件里添加：

1.<preference name="AutoHideSplashScreen" value="false"/>  1.<preference name="ShowSplashScreenSpinner" value="false"/>  2.<preference name="SplashMaintainAspectRatio" value="true"/>  3.<preference name="SplashShowOnlyFirstTime" value="false"/>  4.<preference name="SplashScreenDelay" value="10000"/>  5.<preference name="FadeSplashScreen" value="false"/>  

最终添加后的文件如下：

<content src="index.html"/><access origin="*"/><preference name="webviewbounce" value="false"/><preference name="UIWebViewBounce" value="false"/><preference name="DisallowOverscroll" value="true"/><preference name="android-minSdkVersion" value="16"/><preference name="BackupWebStorage" value="none"/><preference name="AutoHideSplashScreen" value="false"/><preference name="ShowSplashScreenSpinner" value="false"/><preference name="SplashMaintainAspectRatio" value="true"/><preference name="SplashShowOnlyFirstTime" value="false"/><preference name="SplashScreenDelay" value="10000"/><preference name="FadeSplashScreen" value="false"/>

然后在index.html文件head里添加如下脚本：

<script type="text/javascript">  document.addEventListener("deviceready", onDeviceReady, false);  function onDeviceReady() {    navigator.splashscreen.hide();  }</script>

即可实现，加载完成网页文件及脚本，在关闭splash