2012/10/23

PhoneGap - Cross platform solution for mobile app - Hello world

跨平台的 mobile solution 越來越多種, google 一下就可以找到人家推薦或比較的文章:



其實大部分都是用純網頁的方式來開發:HTML5 + Javascript,好像只有 Titanium 會把 project 轉成 native code 再編譯,而 PhoneGap 則是為每個平台開發了 framework,提供存取硬體資源的界面,而 UI 層一樣用網頁的方式呈現。
效能理論上是 native code 好些,但目前我的需求在於呈現一些靜態的資料,不需要大量的運算或是圖形成像,選擇了 Phonegap + jQuery mobile 來玩玩看。



下列記錄一個專案產生及編譯的過程:

2.1.0 版 (目前最新版)

1. 安裝方式跟以往不同,沒有 dmg 檔,改採 command line 的方式,可以先看一下官網的 Getting Started with iOS,整理步驟如下:
  • 安裝 Xcode Command Line Tools
  • 下載 cordova source,並解壓縮
  • 進到目錄裡執行下列 script,創建 iOS 專案
$ cd ./phonegap-phonegap-26d211b/lib/ios/bin
$ ./create ~/my-phonegap com.phonegap my-phonegap
$ ./update_cordova_subproject ~/my-phonegap/my-phonegap.xcodeproj/

2. 編譯
開啟剛剛產生出來的 xcode project,從圖中可以看到裡面還包含 CordovaLib,先編譯 CordovaLib 再編譯自己的專案

順利的話就會 deploy 到模擬器上了

註:預設是把 ARC 打開的,所以如果 target iphone 上面沒有支援,就會有下面的錯誤發生。Disable ARC 不是一個好方法,如果有需要可以使用舊版的 library。
dyld: lazy symbol binding failed: Symbol not found: _objc_retain
  Referenced from: /var/mobile/Applications/81EB9778-1819-454F-BF09-5D7CA2706A1A/phonegap.app/phonegap
  Expected in: /usr/lib/libobjc.A.dylib
dyld: lazy symbol binding failed: Symbol not found: _objc_storeStrong
  Referenced from: /var/mobile/Applications/81EB9778-1819-454F-BF09-5D7CA2706A1A/phonegap.app/phonegap
  Expected in: /usr/lib/libobjc.A.dylib

3. 再來就可以參考 API 去撰寫自己的 app 了,資料放在 www 這 folder 底下即可



1.8.0 版

1. 下載 source 後直接執行 phonegap-phonegap-2b7ffca/lib/ios/Cordova-1.8.0.dmg 

2. 安裝後開啓 xcode 就可以看到 Cordova-based Application 的專案可以新增

3. 編譯並執行

出現了錯誤?
ERROR: Start Page at 'www/index.html' was not found
原來是 www 加進專案的方式有問題,正確的步驟如下:在專案按右建選擇"Add file to (project name)",選擇 www 資料夾,並勾選 "Copy items into destination group's" folder (if needed)",Folders 選擇 "Create folder references for any added folders"

再編譯一次就沒有問題了!