使用 Cordova(PhoneGap)構建Android程式

標籤：

移動終端開發隨著智能手機的普及變得越來越熱,什麼項目都想移動一把,但反觀要去學這些各個終端的控制項使用,實屬不易,又特別是每個終端的控制項及所用語言都各不相同,使得這種學習變得更加困難.

有沒有一種簡單的方式能夠快速構建移動終端程式並能在各個終端平台上快速打包並正常使用? 答案是肯定的,並且這種架構還不少,本文簡單的介紹通過Cordova(原名為phonegap)這個平台構建一個android 程式.

1. 開發環境準備.
   1. 安裝JDK,此步驟忽略,各位有意的看官可自行去oracle網站上下載你適合的jdk版本.安裝完後請添加系統內容變數”JAVA_HOME”,指向的路徑為你剛安裝的JDK目錄.並將Path環境變數增加上 JAVA_HOME 路徑,即在Path環境變數路徑末尾增加上 ”;%JAVA_HOME%\bin”.
   2. 下載Adt-bundle-windows軟體包,這個是google整合了android sdk的eclipse開發環境. 下載後直接解壓即可使用.
   3. 安裝node.js, 因Cordova最新版可直接使用node.js來安裝,並且每次開發的時候都可以更新到最新的Cordova版本,故本處我們先安裝Node.js.可通過官網直接下載.
   4. 安裝cordova,在命令列工具中輸入”npm install -g phonegap”，成功後再次輸入 “npm install -g cordova”，
   5. 配置”ANDROID_HOME”環境變數,將其路徑指向你的Android SDK路徑,如我本機會設定為”D:\Stady\JAVA\Android\Adt-bundle-windows\sdk”.
   6. 另外,ADT(android 模擬器)會預設建立在 作業系統盤的使用者目錄下,若想改到其他位置,可以添加一個環境變數 “ANDROID_SDK_HOME”,指向你期望的位置即可.
2. 在正式例子之前,我們先驗證環境是否已經ok,可簡單通過查看 java/npm 版本命令來在驗證是否正常,如 java –version / npm –version.
3. 在以上步驟都ok之後,我們就可以開始Cordova之旅了.
4. 1. 在命令視窗提供cd命令跳轉到新項目存放的目錄.如 cd D:\Stady\JAVA\Android\Project .
      
   2. 通過命令 Cordova Create 建立一個新項目,最常用的命令可以使用 Cordova 路徑 包名 項目名 ,如本處我們將建立一個用於人力資源的APP,將其簡稱為 HR, 建立項目的命令便可以使用為 cordova create HR com.xiezl.hr HR , 命令執行完後,我們的專案檔大概如所示.
      
   3. Cordova 是一個可以跨平台的移動終端解決方案,目錄中platforms 就將存放各個平台所專屬的檔案資源,目前因為我們還沒有添加任何平台進去,所以這個目錄暫時是空的.本文主要介紹Android環境下的開發,其他平台(IOS,wp等)本人沒有嘗試過,但感覺應該類似.
   4. 進入到項目解決方案目錄後,通過 cordova platform add android 命令添加 android 平台.稍等片刻直到見到如所示.
   5. 此時,我們在進入到platform便可見到我們剛添加的android平台,如所示.
      
   6. 當完成上面步驟後,我們的基礎工作就已經完成了,接下來,我們用Adt-bundle-windows 中的eclipse 來開啟我們剛剛建立的項目.通過eclipse中的import命令匯入我們剛建立的項目.
      
   7. 匯入後,我們的項目在eclipse的效果如所示,一共有兩個項目,CordovaApp-CordovaLib為lib項目,HR為我們的工作項目.在這個項目中,assets 目錄下目前只有一個提示檔案,可以通過這個提示檔案的輔助方法,將檔案過濾器移除後,就可以展現出我們的專案檔.
      
   8. 接下來我們可以嘗試去看下 index.html 檔案,這個便是我們的程式入口展示介面,我們可以簡單的改造一下,假設如下所示.
      
   9. 因為僅僅是測試專案,改造完後,我們通過模擬器來運行這個項目.大概像這個樣子.可以清楚的看出我們的app展示的介面就是我們的index.html的內容.我們回到我們項目解決方案目錄下,定位到platform\android\bin目錄下,可以看到這裡有一個HR.apk檔案,相信大家已經猜出這個檔案是什麼了,不妨把這個檔案拷貝到手機上去安裝後運行下看看什麼情況.
      
   10. 經過了以上步驟,我想各位應該能明白怎麼使用cordova做android項目了.大家可以自己去嘗試一下.
5. 在上面我們簡單的介紹了使用Cordova來快速搭建一個android開發項目,例子就先介紹到此,後面我們將通過一個實實在在的真實項目HR,來一起學習如何使用jquery mobile +html5+cordova開發真正的app程式.
   號外,我也是剛開始學習這個東東,所以文中難免會有寫疏漏,歡迎各位指出以便共同學習.共同提高.

使用 Cordova(PhoneGap)構建Android程式