Cordova 3.x 基础（2） -- 应用图标icon和启动页面SplashScreen

阅读更多

==========================================================
最新版Cordova CLI已经支持在config.xml中配置 和 ， CB-2606, CB-3571 Add support for , 。设置如下：

具体可以参考官方文档： Icons and Splash Screens

如果你本地安装了ImageMagick，CLI还会自动调用ImageMagick来做成不同尺寸的图像。
需要注意的是：
（1）图像的路径是相对于工程根目录不是根据www
（2）不要和PhoneGap CLI的设置混淆
==========================================================


（1）创建以下图像

以Android为例：

icon图像：

• www/res/icon/android/icon-36-ldpi.png - 36px x 36px
• www/res/icon/android/icon-48-mdpi.png - 48px x 48px
• www/res/icon/android/icon-72-hdpi.png - 72px x 72px
• www/res/icon/android/icon-96-xhdpi.png - 96px x 96px

splashscreen图像：

• www/res/screen/android/screen-ldpi-landscape.png - 320px x 200px
• www/res/screen/android/screen-mdpi-landscape.png - 480px x 320px
• www/res/screen/android/screen-hdpi-landscape.png - 800px x 480px
• www/res/screen/android/screen-xhdpi-landscape.png - 1280px x 720px
• www/res/screen/android/screen-ldpi-portrait.png - 200px x 320px
• www/res/screen/android/screen-mdpi-portrait.png - 320px x 480px
• www/res/screen/android/screen-hdpi-portrait.png - 480px x 800px
• www/res/screen/android/screen-xhdpi-portrait.png - 720px x 1280px

（2）给工程添加splashscreen插件

引用

> cordova plugin add org.apache.cordova.splashscreen

（3）配置config.xml

相比于在config.xml中设置延迟时间，更应该在设备初始化完成后隐藏Splash画面(index.html)

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  navigator.splashscreen.hide();
}

（4）Copy文件
phonegap是可以在config.xml中配置icon和splash的，但是cordova不支持，需要在cordova build之后Copy文件，也可以通过创建hook来实现。
***phonegap的配置也局限于remote build的时候Phonegap Build起作用，local build也不起作用，需手动处理。参考 这里。

icon.png：
把www/res/icon/android下的文件Copy到相应的platforms/android/res/drawable*/下。

splash.png：
把www/res/screen/android下的文件Copy到相应的platforms/android/res/drawable*/下。

完成以后启动“cordova emulate android”即可。

phonegap的config.xml