phonegap android開發初體驗

      最近想學習一下手機上的web app開發，朋友推薦phonegap是一個很不錯的跨平臺開發框架，下面是初次使用的一些總結總結。

一、開發環境配置

      系統要求能夠具體參考：http://developer.android.com/sdk/requirements.html，下面是操做的具體步驟。

      a、安裝jdk，jdk是android sdk的安裝基礎。下載地址：http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-432154.html。windows下推薦使用 jdk-7-windows-i586。

      b、安裝eclipse，須要3.4以上版本，下載地址：http://www.eclipse.org/downloads/download.php?file=/eclipse/downloads/drops/R-3.7-201106131736/eclipse-SDK-3.7-win32.zip。若是不想安裝就使用eclipse classic版本。

      c、安裝android的SDK，下載地址：http://developer.android.com/sdk/installing.html

       安裝時須要記錄sdk的安裝目錄，好比：C:\Program Files\Android\android-sdk，在eclipse中導入sdk時使用。導入方法：打開eclipse -> Window -> Preferences -> 選擇 android -> 在SDK location填入SDK的安裝目錄。

       注意：1）SDK的路徑中不能有空格，可將「Program Files」替換成「PROGRA~1」。2）打開eclipse -> Window -> Android SDK and AVD Manager -> 選擇合適的android版本，update all， 保證SDK安裝完整。

       e、下載安裝 ADT Plugin，是一款Eclipse的插件，用於快速開發Android應用。

       安裝步驟：打開eclipse -> Help -> Install New Software -> add -> Name填ADT Plugin，Location填 https://dl-ssl.google.com/android/eclipse/ -> ok，安裝完成後重啓eclipse。

       注意：若是安裝時出現錯誤，請嘗試將 https 改成 http 。

      f、下載最新的phonegap穩定版本並解壓，可在官方網站下載（www.phonegap.com）。這裏使用的是1.1.0。

二、建立project

     a、打開eclipse -> File -> New -> Project -> Andorid Project

           

     b、填寫項目信息，包括項目名稱、選擇系統版本（在這裏使用的是Android 2.2），Package name等，填完以後finish就建立了一個基本的android應用程序。以下圖：

           

     c、建立AVD（android virtual device），爲程序選擇執行環境。

           打開eclipse -> window -> Android SDK and AVD Manager，照下圖進行建立：

           

           注意：由於項目在建立時選擇了Android2.2，因此選在AVD的target版本應該不能比2.2高。

           此時右鍵選中項目根目錄 -> Run as -> Android Application 執行會獲得下面的效果：

           

     d、導入phonegap框架

     1）在根目錄下建libs文件夾，將下載的phonegap解壓後的android下的jar包（此處爲phonegap-1.1.0.jar）拷到libs目錄下。

     2）在根目錄下的assets目錄下建www文件夾，將下載的phonegap解壓後的android下的phonegap的js（此處爲phonegap-1.1.0.js）拷貝到www目錄下。

     3）將下載的phonegap解壓後的android下的xml文件夾拷貝到項目根目錄的res文件夾下。

     4）在www目錄下建index.html，在html中引入phonegap的js，並調用phonegap的api作一些簡單的事情（API的具體含義請參考官方網站），代碼以下：

            

     5）修改主程序FirstAppActivity.java，原來代碼爲：

            

            修改後爲：

            

            此時會出現錯誤，是由於phonegap的jar包沒有引入到build path中，右鍵點擊libs -> Build Path -> Configure Path，以下圖操做添加jar包到build path中。

            

     6）修改AndroidManifnest.xml文件，將下面的內容添加到版本號的後面。

           

           在activity 節點中添加 android:configChanges="orientation|keyboardHidden"。

      7）此時執行，會獲得以下基於phonegap的頁面：

           

三、當項目搭建好後，就能夠在index.html中使用js、html、css和phonegap的api建立和豐富本身的應用了，大功告成！