用 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/icon@2x.png is 128x128 but should be 114x114.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][29x29][][][2x]: warning: AppIcon.appiconset/icon-small@2x.png 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/icon-small@2x.png is 128x128 but should be 58x58.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][76x76][][][2x]: warning: AppIcon.appiconset/icon-76@2x.png is 128x128 but should be 152x152.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][60x60][][][3x]: warning: AppIcon.appiconset/icon-60@3x.png is 128x128 but should be 180x180.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][29x29][][][3x]: warning: AppIcon.appiconset/icon-small@3x.png is 128x128 but should be 87x87.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][40x40][][][2x]: warning: AppIcon.appiconset/icon-40@2x.png is 128x128 but should be 80x80.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][60x60][][][2x]: warning: AppIcon.appiconset/icon-60@2x.png is 128x128 but should be 120x120.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][50x50][][][2x]: warning: AppIcon.appiconset/icon-50@2x.png 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/icon-83.5@2x.png is 128x128 but should be 167x167.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][iphone][40x40][][][3x]: warning: AppIcon.appiconset/icon-60@2x.png is 128x128 but should be 120x120.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][72x72][][][2x]: warning: AppIcon.appiconset/icon-72@2x.png is 128x128 but should be 144x144.
/tmp/MultiLibraryLogin/platforms/ios/Library Multi-Login/Images.xcassets:./AppIcon.appiconset/[][ipad][40x40][][][2x]: warning: AppIcon.appiconset/icon-40@2x.png 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 目錄,

檢查一下圖示的大小,結果全都是 128x128,果真和要求的不同

(像 icon-40.png 應該要是 40x40,而icon-40@2x.png 應該是 80x80):

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
icon-40@2x.png:    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
icon-50@2x.png:    PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced
icon-60@2x.png:    PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced
icon-60@3x.png:    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
icon-72@2x.png:    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
icon-76@2x.png:    PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced
icon-83.5@2x.png:  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
icon-small@2x.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced
icon-small@3x.png: 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
icon@2x.png:       PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced

 

這些圖檔是哪裡來的呢?

我想應該是 Cordova 將 config.xml 中定義的這個 icon src 直接複製出來的,

因為我這個 icon128.png 的大小就是 128x128,所以複製出來的也全都是 128x128:

<icon src="www/icon128.png" />

 

要解決這個問題,我們得產生所有正確大小的圖檔~ 

不過心裡有點納悶,Cordova 為什麼不自動幫忙用 icon128.png 產生適當大小的圖示呢?...

 

3. 產生給 iOS 平台使用的圖檔

我們得準備一個目錄來存放給 iOS 使用的圖檔,

像我決定放在 <專案目錄>/res/ios 目錄下,因此要先建立好這個目錄。

 

接下來,在 Mac 上可以用 sips 指令,建立出改變大小的圖檔,例如: 

sips -Z 180 www/icon128.png --out res/ios/icon-60@3x.png
sips -Z 60 www/icon128.png --out res/ios/icon-60.png
sips -Z 120 www/icon128.png --out res/ios/icon-60@2x.png
sips -Z 76 www/icon128.png --out res/ios/icon-76.png
sips -Z 152 www/icon128.png --out res/ios/icon-76@2x.png
sips -Z 40 www/icon128.png --out res/ios/icon-40.png
sips -Z 80 www/icon128.png --out res/ios/icon-40@2x.png
sips -Z 57 www/icon128.png --out res/ios/icon.png
sips -Z 114 www/icon128.png --out res/ios/icon@2x.png
sips -Z 72 www/icon128.png --out res/ios/icon-72.png
sips -Z 144 www/icon128.png --out res/ios/icon-72@2x.png
sips -Z 29 www/icon128.png --out res/ios/icon-small.png
sips -Z 58 www/icon128.png --out res/ios/icon-small@2x.png
sips -Z 87 www/icon128.png --out res/ios/icon-small@3x.png
sips -Z 50 www/icon128.png --out res/ios/icon-50.png
sips -Z 100 www/icon128.png --out res/ios/icon-50@2x.png
sips -Z 167 www/icon128.png --out res/ios/icon-83.5@2x.png

 

用上面的方式,把所有的圖檔大小都改成正確的 (或是用任何的圖片編輯軟體都可以),

如果光從檔名不確定大小應該是多少,可以參考 Cordova: Customize Icons

最終修正完後的大小如下:

icon-40.png:       PNG image data, 40 x 40, 8-bit/color RGBA, non-interlaced
icon-40@2x.png:    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
icon-50@2x.png:    PNG image data, 100 x 100, 8-bit/color RGBA, non-interlaced
icon-60@2x.png:    PNG image data, 120 x 120, 8-bit/color RGBA, non-interlaced
icon-60@3x.png:    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
icon-72@2x.png:    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
icon-76@2x.png:    PNG image data, 152 x 152, 8-bit/color RGBA, non-interlaced
icon-83.5@2x.png:  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
icon-small@2x.png: PNG image data, 58 x 58, 8-bit/color RGBA, non-interlaced
icon-small@3x.png: 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
icon@2x.png:       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/icon-60@3x.png" width="180" />
        <icon height="60" src="res/ios/icon-60.png" width="60" />
        <icon height="120" src="res/ios/icon-60@2x.png" width="120" />
        <icon height="76" src="res/ios/icon-76.png" width="76" />
        <icon height="152" src="res/ios/icon-76@2x.png" width="152" />
        <icon height="40" src="res/ios/icon-40.png" width="40" />
        <icon height="80" src="res/ios/icon-40@2x.png" width="80" />
        <icon height="57" src="res/ios/icon.png" width="57" />
        <icon height="114" src="res/ios/icon@2x.png" width="114" />
        <icon height="72" src="res/ios/icon-72.png" width="72" />
        <icon height="144" src="res/ios/icon-72@2x.png" width="144" />
        <icon height="29" src="res/ios/icon-small.png" width="29" />
        <icon height="58" src="res/ios/icon-small@2x.png" width="58" />
        <icon height="87" src="res/ios/icon-small@3x.png" width="87" />
        <icon height="50" src="res/ios/icon-50.png" width="50" />
        <icon height="100" src="res/ios/icon-50@2x.png" width="100" />
        <icon height="167" src="res/ios/icon-83.5@2x.png" width="167" />
    </platform>

 

5. 再次執行 iOS 編譯

再編譯一次 iOS 版本的 app,這次應該會成功了:

cordova build --debug ios

 

6. 在 iOS 模擬器中執行 Cordova app

用 Xcode 打開 <專案目錄>/platforms/ios/<專案名稱>.xcodeproj,

成功載入後,按下執行的那個三角形按鈕:

Screen Shot 2017-03-10 at 1.20.01 AM

 

過好一段時間之後,iOS 模擬器應該就會跑起來了...

在我的 Mac Book Pro 2012 上,這段時間非常久,應該有幾十分鐘...

但模擬器跑起來之後,如果再次按下執行的按鈕,就不用再等那麼久了~

 

這是我的 app 在 iOS 模擬器上執行的畫面:

Screen Shot 2017-03-10 at 7.52.20 AM   

 

之後可以將 app 裝到 iPhone 手機上執行時,再來寫一篇囉~

 

參考資料:

Batch Resize Images Quickly in the OS X Terminal

 

文章標籤
創作者介紹

亂打一通的心情日記

ephrain 發表在 痞客邦 PIXNET 留言(0) 人氣()