亂打一通的心情日記

跳到主文

程式‧生活‧旅行

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 3月 15 週三 201700:39

  • [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/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 的頭像
ephrain

亂打一通的心情日記

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

  • 全站分類：
  • 個人分類：Cordova
▲top

ADSENSE

喜歡的動漫圖片

個人資訊

ephrain
暱稱：
ephrain
分類：
數位生活
好友：
累積中
地區：

文章搜尋

最新文章

    熱門文章

    • ()[Android] Android 學習筆記:開啟一個 server socket
    • ()[Android-x86] 用 Android-x86 在 PC 上執行 Android
    • ()[MOD] 自己安裝與設定中華電信 MOD
    • ()[Android] 使用 TeamViewer QuickSupport 遠端遙控手機
    • ()[Android] 將 HTC Incredible S Root 與刷機!
    • ()[Mac/Chrome] 將 https 網站加入 Chrome 的信任清單
    • ()[育兒] 新生兒報戶口、申請生育獎勵金、育兒津貼、國民年金生育給付、有照片的健保卡
    • ()[Sublime Text] 讓 Sublime Text 支援 BIG5 編碼的文字檔
    • ()[Windows] 使用 start 指令在批次檔中啟動程式
    • ()[Python] 在函式裡使用全域變數要加 global

    最新留言

    文章分類

    toggle 藝文 (4)
    • 電影.動畫 (0)
    • 音樂會 (0)
    • 展覽.講座 (0)
    • 樂讀 (0)
    toggle 旅遊 (10)
    • 日本.關西 (0)
    • 台灣‧北部 (0)
    • 台灣‧中部 (0)
    • 台灣‧南部 (0)
    • 台灣‧東部 (0)
    • 美國 (0)
    • 韓國.濟州島 (0)
    • 香港 (0)
    • 柬埔寨.吳哥窟 (0)
    • 大陸 (0)
    toggle 電腦技術 (29)
    • Web (0)
    • Debug/Performance (0)
    • Windows (0)
    • Linux (0)
    • Android (0)
    • C (0)
    • Virtualization (0)
    • Database (0)
    • Perl (0)
    • AutoIt (0)
    • PHP (0)
    • Python (0)
    • Mac (0)
    • Chrome (0)
    • Security (0)
    • Editor (0)
    • VBScript (0)
    • Java (0)
    • Cordova (0)
    • XML (0)
    • Network (0)
    • CVS (0)
    • Algorithm (0)
    • Scratch (0)
    • App Inventor (0)
    • PowerShell (0)
    • Hardware (0)
    • iPhone (0)
    • Agile (0)
    toggle 個人 (7)
    • 流水 (0)
    • 聚會.食記 (0)
    • 心情 (0)
    • 教會 (0)
    • 寵物 (0)
    • 亂煮 (0)
    • 家庭 (0)
    • 未分類文章 (1)

    By Eph

    ephrain
    PIXNET Logo登入

    參觀人氣

    • 本日人氣：0
    • 累積人氣：1,749,183