Cordova專案的圖示和啟動畫面
阿新 • • 發佈：2019-02-16
Phonegap/Cordova專案中的config.xml檔案，裡面配置了下面的內容：
<icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" /> <icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" /> <icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png"/> <icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" /> <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" /> <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" /> <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" /> <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" /> <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" /> <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" /> <icon gap:platform="webos" src="res/icon/webos/icon-64.png" /> <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" /> <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" /> <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" /> <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" /> <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" /> <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" /> <gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" /> <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" /> <gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" /> <gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" /> <gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" /> <gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" /> <gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />
這個 res/icon和res/screen目錄是相對於phonegap專案目錄的 ，也就是類似phonegap/res/icon/android/icon-36-ldpi.png，你的 圖示和啟動畫面必須在這兩個目錄下 。
phonegap3.5以前的config.xml中src="res/........"，phonegap3.5開始變為了src="www/res/......."，而實際圖示和啟動畫面檔案都是存在於www/res下面的。因此phonegap3.4沒應用上圖示和啟動畫面是情有可原的（因為路徑沒指定對）。
不過儘管將src改為"www/res/......."，也將我們自己的圖示和啟動畫面檔案放在了phonegap/www/res/...下，
但是最後build之後的安卓專案和ios專案，圖示和啟動畫面還是沒有我們自己的。
後來看了Cordova文件，對config.xml做了一些修改，才配置成功。
1、去掉上面config.xml中的圖示和啟動畫面配置，改為下面的
<platform name="android"> <icon src="res/icon/android/icon-36-ldpi.png" density="ldpi" /> <icon src="res/icon/android/icon-48-mdpi.png" density="mdpi" /> <icon src="res/icon/android/icon-72-hdpi.png" density="hdpi" /> <icon src="res/icon/android/icon-96-xhdpi.png" density="xhdpi" /> <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/> <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/> <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/> <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/> <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/> <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/> <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/> <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/> </platform> <platform name="ios"> <icon src="res/icon/ios/[email protected]" width="180" height="180" /> <icon src="res/icon/ios/icon-60.png" width="60" height="60" /> <icon src="res/icon/ios/[email protected]" width="120" height="120" /> <icon src="res/icon/ios/icon-76.png" width="76" height="76" /> <icon src="res/icon/ios/[email protected]" width="152" height="152" /> <icon src="res/icon/ios/icon-40.png" width="40" height="40" /> <icon src="res/icon/ios/[email protected]" width="80" height="80" /> <icon src="res/icon/ios/icon.png" width="57" height="57" /> <icon src="res/icon/ios/[email protected]" width="114" height="114" /> <icon src="res/icon/ios/icon-72.png" width="72" height="72" /> <icon src="res/icon/ios/[email protected]" width="144" height="144" /> <icon src="res/icon/ios/icon-small.png" width="29" height="29" /> <icon src="res/icon/ios/[email protected]" width="58" height="58" /> <icon src="res/icon/ios/icon-50.png" width="50" height="50" /> <icon src="res/icon/ios/[email protected]" width="100" height="100" /> <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/> <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="960"/> <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/> <splash src="res/screen/ios/[email protected]~ipad.png" width="1536" height="2048"/> <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/> <splash src="res/screen/ios/[email protected]~ipad.png" width="2048" height="1536"/> <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="1136"/> </platform>2、你需要準備好你自己的app圖示和啟動畫面png檔案：
安卓圖示具體規格如下（存放目錄：phonegap/res/icon/android/）
| icon-36-ldpi.png | 36×36 |
| icon-48-mdpi.png | 48×48 |
| icon-72-hdpi.png | 72×72 |
| icon-96-xhdpi.png | 96×96 |
安卓啟動畫面具體規格如下（存放目錄：phonegap/res/screen/android/）
| splash-land-hdpi.png | 640×480 |
| splash-land-ldpi.png | 426×320 |
| splash-land-mdpi.png | 470×320 |
| splash-land-xhdpi.png | 960×720 |
| splash-port-hdpi.png | 480×640 |
| splash-port-ldpi.png | 320×426 |
| splash-port-mdpi.png | 320×470 |
| splash-port-xhdpi.png | 720×960 |
iOS圖示具體規格如下（存放目錄：phonegap/res/icon/ios/）
| [email protected] | 180×180 |
| icon-60.png | 60×60 |
| [email protected] | 120×120 |
| icon-76.png | 76×76 |
| [email protected] | 152×152 |
| icon-40.png | 40×40 |
| [email protected] | 80×80 |
| icon.png | 57×57 |
| [email protected] | 114×114 |
| icon-72.png | 72×72 |
| [email protected] | 144×144 |
| icon-small.png | 29×29 |
| [email protected] | 58×58 |
| icon-50.png | 50×50 |
| [email protected] | 100×100 |
iOS啟動畫面具體規格如下（存放目錄：phonegap/res/screen/ios/）
| Default~iphone.png | 320×480 |
| [email protected]~iphone.png | 640×960 |
| Default-Portrait~ipad.png | 768×1024 |
| [email protected]~ipad.png | 1536×2048 |
| Default-Landscape~ipad.png | 1024×768 |
| [email protected]~ipad.png | 2048×1536 |
| [email protected]~iphone.png | 640×1136 |
| Default-667h.png | 750×1334( 好像 cordova4.0才支援) |
| Default-736h.png | 1242×2208 (好像cordova4.0才支援) |
| Default-Landscape-736h.png | 2208×1242 (好像cordova4.0才支援) |
3、如何顯示splashscreen啟動畫面？
iOS預設可以啟用啟動畫面 ，安裝到手機後執行就可以看到；
安卓 的的話本來也是預設也有啟動畫面的，只不過因為 配置有問題，沒有顯示出來，原因如下：
phonegap生成安卓專案的時候，會自動把phonegap/res/screen/android/ 下面的各個圖片檔案 命名為screen.png，放到安卓專案的各個 res/drawable* 目錄底下 ，而在CordovaLib\src\org\apache\cordova\Config.java中指定的檔名卻是"splash.png"。app啟動時找不到splash.png，所以就沒顯示。
因此，我們要在config.xml中新增下面兩個preference配置，用"SplashScreen"指定檔名為screen.png：
<preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="3000" />"SplashScreenDelay"指定啟動畫面多長時間後自動隱藏，這裡配置了3000ms，也就是3秒鐘。
4、好了，到這就配置完畢了，重新build你的phonegap專案吧，你的安卓和ios都能顯示你自己的圖示和啟動畫面了。
ps：我推薦是每次buildphonegap專案的時候都將以下目錄和檔案刪除後再build：
對於安卓，刪除phonegap/plugins/android.json檔案和phonegap/platforms/android資料夾
對於ios，刪除phonegap/plugins/ios.json檔案和phonegap/platforms/ios資料夾
但是有的手機速度慢，或者js和css檔案大，上面設定的 3秒鐘根本不足夠js和css載入完 ，這時就會出現啟動畫面隱藏了，然後 黑屏或者白屏幾秒種，然後才出現we