前言

html5開發移動應用已經是比較流行的手段，寫一套html頁面就可以適配各種移動設備，節省了跨平臺應用的開發時間，但是要訪問原生的設備功能還是有些不便。這時我們可以借助Cordova來開發H5跨平臺應用。

一、什么是Cordova

1、Cordova 前身是 PhoneGap，Adobe將PhoneGap貢獻給Apache后成為開源項目就改名成Cordova。

2、Cordova提供了一組設備相關的API，通過這組API，移動應用能夠以 JavaScript 訪問原生的設備功能，如攝像頭、麥克風等。

3、Cordova還提供了一組統一的 JavaScript 類庫，以及為這些類庫所用的設備相關的原生后臺代碼。

4、Cordova支持如下移動操作系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

二、基本環境需要

1、安裝Node.js?

主要是需要用來下載和安裝Cordova下載地址：https://nodejs.org將下載下來的pkg文件運行安裝即可

2、、安裝 cordova

sudo npm install -g cordova

測試下Cordova是否安裝成功運行如下命令：

cordova -v

以后如果要更新Cordova，運行如下命令：

sudo npm update cordova -g

cordova更新完成后，還需要更新項目（比如更新ios項目）：

cordova platform update ios

3、創建項目

cordova create hello com.example.hello HelloWorld

參數說明：

第一個參數 hello 為工程的文件夾名；

第二個參數（可選）com.example.hello 為應用程序的id名，與Xcode中類似，可以在 config.xml 中修改，如果不指定的話默認為 io.cordova.hellocordova；

第三個參數（可選）HelloWorld 為App顯示的名稱，也可在 config.xml 中修改。

這樣就創建了一個 cordova項目，你可以打開platform/ios 運行下面的應用程序

后面我們進行開發的時候通常有如下兩種方案：

（1）如果在Xcode編譯運行的話，使用的是 Staging 下面的html頁面。所以我們可以把外面的www文件夾和config.xml從工程中移除（上圖紅框標注的），只編輯使用Staging文件夾下的html文件，但不建議這么做。

因為每次Cordova編譯的時候，或者更新工程、安裝插件時都會重新把紅框里的文件覆蓋到各個平臺下的文件（藍框標注的）。同時只編輯單個平臺工程文件夾下的html頁面，也不符合一次編寫，同時編譯發布多平臺的跨平臺應用開發思想。

（2）所以一般我都是編輯外面的（紅框標注）www文件夾里的頁面，然后運行如下命令重新 build 工程，這些頁面就會自動覆蓋到各個平臺下對應目錄下。

cordova build

（3）然后可以在Xcode中編譯運行，也可以不用Xcode直接在“終端”中運行如下命令啟動模擬器運行：

cordova emulate ios

三、插件

使用已有插件：

攝像頭/相冊 cordova plugin add org.apache.cordova.camera

自定義插件：

重點來了，如果想要直接添加到現有工程中，那么可以使用我下面的Demo，將項目中的www文件夾拷貝到document目錄下就可以實現動態從沙盒加載頁面啦

demo地址