??因公司項目需要快速開發(fā)產(chǎn)品的APP，也因為沒有專業(yè)原生的APP開發(fā)人員（有WAP頁面的），后來選擇了利用Cordva這個框架來快速實現(xiàn)。歷時將近一個月，本人負(fù)責(zé)IOS的實現(xiàn)，現(xiàn)將整個實踐過程大致記錄下來，后續(xù)幾篇會記錄不同階段的不同實現(xiàn)內(nèi)容。

Cordova 前世今生

??隨著APP開發(fā)需求的擴(kuò)大，而iPhone開發(fā)的Object-C 對于Web開發(fā)又比較陌生，為了使web開發(fā)者可以通過HTML＋CSS＋JavaScript和本地應(yīng)用程序（如攝像頭和通訊錄）交互更加便利，Nitobi公司開發(fā)了PhoneGap框架。

Adobe 2011年10月4日宣布收購了Nitobi Software 。
PhoneGap 被 Adobe 收購了 ，后來抽離出核心代碼貢獻(xiàn)給了 Apache Software Foundation，Apache 將這個項目命名為Cordova

Cordova是貢獻(xiàn)給Apache后的開源項目。Cordova 相當(dāng)于PhoneGap的核心引擎，你可以把它們的關(guān)系想象成類似于Webkit和Google Chrome的關(guān)系。

Cordova名字的由來： PhoneGap 由一個叫 Nitobi 的公司發(fā)起 ，曾經(jīng)改名為 "Callback"，接著又改名為 "Cordova"，因為 Nitobi 的辦公地點(diǎn)曾設(shè)在在一條叫 Cordova 的街道

Cordova 簡介

Apache Cordova是一個開源的移動開發(fā)框架。允許你用標(biāo)準(zhǔn)的web技術(shù)-HTML5,CSS3和JavaScript做跨平臺開發(fā)。 應(yīng)用在每個平臺的具體執(zhí)行被封裝了起來，并依靠符合標(biāo)準(zhǔn)的API綁定去訪問每個設(shè)備的功能，比如說：傳感器、數(shù)據(jù)、網(wǎng)絡(luò)狀態(tài)等。

• 官方網(wǎng)站 http://cordova.apache.org
• 中文網(wǎng)站 http://cordova.axuer.com

使用Apache Cordova的人群:

• 移動應(yīng)用開發(fā)者，想擴(kuò)展一個應(yīng)用的使用平臺，而不通過每個平臺的語言和工具集重新實現(xiàn)。
• web開發(fā)者，想包裝部署自己的web App將其分發(fā)到各個應(yīng)用商店門戶。
• 移動應(yīng)用開發(fā)者，有興趣混合原生應(yīng)用組建和一個WebView(一個特別的瀏覽器窗口) 可以接觸設(shè)備A級PI，或者你想開發(fā)一個原生和WebView組件之間的插件接口。

Cordova 架構(gòu)圖

image

• WebView

  WebView 是App 原生當(dāng)中的瀏覽器組件，Cordova本質(zhì)就是一個（混合編程）Hybrid框架。對原生和web直接交互的一些封裝。對外提供了一套接口。

• WebApp

  WebApp是web編程的所有文件內(nèi)容存放的地方。包括html,js,css等。
  Cordova實現(xiàn)是通過調(diào)用原生的webview,然后默認(rèn)加載本地的 index.html頁面。index.html中引用其他的本地的css,javascript,images,media和其他等一些必要等資源文件。
  這里其中有一個最重要等文件 config.xml。定義了運(yùn)行過程中很重要的一些參數(shù)。

??如果直接通過Web訪問一個服務(wù)器的頁面，一個是訪問效果非常差，受限于網(wǎng)速，另一個就是和原生的交互問題。而將資源放在WebApp下，等于是在App本地訪問頁面，展示效果更接近于原生。

Cordova 安裝

1. 安裝 node.js

   在網(wǎng)站 https://nodejs.org/en/download/ 下載適合系統(tǒng)的 node.js 版本,安裝即可。

2. 安裝 Cordova

   Windows系統(tǒng)可以打開 cmd窗口，Mac系統(tǒng)可以打開終端。
   命令行執(zhí)行：

   $ npm install -g cordova

Cordova 創(chuàng)建項目，運(yùn)行

1. 創(chuàng)建項目

   創(chuàng)建一個新的 cordova工程 <文件夾名> <包名> <app名>

   $ cordova create MyTest com.cordova.test helloword

   然后命令行所在目錄，會生成一個MyTest的文件夾。生成文件如下：

create_new.jpg

2. 添加平臺

   新創(chuàng)建的工程,然后需要進(jìn)入目錄，添加一個平臺支持。
   添加ios支持

   cordova platform add ios

   查看所有支持的平臺

   cordova platform

platform.jpg

3. 項目啟動

   通過命令行啟動App

   cordova run ios

   如果安裝好了xcode,默認(rèn)會啟動一個模擬器.
   進(jìn)入目錄MyTest/platforms/ios下，通過xcode打開,跟普通的項目一樣,如下圖所示：

helloword_in_xcode.jpg

選擇你自己真機(jī)運(yùn)行所需要的 Signing 中的Team值。 然后可以啟動項目。

運(yùn)行界面如下：

helloword_start.jpg