Cordova - Windows系統下安裝配置Cordova
使用Cordova可以很方便地進行跨平臺應用的開發。在之前的文章:Cordova - 使用Cordova開發iOS應用實戰1(配置、開發第一個應用)。介紹瞭如何在Mac OS系統下安裝使用Cordova。本文介紹如何在Windows系統下搭建Cordova環境。並使用Cordova編譯釋出一個安卓(Android)應用。
一,Cordova環境搭建
1,安裝Node.js
主要是用來下載和安裝Cordova
下載地址:https://nodejs.org
將下載下來的msi檔案執行安裝即可。
在命令提示符(cmd)中執行npm -v,如果出現版本號則說明Node.js安裝成功
2,安裝Cordova CLI
1 |
|
以後如果要更新Cordova,執行如下命令:
1 |
|
cordova更新完成後,還需要更新專案(比如更新ios專案):
1 |
|
3,測試下Cordova是否安裝成功
執行如下命令:
1 |
|
顯示版本號則證明安裝成功。
二,Android環境搭建
要使用Cordova開發Android應用,首先還是要在本機搭建個安卓環境。
具體可以參考我前面寫的這篇文章:Android - Windows下開發環境的搭建(附:編寫執行一個簡單樣例)
三,建立一個簡單的Cordova專案
1,在終端中執行cd命令,進入想要建立專案的目錄位置
比如我們想把工程建立在H盤中Code目錄下,首先在命令控制檯中進入到這個資料夾。
2,執行如下命令建立工程專案
1 |
|
引數說明:
第一個引數hello為工程的資料夾名;
第二個引數(可選)com.example.hello為應用程式的id名,可以在config.xml中修改,如果不指定的話預設為io.cordova.hellocordova;
第三個引數(可選)HelloWorld為App顯示的名稱,也可在config.xml中修改。
3,建立成功後工程目錄如下:
目錄檔案說明:
conig.xml:cordova的配置檔案
hooks/:存放自定義cordova命令的指令碼檔案。
platforms/:各個平臺原生工程程式碼,會在build時被覆蓋勿修改
plugins/:外掛目錄(主要是提供各個平臺的原生API)
www/:用H5編寫的原始碼目錄,build時會被放入各個平臺的assets\www目錄。
www/index.html:App入口html檔案
4,新增Android平臺支援
(1)進入工程目錄
1 |
|
(2)新增Android平臺檔案
1 |
|
(3)執行完畢後可以看到在platforms資料夾下已經建立了個Android工程
注意:在platforms資料夾裡的每個平臺工程檔案下,也都會有各自的www目錄(比如Android平臺便是platforms\android\assets\www),但我們不應該直接操作這個資料夾中的內容。
而是編輯最外面的www資料夾裡的頁面,然後執行build命令編譯工程,這些頁面就會自動覆蓋到各個平臺下對應目錄下。
5,工程的編譯
(1)每次當我們編輯完www資料夾裡的頁面後,然後執行如下命令會重新build工程。
1 |
|
(2)如果我們添加了多個平臺專案(比如iOS、Android)。那麼上面命令會編譯所有平臺工程。我們可以指定編譯某個平臺的,比如Andorid。
1 |
|
6,工程的執行(使用瀏覽器)
(1)執行命令:cordova serve android
(2)在瀏覽器中開啟相關地址http://localhost:8000(不管是桌面瀏覽器還是移動瀏覽器都行,下面是使用Firefox)
7,工程的執行(使用模擬器)
(1)首先我們要建立一個模擬器。執行Android SDK Manager,點選選單“Tools”-〉“Manage AVDs...”。點選彈出視窗的“Create”按鈕。
(2)執行命令:cordova emulate android這時便會啟動模擬器,並且自動將程式部署到模擬器上執行。
8,工程的執行(使用真機除錯)
(1)手機先裝好裝置驅動(這個很重要)
(2)將手機接上電腦,並設定為除錯模式。
1 |
|
(3)執行命令:cordova run android -list顯示當前連線的android裝置。
(4)執行命令:cordova run android -target="32309910caf57f11" 即可自動將工程編譯安裝到裝置上,並啟動真機進行除錯。(target裡便是上面查到的裝置編碼)
如果你電腦只接了一臺裝置那麼直接執行:cordova run android就好了。
原文出自:www.hangge.com轉載請保留原文連結:http://www.hangge.com/blog/cache/detail_1285.html