最新版 Cordova CLI 已经支持在 config.xml 中配置 和 ,CB-2606, CB-3571 Add support for , 。设置如下:
Xml 代码
<platform name="android"> <icon src="res/android/icon-36-ldpi.png" density="ldpi" /> <splash src="res/android/screen-xhdpi-portrait.png" density="port-xhdpi"/> </platform>
具体可以参考官方文档:Icons and Splash Screens
如果你本地安装了 ImageMagick,CLI 还会自动调用 ImageMagick 来做成不同尺寸的图像。 需要注意的是:
(1)图像的路径是相对于工程根目录不是根据 www
(2)不要和 PhoneGap CLI 的设置混淆
==========================================================
以 Android 为例:
icon 图像:
splashscreen 图像:
引用
cordova plugin add org.apache.cordova.splashscreen
Xml 代码
<preference name="SplashScreen" value="splash" /> <!-- 不带后缀png的文件名,默认是screen--> <preference name="SplashScreenDelay" value="10000" /> <!-- Splash显示时间,默认是3000ms--> <feature name="SplashScreen"> <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" /> </feature>相比于在 config.xml 中设置延迟时间,更应该在设备初始化完成后隐藏 Splash 画面(index.html)
Js 代码
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.splashscreen.hide(); }
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
Xml 代码
<!-- Define app icon for each platform. --> <icon src="icon.png" /> <icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" /> <icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" /> <icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" /> <icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" /> <icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" /> <icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/> <icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" /> <icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" /> <icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" /> <icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" /> <icon src="res/icon/webos/icon-64.png" gap:platform="webos" /> <icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" /> <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" /> <!-- Define app splash screen for each platform. --> <gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" /> <gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" /> <gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" /> <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" /> <gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" /> <gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" /> <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" /> <gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" /> <gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" /> <gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />