Cordova 簡介
在介紹Cordova之前,必須先提一下PhoneGap。PhoneGap 是Nitobi軟體公司2008年推出的一個框架,旨在彌補web 和iOS 之間的不足,使得web 和 iPhone SDK 之間的互動更容易。後來又加入了Android SDK 和BlackBerry SDK,再然後又陸續加入了更多的平臺。 但是在2011年,Nitobi公司被Adobe收購,PhoneGap也被提交到Apache Incubator。由於Adobe現在擁有PhoneGap商標,PhoneGap v2.0版產品就更名為Apache Cordova。 據說Cordova是Nitobi團隊當時坐落的街道名稱,用此名來紀念Nitobi團隊的貢獻。Apache Cordova是從PhoneGap中抽出的核心程式碼,是驅動PhoneGap的核心引擎。
上圖是目前Cordova支援的平臺,摘自Cordova官網,它們分別是Android、iOS、Windows Phone、BlackBerry、ubuntu、火狐、LGwebOS、FireOS。Cordova工程結構
從下面這幅圖可以看出Cordova工程的結構,以及與Native API 之前的關係。
Get Started Fast
官網中也把Cordova 的使用劃分了一些步驟。按照這五個步驟,可以很容易的建立一個Cordova Demo 工程起來,但是實際的使用要比這個Demo 工程複雜的多。
1. 安裝Cordova
Cordova 命令列需要執行在 Node.js 上,在 NPM 也可用。我們可以按照 platform specific guides 去安裝別的依賴平臺。因此,在安裝Cordova之前,要先安裝Node.js 和 NPM(可以參考文章Mac 下安裝Node.js)。開啟命令列提示符(Windows 下) 或者 終端 (Mac 下),然後輸入 npm install -g cordova
即可安裝Cordova。
如果安裝失敗,看到下面的錯誤提示資訊,說明我們要用管理員身份安裝。
以管理員身份安裝Cordova的命令:
sudo npm install -g cordova
複製程式碼
安裝過程可能比較慢,安裝成功後,可以看到類似如下的目錄結構,並且沒有錯誤資訊:
2.建立一個工程
用命令列工具建立一個空的Cordova工程。首先跳轉到 你希望儲存新工程的資料夾(命令是 cd 資料夾路徑
),然後輸入命令 cordova create 工程名
。
當然,我們也可以直接 輸入命令 cordova create 資料夾路徑/工程名
,在某個資料夾下直接建立工程。
檢視更多的建立工程命令,可以輸入命令 cordova help create
。
我在終端中輸入如下命令:
cordova create /Users/harvey/Desktop/Other/MyApp
複製程式碼
然後在Other 資料夾中就建立了一個叫MyApp的資料夾: 目錄結構如下:
3.新增平臺
建立完Cordova 工程之後,跳轉到工程資料夾(命令是 cd 資料夾路徑
)。
我這裡使用的命令是:
cd /Users/harvey/Desktop/Other/MyApp
複製程式碼
然後在這個資料夾中,我們需要新增一個 App 需要支援的平臺。 新增一個平臺,需要輸入命令:
cordova platform add <platform name>
複製程式碼
例如我們需要支援瀏覽器,那麼就輸入:
cordova platform add browser
複製程式碼
如果我們需要支援iOS,那麼就輸入:
cordova platform add ios
複製程式碼
注意ios 要小寫。
檢視Cordova可以支援的平臺,可以輸入 :
cordova platform
複製程式碼
我輸入cordova platform
之後,終端顯示的結果:
HarveydeMac-mini:MyApp harvey$ cordova platform
Installed platforms:
browser 4.1.0
ios 4.2.1
Available platforms:
amazon-fireos ~3.6.3 (deprecated)
android ~5.2.0
blackberry10 ~3.8.0
firefoxos ~3.6.3
osx ~4.0.1
webos ~3.7.0
複製程式碼
Installed platforms
是我已經安裝過的平臺,Available platforms
是還可以安裝的平臺。
4.執行 App
使用命令列工具,執行App的命令是:
cordova run <platform name>
複製程式碼
例如,我想在瀏覽器中執行 App,我就在終端裡輸入:
cordova run browser
複製程式碼
然後,就會開啟瀏覽器,就會執行App。下面是我的命令和執行效果圖:
當然,如果我們想要在iOS 上執行 App,我們也可以輸入:
cordova run ios
複製程式碼
也可以到指定目錄下開啟iOS 工程檔案
檢視更多的關於執行App 的命令,可以輸入 cordova help run
。