跨平臺框架Cordova 命令行簡介（CLI）

這一節，咱們將看到如何經過Cordova命令行（CLI）建立新的項目，針對不一樣平臺進行編譯，並利用仿真器或真實設備進行測試。CLI是跨平臺工做方式的主要工具。

固然，你也能夠利用CLI進行一些項目的初始化工做，好比建立初始代碼等等。稍後，你就能夠針對不一樣平臺提供的SDK進行持續開發。

如下咱們以Windows下Android應用開發爲例。

前提條件

1） JDK

下載地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

設置環境變量：

JAVA_HOME= C:\Program Files (x86)\Java\jdk1.8.0

Classpath=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

注意：

具體路徑根據你安裝選項而定。

2） Apache Ant

下載地址：http://apache.fayea.com/apache-mirror/ant/binaries/

設置環境變量：

新建ANT_HOME=C:\ant193

Path中添加：%ANT_HOME%\bin;

3）Android SDK

運行命令行工具以前，你應該確保你已經安裝了目標平臺所需的SDK。以Android爲例，咱們能夠到如下網址下載一個安裝套件：

http://developer.android.com/sdk/index.html

點擊頁面右側的「Download the SDK ADT Bundle for Windows」下載安裝。

固然你也能夠逐個下載和配置，不過針對初學者我推薦下載上面的安裝套件，省時省力。

其餘平臺的SDK，請參照官方文檔：

http://cordova.apache.org/docs/en/3.4.0/guide_platforms_index.md.html#Platform%20Guides

注意：

請把SDK的路徑添加到系統環境變量Path中去，總共兩個。好比d:\adt-bundle\sdk\tools和d:\adt-bundle\sdk\platform-tools

4）安裝Node.js

下載地址：http://nodejs.org/download/

提示：

64位版的我試了不少次，都沒法安裝Cordova，暫時不清楚緣由。

32位版的下載後安裝正常。

5）安裝Cordova

安裝Node.js後，命令行執行如下語句：

npminstall -g cordova

我 試過 以上語報錯

修改以下 npm install -g cordova

耐心等候直至安裝完成。

建立應用程序

命令行，切換到你的項目工做目錄，執行如下語句建立HelloWord應用：

cordovacreate hello com.example.hello HelloWorld –d

耐心等待直至命令完成。

第一個參數hello，指定目錄名稱。

第二個參數com.example.hello相似C#的命名空間，或Java的包名。（不太肯定，讀者自行鑑別，原文寫的是a reversedomain-style identifier）

第三個參數指定了應用程序的顯示標題。

完成後能夠查看Hello目錄及其子目錄結構。

添加特定平臺支持

注意，如下全部命令都要在項目根目錄下運行（用cd命令進入）。

首先，你須要添加你所須要支持的平臺，好比：

cordovaplatform add android

cordovaplatform add ios

注：貌似ios開發只能在Mac機器上進行，因此上面的add ios不會出如今Windows機器上。

完成後運行如下命令查看：

cordovaplatfrom list

若是之後須要移除Android平臺支持，能夠運行：

cordovaplatform rm android

運行platform add或platform rm命令會影響項目目錄下的內容。每個被添加的平臺會在項目根目錄下的platform下產生一個對應平臺的子目錄。你能夠看到各個平臺下也存在www目錄，好比platforms\android\assets\www。由於CLI會不斷的複製項目根目錄下的www中的內容，因此你應確保不要對平臺下的www目錄中的內容進行修改。若是你實在有這個需求，請參照本章末尾的「Merges目錄」。

警告：

若是你使用CLI管理你的項目，請儘可能不要更改platforms目錄下的任何內容，除非你有明確的把握知道你在作什麼。這是由於該目錄下的內容會在一些條件下被覆蓋。

若是你但願此時能經過針對特定平臺的SDK（好比Eclipse）來進行開發，你應該打開那些位於platforms子目錄下的內容。這是由於平臺相關的一些配置信息是存儲在platforms特定子目錄下的。

編譯應用程序

默認狀況下，cordova create腳本將建立一個很是簡單的基於Web的應用程序。

運行如下命令編譯應用程序：

cordovabuild

或

cordovabuild android  //只針對Andorid平臺編譯

若是最終提示：BUILD SUCCESSFUL，則編譯成功。

實際上build命令對應於如下兩個命令：

cordovaprepare android

cordovacompile android

這意味着你能夠僅執行prepare命令，而後用SDK開發環境去另外編譯。

仿真器中測試

打開Eclipse，選擇菜單New­->Project->Android->AndroidProject From Existing Code，選擇項目根目錄爲hello\platforms\android，並確保hello和hello-CordoraLib兩個項目均被選中。（須要選中hello-CorodoraLib項目是由於這個項目將取代傳統的.jar文件）

若是項目名上有紅色的叉叉，則表明有未解決的問題。此時能夠嘗試：

1） 項目名上點擊右鍵，選擇Properties。

2） 選中左側導航欄中的Android。

3） 在右側選中對應的目標平臺。好比Android4.4。

4） 點擊OK。

稍後，在Eclipse中啓動Android SDK Manager。以下圖：

打開Manger後，點擊菜單Tools->Manage AVDs…，而後點擊Device definitions欄，以下圖：

選擇一個你想要的仿真器，而後點擊Create AVD，接受默認設置便可。完成後你將在列表中看到新建的仿真器。

在列表中選中仿真器，點擊窗體右側的「Start」按鈕啓動仿真器（啓動提示窗口中點擊Launch便可）。

項目名稱上點擊右鍵，選擇Run As->Android Application，而後耐心等待仿真器加載。

若是你的CPU支持虛擬化技術，你能夠參照相關文檔進行設置以提升仿真器運行效率。

加載後你就能夠經過操做仿真器看到你的第一個Android程序，以下：

或者你也能夠在命令行中運行如下命令啓動仿真器：

cordovaemulate android

添加插件支持（原文:Add Plugin Features）

如以上咱們看到的，Cordova默認提供的程序界面和功能很是簡單。固然你能夠根據你的須要，運行標準Web開發技術對頁面進行設計。可是當你須要和不一樣的設備進行通信交互時，你就須要藉助於一些插件，以便可以訪問Cordova提供的核心API。

通常來講，你添加一個插件的目的是爲了利用Cordova的API訪問設備。詳細的可用插件列表你能夠在社區中看到（http://plugins.cordova.io/）。固然你也能夠自定義本身的插件。

你能夠用CLI搜索可用的插件，好比：

cordovaplugin search bar code

你能夠經過如下命令安裝插件，好比:

cordovaplugin add org.apache.cordova.device                   //設備API

cordovaplugin add org.apache.cordova.network-information  //網絡（事件）

cordovaplugin add org.apache.cordova.battery-status      //電池（事件）

cordovaplugin add org.apache.cordova.device-motion     //加速器

cordovaplugin add org.apache.cordova.device-orientation     //羅盤

cordovaplugin add org.apache.cordova.geolocation         //定位

cordovaplugin add org.apache.cordova.camera                 //攝像頭

cordovaplugin add org.apache.cordova.media-capture     //媒體文件處理

cordovaplugin add org.apache.cordova.media                   //媒體文件處理

cordovaplugin add org.apache.cordova.file                        //文件訪問

cordovaplugin add org.apache.cordova.file-transfer          //文件傳輸

cordovaplugin add org.apache.cordova.dialogs                 //對話框

cordovaplugin add org.apache.cordova.vibration              //震動

cordovaplugin add org.apache.cordova.contacts               //聯繫人

cordovaplugin add org.apache.cordova.globalization       //全球化

cordovaplugin add org.apache.cordova.splashscreen       //閃屏

cordovaplugin add org.apache.cordova.inappbrowser             //打開新的瀏覽器窗口

cordovaplugin add org.apache.cordova.console                //調試控制檯

你能夠用如下命令查看全部已經安裝的插件

cordovaplugin ls

使用如下命令刪除插件：

cordovaplugin rm org.apache.cordova.console    

Plugin add高級選項

上面的安裝方式是從registry.cordova.io庫中按照id獲取插件，這是一個很是通用的作法。你能夠在安裝時指定版本，好比：

cordovaplugin add org.apache.cordova.console@latest

cordovaplugin add org.apache.cordova.console@0.2.1

其中的latest表示獲取最新版本。中間用@分隔。

若是插件不是在默認庫中，而是在其餘地方，則你能夠指定URL：

cordovaplugin add https://github.com/apache/cordova-plugin-console.git

固然你須要先安裝git。

Merge目錄

前面提到，通常狀況下最好不要修改各自平臺下的www目錄下的文件。可是若是你確實須要爲某個平臺定製一些內容，又該怎麼辦呢？

項目根目錄下有一個merges目錄。咱們以一個實例來說解：

1） 修改www\css目錄下的index.css文件，設置event.received的樣式爲紅色：  background-color:#FF0000;

2） 修改platforms\android\assets\www\css中的index.css文件，設置.event.received的樣式爲藍色：background-color:#0000FF;

3） 在merges\android目錄下新建一個css目錄。

複製www\css中的index.css文件到該目錄下。

修改該目錄下的index.css文件中的.event.received的樣式爲綠色：background-color:# 00FF00;

仿真器中運行，你會發現最終呈現的結果爲綠色。由此咱們可知：

1） Merges目錄中沒有對應文件時，platform下的文件會被跟目錄（www）下的文件覆蓋。（即：若是Merges目錄中不存在index.css文件，最終顏色將爲紅色）

2） Merges目錄中存在對應文件時，platform下的文件會被merges下的文件覆蓋。可見Merges目錄主要用於爲平臺定製功能。

幫助命令

經過如下命令查看幫助信息:

cordovahelp

更新命令

如下語句更新cordova：

npmupdate -g cordova

cordova更新完成後，你還須要更新項目：

cordovaplatform update android

注意：

由於各版本之間差別較大，執行更新時請事先仔細閱讀官方文檔，以避免發生數據丟失或錯誤。