Cordova 3.x 基礎（2） -- 應用表徵圖icon和啟動頁面SplashScreen

標籤：

原文：http://rensanning.iteye.com/blog/2017380

最新版Cordova CLI已經支援在config.xml中配置<splash> 和 <icon>，CB-2606, CB-3571 Add support for <icon>, <splash>。設定如下： 

Xml代碼  

1. <platform name="android">  
2.     <icon src="res/android/icon-36-ldpi.png" density="ldpi" />  
3.     <splash src="res/android/screen-xhdpi-portrait.png" density="port-xhdpi"/>  
4. </platform>  

具體可以參考官方文檔：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 

Xml代碼  

1. <preference name="SplashScreen" value="splash" /> <!-- 不帶尾碼png的檔案名稱，預設是screen-->  
2. <preference name="SplashScreenDelay" value="10000" /> <!-- Splash顯示時間，預設是3000ms-->  
3.   
4. <feature name="SplashScreen">  
5.   <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />  
6. </feature>  

相比於在config.xml中設定延遲時間，更應該在裝置初始化完成後隱藏Splash畫面(index.html) 

Js代碼  

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

（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 

Xml代碼  

1. <!-- Define app icon for each platform. -->  
2. <icon src="icon.png" />  
3. <icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:density="ldpi" />  
4. <icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:density="mdpi" />  
5. <icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:density="hdpi" />  
6. <icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />  
7. <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" />  
8. <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>  
9. <icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />  
10. <icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />  
11. <icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />  
12. <icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />  
13. <icon src="res/icon/webos/icon-64.png"          gap:platform="webos" />  
14. <icon src="res/icon/windows-phone/icon-48.png"  gap:platform="winphone" />  
15. <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />  
16.   
17. <!-- Define app splash screen for each platform. -->  
18. <gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />  
19. <gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />  
20. <gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />  
21. <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />  
22. <gap:splash src="res/screen/blackberry/screen-225.png"         gap:platform="blackberry" />  
23. <gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" />  
24. <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" />  
25. <gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" />  
26. <gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" />  
27. <gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />  

Cordova 3.x 基礎（2） -- 應用表徵圖icon和啟動頁面SplashScreen