iOS下JS與OC互相呼叫(七)--Cordova 基礎

哈雷哈雷_Wong發表於2018-02-27

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的核心引擎。

iOS下JS與OC互相呼叫(七)--Cordova 基礎
上圖是目前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。

如果安裝失敗,看到下面的錯誤提示資訊,說明我們要用管理員身份安裝。

iOS下JS與OC互相呼叫(七)--Cordova 基礎

以管理員身份安裝Cordova的命令:

sudo npm install -g cordova
複製程式碼

安裝過程可能比較慢,安裝成功後,可以看到類似如下的目錄結構,並且沒有錯誤資訊:

iOS下JS與OC互相呼叫(七)--Cordova 基礎

2.建立一個工程

用命令列工具建立一個空的Cordova工程。首先跳轉到 你希望儲存新工程的資料夾(命令是 cd 資料夾路徑),然後輸入命令 cordova create 工程名。 當然,我們也可以直接 輸入命令 cordova create 資料夾路徑/工程名,在某個資料夾下直接建立工程。 檢視更多的建立工程命令,可以輸入命令 cordova help create

我在終端中輸入如下命令:

cordova create /Users/harvey/Desktop/Other/MyApp 

複製程式碼

然後在Other 資料夾中就建立了一個叫MyApp的資料夾: 目錄結構如下:

iOS下JS與OC互相呼叫(七)--Cordova 基礎

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下JS與OC互相呼叫(七)--Cordova 基礎

當然,如果我們想要在iOS 上執行 App,我們也可以輸入:

cordova run ios
複製程式碼

也可以到指定目錄下開啟iOS 工程檔案

iOS下JS與OC互相呼叫(七)--Cordova 基礎

檢視更多的關於執行App 的命令,可以輸入 cordova help run

相關文章