1. 程式人生 > 實用技巧 >Cordova - Windows系統下安裝配置Cordova

Cordova - Windows系統下安裝配置Cordova

使用Cordova可以很方便地進行跨平臺應用的開發。在之前的文章:Cordova - 使用Cordova開發iOS應用實戰1(配置、開發第一個應用)。介紹瞭如何在Mac OS系統下安裝使用Cordova。本文介紹如何在Windows系統下搭建Cordova環境。並使用Cordova編譯釋出一個安卓(Android)應用。

一,Cordova環境搭建

1,安裝Node.js

主要是用來下載和安裝Cordova

下載地址:https://nodejs.org

將下載下來的msi檔案執行安裝即可。

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)


在命令提示符(cmd)中執行npm -v,如果出現版本號則說明Node.js安裝成功

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)


2,安裝Cordova CLI

執行如下命令安裝:

1

npm install -g cordova

以後如果要更新Cordova,執行如下命令:

1

npm update cordova -g

cordova更新完成後,還需要更新專案(比如更新ios專案):

1

cordova platform update ios


3,測試下Cordova是否安裝成功
執行如下命令:

1

cordova -v

顯示版本號則證明安裝成功。

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)




二,Android環境搭建

要使用Cordova開發Android應用,首先還是要在本機搭建個安卓環境。

具體可以參考我前面寫的這篇文章:Android - Windows下開發環境的搭建(附:編寫執行一個簡單樣例)

三,建立一個簡單的Cordova專案
1,在終端中執行cd命令,進入想要建立專案的目錄位置

比如我們想把工程建立在H盤中Code目錄下,首先在命令控制檯中進入到這個資料夾。

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)

2,執行如下命令建立工程專案

1

cordova create hello com.example.hello HelloWorld

引數說明:
第一個引數hello為工程的資料夾名;
第二個引數(可選)com.example.hello為應用程式的id名,可以在config.xml中修改,如果不指定的話預設為io.cordova.hellocordova;
第三個引數(可選)HelloWorld為App顯示的名稱,也可在config.xml中修改。

3,建立成功後工程目錄如下:

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)

目錄檔案說明:
conig.xml:cordova的配置檔案
hooks/:存放自定義cordova命令的指令碼檔案。
platforms/:各個平臺原生工程程式碼,會在build時被覆蓋勿修改
plugins/:外掛目錄(主要是提供各個平臺的原生API)
www/:用H5編寫的原始碼目錄,build時會被放入各個平臺的assets\www目錄。
www/index.html:App入口html檔案


4,新增Android平臺支援
(1)進入工程目錄

1

cd hello

(2)新增Android平臺檔案

1

cordova platform add android

(3)執行完畢後可以看到在platforms資料夾下已經建立了個Android工程

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)


注意:在platforms資料夾裡的每個平臺工程檔案下,也都會有各自的www目錄(比如Android平臺便是platforms\android\assets\www),但我們不應該直接操作這個資料夾中的內容。
而是編輯最外面的www資料夾裡的頁面,然後執行build命令編譯工程,這些頁面就會自動覆蓋到各個平臺下對應目錄下。

5,工程的編譯

(1)每次當我們編輯完www資料夾裡的頁面後,然後執行如下命令會重新build工程。

1

cordova build

(2)如果我們添加了多個平臺專案(比如iOS、Android)。那麼上面命令會編譯所有平臺工程。我們可以指定編譯某個平臺的,比如Andorid。

1

cordova build android

6,工程的執行(使用瀏覽器)

(1)執行命令:cordova serve android

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)

(2)在瀏覽器中開啟相關地址http://localhost:8000(不管是桌面瀏覽器還是移動瀏覽器都行,下面是使用Firefox)

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)

7,工程的執行(使用模擬器)

(1)首先我們要建立一個模擬器。執行Android SDK Manager,點選選單“Tools”-〉“Manage AVDs...”。點選彈出視窗的“Create”按鈕。

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)

(2)執行命令:cordova emulate android這時便會啟動模擬器,並且自動將程式部署到模擬器上執行。

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)

8,工程的執行(使用真機除錯)

(1)手機先裝好裝置驅動(這個很重要)

(2)將手機接上電腦,並設定為除錯模式。

1

設定/設定 -> 開發者選項 -> USB除錯。將其打勾,允許USB線除錯。

(3)執行命令:cordova run android -list顯示當前連線的android裝置。

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)

(4)執行命令:cordova run android -target="32309910caf57f11" 即可自動將工程編譯安裝到裝置上,並啟動真機進行除錯。(target裡便是上面查到的裝置編碼)

如果你電腦只接了一臺裝置那麼直接執行:cordova run android就好了。

原文:Cordova - Windows系統下安裝配置Cordova(附編譯釋出Android應用)


原文出自:www.hangge.com轉載請保留原文連結:http://www.hangge.com/blog/cache/detail_1285.html