公司準(zhǔn)備開發(fā)一套APP，嗯，一個(gè)系列的APP，除了一個(gè)頁(yè)面跟業(yè)務(wù)相關(guān)的不同，其他界面基本一致，因此，產(chǎn)品萌生一個(gè)想法，關(guān)于webAPP的想法。對(duì)，苦逼的程序員負(fù)責(zé)調(diào)研可行性以及整體的方案流程。目的為了達(dá)到除了業(yè)務(wù)數(shù)據(jù)頁(yè)面用web，其他頁(yè)面全是原生APP（Native）的作用。其中，關(guān)于業(yè)務(wù)的web頁(yè)面需要調(diào)用原生的相機(jī)，相冊(cè)，地理位置，掃描二維碼等一系列功能，這就涉及到j(luò)s與原生交互的問(wèn)題了。
起初iOS端提出的方案是直接用WebView或者用WKWebView嵌套就好了，因?yàn)閼?yīng)要求，只要web端發(fā)送一個(gè)假的請(qǐng)求，然后手機(jī)端斷掉截住這個(gè)請(qǐng)求也是可以實(shí)現(xiàn)交互的，不過(guò)安卓因?yàn)槠淦脚_(tái)多樣性和特殊性這個(gè)就不兼容而且可行性交差，這是安卓給的說(shuō)法，可是不管怎么說(shuō)，反正最后確定雙方都用Cordova實(shí)現(xiàn)該功能，然后，開始了iOS端關(guān)于Cordova的學(xué)習(xí)之路，話不多說(shuō)，來(lái)點(diǎn)干貨。
1 Cordova簡(jiǎn)介
1.1 Cordova是什么
Cordova前身是phonegap,而PhoneGap是Nitobi軟件公司2008年推出的一個(gè)框架，旨在彌補(bǔ)web和iOS之間的不足，使得web和iPhone SDK之間的交互更容易。后來(lái)又加入了Android SDK 和BlackBerry SDK，再然后又陸續(xù)加入了更多的平臺(tái)。但是在2011年，Nitobi公司被Adobe收購(gòu)，PhoneGap也被提交到Apache Incubator。由于Adobe現(xiàn)在擁有PhoneGap商標(biāo)，PhoneGap v2.0版產(chǎn)品就更名為Apache Cordova。
據(jù)說(shuō)Cordova是Nitobi團(tuán)隊(duì)當(dāng)時(shí)坐落的街道名稱，用此名來(lái)紀(jì)念Nitobi團(tuán)隊(duì)的貢獻(xiàn)。Apache Cordova是從PhoneGap中抽出的核心代碼，是驅(qū)動(dòng)PhoneGap的核心引擎。
1.2 Cordova的工程結(jié)構(gòu)
有下圖可以看出，關(guān)于Cordova的工程結(jié)構(gòu)以及與Native API之間的關(guān)系：
由上圖可以看出，其實(shí)Cordova的使用分為上面幾個(gè)框架結(jié)構(gòu)，在Native與web之間交互。
2 Cordova安裝
2.1 準(zhǔn)備工作
因?yàn)楸救藦氖耰OS工作，所以只闡述在Mac端安裝Cordova的步驟及解釋，至于windows下安裝Cordova的步驟，這里不再贅述。
（1）首先，你要有一臺(tái)Mac電腦，如果沒(méi)有，那么，你就把這篇文章關(guān)了吧，看了也沒(méi)什么用。
（2）然后你需要安裝xcode，當(dāng)然，你要開發(fā)，這一點(diǎn)必不可少。
（3）你需要申請(qǐng)證書，然后在xcode中設(shè)置配置文件開發(fā)者賬號(hào)...(可后面再做)。
（4）好了，你可以開始安裝Cordova了。
2.1 安裝Node.js
要安裝Cordova，需要先安裝Node.js在Node.js官網(wǎng),上下載并安裝，下載好以后，一步一步點(diǎn)擊下去就好，可以的老鐵，沒(méi)毛病。如果你實(shí)在不會(huì)，可以參考文章Mac下安裝Node.js。
2.2 安裝git
git一般不用安裝，osx和linux都自帶git，可以在命令行輸入git --version檢查一下。如果沒(méi)有g(shù)it，需要到git官網(wǎng)下載安裝一個(gè)git客戶端。
2.3 使用node.js的依賴包管理工具npm來(lái)進(jìn)行cordova安裝
接下來(lái)，在終端輸入命令：
sudo npm install -g cordova
過(guò)程可能稍微有點(diǎn)枯燥和漫長(zhǎng)，請(qǐng)耐心等待，其實(shí)需要輸入的安裝命令只有npm install -g cordova,之所以輸入sodu,是因?yàn)橛悬c(diǎn)Mac直接輸入前一句代碼是安裝不起的，安裝效果如下圖：
因?yàn)楸救耸堑诙伟惭b，可能圖示稍微有點(diǎn)不同，不過(guò)基本如此，無(wú)傷大雅。
3 創(chuàng)建你的第一個(gè)Cordova工程
3.1 新建項(xiàng)目
繼續(xù)，打開終端，cmd切換目錄到工作目錄下，輸入以下命令，同樣，可能需要點(diǎn)時(shí)間來(lái)完成。
cordova create Demo com.YanSY.demo.hello HelloWorld
| Parameter（參數(shù)） | Description（描述） | Notes（目錄） |
|---|---|---|
Demo(參數(shù)是必填) |
將為你的項(xiàng)目生成一個(gè)Demo目錄 | www子目錄是應(yīng)用程序的主頁(yè)，以及各種資源(css,js,img)，遵循共同的web開發(fā)文件命名規(guī)范。這些資源將存儲(chǔ)在設(shè)備上的本地文件系統(tǒng)，而不是遠(yuǎn)程服務(wù)。config.xml文件包含重要的需要生成和分發(fā)應(yīng)用程序的元數(shù)據(jù)。 |
com.YanSY.demo.hello (參數(shù)可選) |
App ID | 如果不填寫這個(gè)參數(shù)，第三個(gè)參數(shù)就要省略，默認(rèn)值是 io.cordova.hellocordova，但建議你填寫一個(gè)適當(dāng)?shù)闹怠?/td> |
HelloWorld(參數(shù)可選) |
應(yīng)用程序的項(xiàng)目名 | 這個(gè)參數(shù)的默認(rèn)值是 HelloCordova，但建議你填寫一個(gè)適當(dāng)?shù)闹怠?/td> |
3.2 添加平臺(tái)支持
所有后續(xù)命令在項(xiàng)目的目錄中進(jìn)行，可在該項(xiàng)目任何子目錄中，cmd切換到項(xiàng)目目錄下：
cd Demo
在構(gòu)建項(xiàng)目之前，你需要指定一組目標(biāo)平臺(tái)。你能夠運(yùn)行這些命令取決于您的機(jī)器是否支持每一個(gè)SDK，合理是否已安裝SDK。在MAC上運(yùn)行命令：
cordova platform add ios
如果需要查看Cordova支持平臺(tái)以及已經(jīng)添加的平臺(tái)，終端輸入命令：
cordova platforms ls
3.3 添加插件
根據(jù)項(xiàng)目具體功能需要，可添加插件以簡(jiǎn)單方便調(diào)用原生接口，如需添加插件，可以去Cordova插件庫(kù) 搜索需要的插件：
> cordova plugin add com.phonegap.plugins.barcodescanner
> cordova plugin add org.apache.cordova.file-transfer
> cordova plugin ls
并非所有的插件都是全平臺(tái)支持的，有些可能只支持安卓，也有的可能同時(shí)支持安卓和iOS，所以在多平臺(tái)開發(fā)時(shí)，請(qǐng)慎重選擇插件。個(gè)人建議，可自定義插件類，可參考官網(wǎng)Cordova自定義插件。
3.4 迭代項(xiàng)目
在工程目錄下運(yùn)行下面的命令來(lái)構(gòu)建項(xiàng)目：
cordova build
或者，指定生成iOS平臺(tái)代碼項(xiàng)目：
cordova platform add iosiOS_Cordova開發(fā)教程（一
4 運(yùn)行項(xiàng)目
4.1 打開工程
步驟走完第三章，那么，一個(gè)簡(jiǎn)單的Cordova項(xiàng)目就已經(jīng)搭建完成了，現(xiàn)在，我們運(yùn)行下我們工程。打開目錄下
/Users/YanSY/Desktop/Demo/platforms/ios/HelloWorld.xcworkspace
為了避免引起混淆，建議移除掉下圖中兩個(gè)文件/文件夾引用：
4.2 Events Cordova生命周期事件
| 生命周期函數(shù) | 釋義 |
|---|---|
| deviceready | 當(dāng)Cordova加載完成會(huì)觸發(fā) |
| pause | 當(dāng)應(yīng)用程序進(jìn)入到后臺(tái)時(shí)觸發(fā) |
| resume | 應(yīng)用程序從后臺(tái)進(jìn)入到前臺(tái)會(huì)觸發(fā) |
4.3 Plugin APIs 自定義Plugin方法
附錄：
第二篇文章iOS_Cordova開發(fā)教程（二）介紹了如何一步一步將Cordova集成到已有的工程項(xiàng)目中，如果有需要的可以看看。
