Cordova環境搭建 & HelloWorld


目前的手機APP有三類:原生APP,WebAPP,HybridApp;HybridApp結合了前兩類APP各自的優點,越來越流行。

Cordova就是一個中間件,讓我們把WebAPP打包成HybridAPP,並且它提供了非常多的插件,方便我們使用原生APP的功能。

 

本文我們在win7中搭建 Cordova 開發環境,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。

然后我們來實現個簡單的demo,開始吧!

 

1 安裝Cordova

(Cordova開發環境的安裝,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等,然后創建一個HelloWord項目。)

1.1 安裝Node.js

https://nodejs.org 直接去官網下載並按默認路徑安裝就可以了。

安裝完成后在命令行:   (測試成功!)

$ npm

 

1.2 安裝Cordova CLI

命令行:

$ npm install -g cordova

如果安裝不成功,一般是網絡原因,可以找個翻牆軟件。我這邊用的是proxy999。

安裝成功后命令行:   (測試成功!)

$ cordova

 

1.3 部署Android開發環境

Cordova是一種Hybrid開發,可以被部署到android,ios等多個手機平台。這里我們以android為目標平台。

接下來我們開始android平台下相關環境的部署。

這里我們安裝AndroidStudio,可以訪問 http://www.android-studio.org/  

里邊有國內的下載鏡像。

 

1.3.1 安裝JDK

oracle官網 http://java.oracle.com/  (下不來的翻牆~~)

或國內鏡像 http://jdk.android-studio.org/

下載安裝后,配置環境變量:http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html

 

1.3.2 安裝Android SDK

下載並安裝AndroidStudio,http://developer.android.com/sdk/index.html

安裝完成后配置sdk環境變量(cordova命令要用到):http://jingyan.baidu.com/article/f71d603757965b1ab641d12a.html

 

1.3.2 安裝Ant

Ant是java平台下一個打包部署的工具,使用cordova命令的時候需要借助這個工具。

http://ant.apache.org/bindownload.cgi,下載zip壓縮包,解壓后配置環境變量:http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html

 

2 創建Cordova的第一個應用 HelloWorld

我們在d:\\test 目錄下新建一個項目

$ d:
$ cd test

先進入到目標文件夾,然后執行下面的命令

 

運行到瀏覽器:

$ cordova serve android

 

3. AndroidStudio導入Cordova項目

經過上一步的cordova項目build成功后,我們打開下面目錄,會看到一個build.gradle,它就是我們項目的關鍵,因為項目本身就是用gradle來構建的。

 

最后一步,我們打開AndroidStudio來導入上面看到的.gradle文件,就可以在AndroidStudio中來編寫我們的應用了,也可以很方便的在模擬器上預覽。

初次導入的時候會從網絡下載gradle相關的東西,要等個10分鍾。導入完成后我們運行模擬器,效果:

 

 

好了,Cordova的環境搭建已經好了。其實本文更多的都是在說android的環境搭建,花的時間最多的也是這個,而且會有國內外網絡的問題,會花不少時間。

下一篇,我們來用AngularJs+Ionic+Cordova這個非常棒的組合來快速地開發HybridAPP:

《搭建 AngularJS+Ionic+Cordova 開發環境並運行一個demo》

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM