Ionic development introduction of the Config.xml file about splash and icon (Implementation manual shutdown Splash) __ionic

This article is just a simple Jinschau. Suitable for students who have just developed Ionic project

Software to start on the phone requires splash, an article

The ionic project can be easily tested in a browser. However, when running on the phone also need, to prepare the icon and splash screen (ionic start to open the page will take a while, so it is best to match the splash). About running on the phone involves the corresponding hardware platform. Related to Cordova. Cordova is responsible for generating the running software on each platform. Meanwhile, the hardware resource interface is provided for the corresponding platform. Note: Cordova is mainly to package the Web pages under the WWW directory into the running software under various platforms, followed by providing the interface of hardware resources under each platform. Where the Config.xml in the project root directory is the Cordova configuration file. Include application name, icon, launch page, plugin, use, etc. The config.xml under the root directory are replicated in the directory of the corresponding platform (platforms/directory) when they generate the running software under the corresponding platform:

App/platforms/ios/appname/config.xml

App/platforms/blackberry10/www/config.xml

App/platforms/android/res/xml/config.xml

For more Jinschau Please check: Official documents:

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

The general steps are:
The official documents are:

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

Under the engineering directory, create a new resources directory, place Icon.png and splash.png two files in the directory, note that the name type is fixed. Can't have another name. For more information, see other authors ' articles:

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

Then executing ionic resources under the project path will produce icon and splash for Android and iOS two platforms in the Ressources directory

$ Ionic Resources--icon

$ ionic Resources–splash

Use these two icons to produce both Android and iOS separately, and add the corresponding resources to the Config.xml of the project's root directory.

When the picture resource is ready, execute the command:

Ionic Build Android

Ionic run Android

Running on the phone usually shows the splash interface, if not, execute the command:

Ionic plugin Addorg.apache.cordova.splashscreen Add Splash Plugin

If the boot is normal, but splash after the end of a period of time after a black screen and then the app page content, indicating that splash too early to end, although the project under the root of the Config.xml has to adjust the actual splash method. But after all, still unstable, so, the good way is, let Splash always show, and then after entering the body of the Software page, through the code control splash disappear. The specific implementation is as follows:

Add in config.xml file:

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"/>  

The files that were eventually added are as follows:

<content src= "index.html"/>
<access origin= "*"/> <preference name= "Webviewbounce"
False '/>
<preference name= ' uiwebviewbounce ' value= ' false '/> <preference ' name=
' Disallowoverscroll "value=" true "/> <preference name=" android-minsdkversion "value="/> "
< Preference name= "Backupwebstorage" value= "None"/> <preference "name=" Autohidesplashscreen "

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"/>

Then add the following script to the index.html file head:

<script type= "Text/javascript" >

  document.addeventlistener ("Deviceready", Ondeviceready, false);


  function Ondeviceready () {
    navigator.splashscreen.hide ();
  }
</script>

Can be implemented, loading completed Web page files and scripts, in the closed splash