建立你的第一個Cordova App

標籤：window   middle   erro   通過   lan   blog   必須   bash   path   

本教程教你如何使用Cordova命令列工具建立一個Cordova App，並將它打包到各個手機平台。關於CLI命令更詳細的內容請參考:Cordova CLI詳情。

安裝Cordova CLI

Codorva CLI以npm包的形式發布，通過以下幾個步驟來安裝。

1. 安裝node.js，：https://nodejs.org/dist/，安裝完成後記得將安裝路徑加入到path系統內容變數中，我的安裝路徑是C:\Program Files\nodejs\。安裝成功後可以使用node和npm命令。

      2.(可選)下載並安裝git用戶端，這樣在命令列中就可以調用git的命令了。有的外掛程式只能通過指向git庫的url下載，這個時候git用戶端就是必須的了。大部分情況下，這個不是必須的。      3.通過nmp安裝cordova模組。

• 在 OS X 和 Linux系統下:

     $ sudo npm install -g cordova

• 在 Windows系統下:

     C:\>npm install -g cordova

         -g參數指示cordova是全域安裝，否則它只會安裝到當前工作目錄下的node_module子目錄下。

安裝成功後就可以使用cordova的命令了。

 

建立App

 

進入到你的工程目錄，我這裡是Working目錄，記住目錄不能帶中文，然後建立cordova工程:

D:\Working>cordova create hello com.example.hello HelloWorld

hello是工程目錄名稱，com.example.hello是包名，HelloWorld是app名稱。這個命令會為你的cordova App建立必要的目錄結構，如所示：

config.xml：設定檔，對工程的一些配置都會寫在這裡面，比如app名稱，表徵圖等等。

www：www目錄是工程的web開發目錄，包含html,css,js檔案，其中index.html就是開始頁面。大部分開發的都會在這個目錄裡進行，也就是所謂的資源套件的開發(開發html,css和js代碼)。在產生目標平台下的app時，www目錄下的內容會直接複製到目標平台的www目錄中去，例如：platforms/ios/www，platforms/android/assets/www。因此，不要改動目標平台下的www目錄中的內容。如果使用了版本控制工具，應該將根目錄下的www加入版本控制中去。

platforms：platforms包含目標平台下所有的原始碼和產生指令碼，目標平台可以通過cordova命令添加。當使用CLI工具時，請不要改動platforms下的任何東西（除非你知道原理）。當產生app時或者重新安裝外掛程式時，platforms裡面的東西會才被改動。

plugins：添加的外掛程式會被拷貝到這個目錄中。

hooks：這個目錄包含自訂的CLI命令指令碼，該目錄下的指令碼會在命令匹配目錄名稱的前後執行。這對整合自己的產生系統或者版本控制系統很有協助。(剛接觸的人可以忽略)

添加平台cd到工程目錄，然後添加目標平台。--save參數保證平台會被儲存到config.xml檔案中。

 

 

1.  $ cd hello
2.  $ cordova platform add ios --save
3.  $ cordova platform add android --save

 

可以通過下面的命令查看添加了哪些平台：

$ cordova platform ls

添加SDK

為了產生和運行app，必須添加各個平台的SDK。例如要產生android平台下的app，就必須安裝JDK，Android SDK，Gradle。如果你使用瀏覽器作為平台，那麼可以添加browser平台，它不需要SDK。不過這種就是純Web項目了。要列出各個平台所需的SDK，使用下面的命令：

1.  $ cordova requirements
2.  Requirements check results for android:
3.  Java JDK: installed .
4.  Android SDK: installed
5.  Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
6.  Gradle: installed
7.   
8.  Requirements check results for ios:
9.  Apple OS X: not installed
10.  Cordova tooling for iOS requires Apple OS X
11.  Error: Some of requirements check failed

關於各個平台所需的配置詳細資料，請參考：android平台所需配置，IOS平台所需配置。產生App

corodva create命令為我們產生了一個項目的大致架構，其中開始頁面是www/index.html頁面。所有的初始化代碼都應該放在www/js/index.js下的deviceready事件處理裡面，因為這個時候corodva才可用。當我們開發完成，使用下面的命令產生app。

產生所有平台下的app：

$ cordova build

產生特定平台下的app：

$ cordova build android

測試App

測試App需要模擬器，比如Android的AVD。然後通過下面的命令進行類比：

$ cordova emulate android

當然，還可以直接通過下面的命令將app安裝到手機上測試。

$ cordova run android

上面兩種測試方式都比較慢，而且無法調試，可以將項目匯入到eclipse(以android平台為例)中，然後進行測試。在匯入時選擇android項目和CordovaLib項目兩個，具體方法請參考：在eclipse中測試cordova項目升級Cordova

 

通過下面的命令升級cordova：

npm update -g cordova

通過下面的命令安裝特定版本的Cordova：

npm install -g [email protected]

運行 cordova -v 查看目前的版本。要找到最新版本使用下面的命令：

$ npm info cordova version

建立你的第一個Cordova App