cordova安裝與新建項目

前言:接觸cordova是公司要做webApp,讓我做個插件供H5調用;當時一下就懵了,對於一個接觸開發時間並不長的小白來說開發插件要怎麼做啊(兩眼一抹黑),後來知道了cordova可以開發插件,然後趁這個機會學習一點cordova的開發技術,順便寫寫博客鞏固一下。其中有不對的地方,希望各位大神指出。感激不敬~~~
首先,搞清楚一個概念,phonegap與cordova之間的區別。其實, phoneGap是原先的名字,Adobe將phoneGap捐給apache之後,起了另外的一個名字——apache cordova,phoneGap的名字也被保留了。

可能需要配置的環境變量,配置過的就不用管啦:
JDK環境變量的配置:http://www.cnblogs.com/smyhvae/p/3788534.html
Android環境變量的配置:http://jingyan.baidu.com/article/09ea3ede1b4df6c0aede39ab.html
Gradle環境變量的配置:http://blog.csdn.net/lw_power/article/details/51241187
Ant環境變量的配置(前面3個配置完後貌似不需要了):
http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html

簡介

Cordova提供了一組設備相關的API,通過這組API,移動應用能夠以JavaScript訪問原生的設備功能,如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫,以及爲這些類庫所用的設備相關的原生後臺代碼。Cordova支持如下移動操作系統:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

入門第一步:cordova安裝

  • 首先我們需要安裝Node.js;https://nodejs.org 直接去官網下載並按默認路徑安裝就可以了。 安裝完成後在命令行輸入:
    nmp
    出現下面代碼及測試成功
    這裏寫圖片描述

  • 安裝Cordova CLI;
    命令行輸入:
    npm install -g cordova
    然後等待下載安裝,此過程需要等待幾分鐘(視網絡情況而定)
    這裏寫圖片描述

  • 安裝成功後命令行:
    cordova
    這裏寫圖片描述

到這裏cordova安裝就完成了,更加詳細的請查看這篇文章

入門第二步:創建Cordova應用

接下來以生成Android平臺爲例

我們在d:\test 目錄下新建一個目錄,然後執行下面的命令進入該目錄

 d:
 cd testCordova

這裏寫圖片描述

然後創建新的cordova項目,輸入以下命令:

cordova create myApp//創建myApp項目
cd myApp//進入myApp目錄
cordova platform add android//添加android平臺

當然除了android平臺,你也可以添加其他的平臺:
cordova platform add wp8
cordova platform add windows
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos\
卸載平臺命令:
cordova platform rm iOS
cordova platform rm firefoxos
cordova platform rm windows
cordova platform rm wp8
cordova platform rm firefoxos
cordova platform rm android
這裏寫圖片描述
完成後我們可以在D/testCordova/myApp下看到這樣的文件目錄
這裏寫圖片描述

其中

  • config.xml目錄: cordova的配置文件
  • hooks目錄:存放自定義cordova命令的腳本文件。每個project命令都可以定義before和after的Hook,比如:before_build、after_build。
    Hook可以採用任何編程語言來寫,Cordova CLI採用的是Node.js,所以一般都是用它來寫。

這裏提供了3個常用的Hook腳本:
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

  • platforms目錄:各個平臺的原生代碼工程,不要手動修改,因爲在build的時候會被覆蓋。
  • plugins目錄: 插件目錄(cordova提供的原生API也是以插件的形式提供的)。
  • www目錄:源代碼目錄,在cordova prepare的時候會被copy到各個平臺工程的assets\www目錄中。
    其中index.html爲應用的入口文件。

然後輸入命令行:

cordova build//編譯

如果編譯出錯你可能有一些環境變量沒有配置,請仔細檢查你的環境變量。具體環境變量配置可以查看文章開頭。

成功如下(過程可能有些漫長,請耐心等待):
這裏寫圖片描述

最後按照上面的路徑找到安裝包apk文件,將其安裝到手機上運行後如下:
這裏寫圖片描述

到此結束,謝謝各位觀看!如有錯誤請不吝指教。


爲了向別人、向世界證明自己而努力拼搏,而一旦你真的取得了成績,纔會明白:人無須向別人證明什麼,只要你能超越自己。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章