WIN7下搭建CORDOVA環境

技術交流羣：233513714

 

 

 

Cordova 環境搭建

1安裝JDK

工具文件夾中：jdk目錄

 

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

設置環境變量：

JAVA_HOME= C:\Program Files\Java\jdk1.6.0_45

JRE_HOME=C:\Program Files\Java\jdk1.6.0_45\jre

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

Path=%ANT_HOME%\bin;%MAVEN_HOME%\bin;%JAVA_HOME%\bin;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\MySQL\MySQL Server 5.5\bin;D:\Program Files\TortoiseSVN\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;C:\Program Files\nodejs\

2 安裝APACHE ANT

工具文件夾中：apache-ant-1.9.4-bin.zip

 

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

設置環境變量：

新建ANT_HOME=E:\ant\apache-ant-1.9.4

Path中添加：%ANT_HOME%\bin;

3安裝ANDROID SDK

工具文件夾中：android-環境-64x.zip

 

運行命令行工具以前，你應該確保你已經安裝了目標平臺所需的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

工具文件夾中：nodejs.zip

 

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

安裝完成後，運行Node.js command prompt

 

 

出現：Your environment has been set up for using Node.js 0.10.36 (x64) and npm.爲正在配置環境變量

 

運行：node -v   查看node.js的版本號

5安裝CORDOVA

在Node.js command prompt中，運行npm install -g cordova

直接運行npm install -g cordova 安裝的cordova版本爲當前的最高版本

下載指定cordova版本，運行npm install -g cordova@4.2.0，安裝的即爲4.2.0版本

 

6建立應用工程

自定義一個工做空間

 

進入工做空間並建立應用工程

運行：cordova create hello com.example.hello HelloWorld -d

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

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

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

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

 

 

7添加特色平臺支持

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

 

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

cordova platform add android

cordova platform add ios

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

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

cordova platfrom list

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

cordova platform rm android

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

警告：

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

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

 

8編譯應用程序

將生成的android工程導入eclipse中：

打開Eclipse，右擊選擇import

 

 

 

 

 

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

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

cordova build 或 cordova build android  //只針對Andorid平臺編譯

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

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

cordova prepare android

cordova compile android

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

9仿真器中測試

打開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程序，以下：

 

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

cordova emulate android

10添加插件支持（原文:ADD PLUGIN FEATURES）

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

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

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

cordova plugin search bar code

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

cordova plugin ls

使用如下命令刪除插件：

cordova plugin rm org.apache.cordova.console    

Plugin add高級選項

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

cordova plugin addorg.apache.cordova.console@latest

cordova plugin addorg.apache.cordova.console@0.2.1

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

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

cordova plugin addhttps://github.com/apache/cordova-plugin-console.git

固然你須要先安裝git。

11MERGE目錄

前面提到，通常狀況下最好不要修改各自平臺下的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目錄主要用於爲平臺定製功能。

12幫助命令

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

cordova help

更新命令

如下語句更新cordova：

npm update -g cordova

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

cordova platform update android

注意：

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