[Cordova] 在 iOS 模擬器上執行 Cordova app
用 Cordova 寫 app 已經好一陣子了，不過一直都只編譯出 Android 用的版本，
主要原因還是在於 Apple Store 上架實在太貴…
不過最近還是決定來研究一下，要如何讓 Cordova app 在 iOS 上執行…
第一步的要求是要讓 app 能在 iOS 模擬器上執行，之後再研究在實體手機上執行的方式～
1. 安裝 ios-deploy 套件
參考了一下 Cordova: iOS Platform Guide，要編譯出 iOS 上的版本，
要先用 npm 安裝 ios-deploy 這個套件：
npm install -g ios-deploy
2. 嘗試編譯 iOS 版本 app
在 Cordova 專案目錄下，執行下面指令來編譯 iOS 的除錯版本 (debug version)：
ordova build --debug ios
在捲過落落長的編譯訊息後，最後跑出了 BUILD FAILED 失敗了：
** BUILD FAILED ** The following build commands failed: CompileAssetCatalog build/emulator/Library Multi-Login.app Library Multi-Login/Images.xcassets (1 failure) Error: Error code 65 for command: xcodebuild with args: -xcconfig,/tmp/MultiLibraryLogin/platforms/ios/cordova/build-debug.xcconfig,-workspace,Library Multi-Login.xcworkspace,-scheme,Library Multi-Login,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone 5s,build,CONFIGURATION_BUILD_DIR=/tmp/MultiLibraryLogin/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/tmp/MultiLibraryLogin/platforms/ios/build/sharedpch
研究了一下錯誤訊息，老實說不是很清楚是哪邊出錯…
稍微往前面看一下，看到一堆抱怨圖示大小不對的訊息，看來可能是這邊的問題…
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][57x57][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 114x114. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][29x29][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 58x58. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][57x57][][][1x]: warning: AppIcon.appiconset/icon.png is 128x128 but should be 57x57. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][72x72][][][1x]: warning: AppIcon.appiconset/icon-72.png is 128x128 but should be 72x72. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][40x40][][][1x]: warning: AppIcon.appiconset/icon-40.png is 128x128 but should be 40x40. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][29x29][][][1x]: warning: AppIcon.appiconset/icon-small.png is 128x128 but should be 29x29. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][50x50][][][1x]: warning: AppIcon.appiconset/icon-50.png is 128x128 but should be 50x50. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][29x29][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 58x58. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][76x76][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 152x152. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][60x60][][][3x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 180x180. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][29x29][][][3x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 87x87. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][40x40][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 80x80. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][60x60][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 120x120. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][50x50][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 100x100. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][83.5x83.5][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 167x167. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][40x40][][][3x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 120x120. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][72x72][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 144x144. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][40x40][][][2x]: warning: AppIcon.appiconset/[email protected] is 128x128 but should be 80x80. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][76x76][][][1x]: warning: AppIcon.appiconset/icon-76.png is 128x128 but should be 76x76. /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][29x29][][][1x]: warning: AppIcon.appiconset/icon-small.png is 128x128 but should be 29x29.
進到 ios/<專案名稱>/Images.xcassets/AppIcon.appiconset 目錄，
檢查一下圖示的大小，結果全都是 128×128，果真和要求的不同
(像 icon-40.png 應該要是 40×40，而[email protected] 應該是 80×80)：
testuser@localhost /tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets/AppIcon.appiconset $ file * icon-40.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced icon-50.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced icon-72.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced icon-76.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced icon-small.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced icon.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced
這些圖檔是哪裡來的呢？
我想應該是 Cordova 將 config.xml 中定義的這個 icon src 直接複製出來的，
因為我這個 icon128.png 的大小就是 128×128，所以複製出來的也全都是 128×128：
<icon src="www/icon128.png" />
要解決這個問題，我們得產生所有正確大小的圖檔～
不過心裡有點納悶，Cordova 為什麼不自動幫忙用 icon128.png 產生適當大小的圖示呢？…
3. 產生給 iOS 平台使用的圖檔
我們得準備一個目錄來存放給 iOS 使用的圖檔，
像我決定放在 <專案目錄>/res/ios 目錄下，因此要先建立好這個目錄。
接下來，在 Mac 上可以用 sips 指令，建立出改變大小的圖檔，例如：
sips -Z 180 www/icon128.png --out res/ios/[email protected] sips -Z 60 www/icon128.png --out res/ios/icon-60.png sips -Z 120 www/icon128.png --out res/ios/[email protected] sips -Z 76 www/icon128.png --out res/ios/icon-76.png sips -Z 152 www/icon128.png --out res/ios/[email protected] sips -Z 40 www/icon128.png --out res/ios/icon-40.png sips -Z 80 www/icon128.png --out res/ios/[email protected] sips -Z 57 www/icon128.png --out res/ios/icon.png sips -Z 114 www/icon128.png --out res/ios/[email protected] sips -Z 72 www/icon128.png --out res/ios/icon-72.png sips -Z 144 www/icon128.png --out res/ios/[email protected] sips -Z 29 www/icon128.png --out res/ios/icon-small.png sips -Z 58 www/icon128.png --out res/ios/[email protected] sips -Z 87 www/icon128.png --out res/ios/[email protected] sips -Z 50 www/icon128.png --out res/ios/icon-50.png sips -Z 100 www/icon128.png --out res/ios/[email protected] sips -Z 167 www/icon128.png --out res/ios/[email protected]
用上面的方式，把所有的圖檔大小都改成正確的 (或是用任何的圖片編輯軟體都可以)，
如果光從檔名不確定大小應該是多少，可以參考 Cordova: Customize Icons
最終修正完後的大小如下：
icon-40.png: PNG image data, 40 x 40, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 80 x 80, 8-bit/color RGBA, non-interlaced icon-50.png: PNG image data, 50 x 50, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 100 x 100, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 120 x 120, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 180 x 180, 8-bit/color RGBA, non-interlaced icon-72.png: PNG image data, 72 x 72, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 144 x 144, 8-bit/color RGBA, non-interlaced icon-76.png: PNG image data, 76 x 76, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 152 x 152, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 167 x 167, 8-bit/color RGBA, non-interlaced icon-small.png: PNG image data, 29 x 29, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 58 x 58, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 87 x 87, 8-bit/color RGBA, non-interlaced icon.png: PNG image data, 57 x 57, 8-bit/color RGBA, non-interlaced [email protected]: PNG image data, 114 x 114, 8-bit/color RGBA, non-interlaced
4. 在 config.xml 中加入圖檔的路徑
產生完圖檔，還得在 config.xml 中加入圖檔的路徑與大小：
<platform name="ios"> <icon height="180" src="res/ios/[email protected]" width="180" /> <icon height="60" src="res/ios/icon-60.png" width="60" /> <icon height="120" src="res/ios/[email protected]" width="120" /> <icon height="76" src="res/ios/icon-76.png" width="76" /> <icon height="152" src="res/ios/[email protected]" width="152" /> <icon height="40" src="res/ios/icon-40.png" width="40" /> <icon height="80" src="res/ios/[email protected]" width="80" /> <icon height="57" src="res/ios/icon.png" width="57" /> <icon height="114" src="res/ios/[email protected]" width="114" /> <icon height="72" src="res/ios/icon-72.png" width="72" /> <icon height="144" src="res/ios/[email protected]" width="144" /> <icon height="29" src="res/ios/icon-small.png" width="29" /> <icon height="58" src="res/ios/[email protected]" width="58" /> <icon height="87" src="res/ios/[email protected]" width="87" /> <icon height="50" src="res/ios/icon-50.png" width="50" /> <icon height="100" src="res/ios/[email protected]" width="100" /> <icon height="167" src="res/ios/[email protected]" width="167" /> </platform>
5. 再次執行 iOS 編譯
再編譯一次 iOS 版本的 app，這次應該會成功了：
cordova build --debug ios
6. 在 iOS 模擬器中執行 Cordova app
用 Xcode 打開 <專案目錄>/platforms/ios/<專案名稱>.xcodeproj，
成功載入後，按下執行的那個三角形按鈕：
過好一段時間之後，iOS 模擬器應該就會跑起來了…
在我的 Mac Book Pro 2012 上，這段時間非常久，應該有幾十分鐘…
但模擬器跑起來之後，如果再次按下執行的按鈕，就不用再等那麼久了～
這是我的 app 在 iOS 模擬器上執行的畫面：
之後可以將 app 裝到 iPhone 手機上執行時，再來寫一篇囉～
參考資料：
Batch Resize Images Quickly in the OS X Terminal
(本頁面已被瀏覽過 1,111 次)
3 thoughts on “[Cordova] 在 iOS 模擬器上執行 Cordova app”
很感謝大大的紀錄，讓在下的問題有了解決的方向，關於圖片產生的部分，目前有找到套件可以協助產生，可以參考下面這篇文章，謝謝您。
https://stackoverflow.com/questions/36095819/cordova-ios-error-building-images-xcassets
非常謝謝您的資訊喔~^^