使用 Eclipse PhoneGap 構建 Android 應用程式入門

來源:互聯網
上載者:User

標籤:

Eclipse 是一種支援多種技術的開源整合式開發環境 (IDE),但本文重點介紹 Java 支援,這也是 Android 應用程式的“母語”。Android 是 Google 發布的開源移動作業系統。Android 現已成為許多智能手機和平板裝置的作業系統,其中包括三星 Galaxy 系列手機和平板電腦、亞馬遜 Kindle Fire 平板電腦、Barnes and Noble Nook 平板電腦,以及大量製造商生產的許多其他裝置。PhoneGap 是一個開源應用程式平台,可讓您使用 HTML 和 JavaScript 建立本機安裝的行動裝置 App程式。

安裝 Eclipse

在 Android 上建立 PhoneGap 應用程式開發環境的首要步驟是下載並安裝 Eclipse IDE。

使用 PhoneGap 進行 Android 開發(可在 Windows、OS X 或 Linux 中完成。目前有許多不同的 Eclipse 安裝包。雖然 PhoneGap 能夠與其他程式包配置一同使用,但建議採用 Eclipse Classic 程式包,該程式包中已經包含 PhoneGap 應用程式開發入門及使用所需的各種工具。

  1. 訪問 Eclipse 下載頁面,針對您的作業系統下載 Eclipse Classic 程式包。Eclipse 下載將是一個包含開發環境的封存檔案。
  2. 將該封存檔案提取到您的本地硬碟,並記住其所在位置。
  3. 提取完成後,只需雙擊 Eclipse 應用程式即可啟動 Eclipse,無需執行任何其他安裝步驟。

安裝 Android 工具

下載並安裝 Eclipse 後,您需要配置自身環境以使用 Google Android 開發工具。此流程包含兩個步驟。首先,下載並安裝 Android SDK。然後,為 Eclipse 安裝 ADT 外掛程式。

下載並配置 Android SDK

在您的系統上配置 Android 工具的首要步驟是下載 Android SDK。

  1. 訪問 Android SDK 網站 ,針對您的作業系統下載相應的版本。
  2. 將下載的封存檔案提取到您的本地硬碟,並記住其所在位置。
為 Eclipse 配置 ADT 外掛程式

接下來,您需要為 Eclipse 安裝 ADT(Android 開發工具)外掛程式。ADT 外掛程式必須通過 Eclipse Install New Software 嚮導來進行安裝。

  1. 啟動 Eclipse。
  2. 按照 ADT 外掛程式的下載說明(可在 Android 開發人員 SDK 頁面 - Eclipse 擷取)執行操作。這些步驟將指導您完成整個 ADT 外掛程式的安裝過程。
  3. 重新啟動 Eclipse。

在安裝完 ADT 外掛程式並重新啟動 Eclipse 後,您需要將它配置為使用已下載至本地檔案系統的 Android SDK。

  1. 按照 開發人員 SDK 頁面 – 配置 Eclipse 上的說明,在 ADT 外掛程式中設定適當的 Android SDK 位置。

下載並安裝 PhoneGap

下一步是下載並安裝 PhoneGap。

  1. 訪問 PhoneGap 下載頁面,然後單擊橙色的下載連結以開始下載過程。
  2. 將封存檔案提取到本地檔案系統以備隨後使用。

您現已為在 Eclipse 內建立首個 Android PhoneGap 項目做好準備。

注意: 操作步驟針對 PhoneGap 1.5,但該流程須適用於所有版本的 PhoneGap,並且所有版本 PhoneGap 的操作均相同。

在 Eclipse 中建立項目

請按照以下步驟在 Eclipse 中建立新的 Android 項目:

  1. 選擇 New > Android Project(參見圖 1)。

圖 1. 建立新的 Android 項目。

建立全新的標準 Android 項目後,將更新該項目以使用 PhoneGap。

  1. 在 New Android Project 對話方塊中,鍵入項目名稱,然後選中 Create New Project In Workspace(參見圖 2)。
  2. 單擊 Next。

圖 2. New Android Project 對話方塊。

  1. 選擇 Android 2.2 作為構建目標,然後單擊 Next(參見圖 3)。

注意:選擇 Android 2.2 作為構建目標會將該編譯器配置為以 Android 2.2 SDK 為目標,這樣可確保您的 PhoneGap 應用程式在運行 Android 2.2 及更新版本的作業系統的裝置上運行。

圖 3. 選擇構建目標。

  1. 在 Application Info 螢幕上,鍵入您的主要 Android 應用程式的程式包名稱(參見圖 4)。這將是一個從邏輯上展示程式包結構的命名空間,例如 com.yourcompany.yourproject
  2. 單擊 Finish。

圖 4. 指定程式包名稱。

設定項目以使用 PhoneGap

此時,Eclipse 建立了一個空白的 Android 項目。但是,並未將它配置為使用 PhoneGap。接下來,您需要執行以下操作

  1. 在新 Android 項目內建立一個 assets/www 目錄和一個 libs 目錄。PhoneGap 應用程式介面的所有 HTML 和 JavaScript 均將駐留在 assets/www 檔案夾內(參見圖 5)。

圖 5. 新項目目錄。

  1. 要將 PhoneGap 的必要檔案複製到項目內,首先找出下載 PhoneGap 的目錄,然後導航至 lib/android 子目錄(參見圖 6)。

圖 6. PhoneGap lib/android 目錄。

  1. 將 cordova-1.5.0.js 複製到 Android 項目內的 assets/www 目錄。
  2. 將 cordova-1.5.0.jar 複製到 Android 項目內的 libs 目錄。
  3. 將 xml 目錄複寫到 Android 項目內的 res 目錄(參見圖 7)。

圖 7. 複製資源。

  1. 接下來,在 assets/www 檔案夾中建立一個名為 index.html 的檔案。此檔案將用作 PhoneGap 應用程式介面的主要進入點
  2. 在 index.html 中,添加以下 HTML 程式碼作為使用者介面開發的起點:

<!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> </head> <body> <h1>Hello PhoneGap</h1> </body> </html>

  1. 您需要將 cordova-1.5.0.jar 庫添加到該 Android 項目的構建路徑。按右鍵 cordova-1.5.0.jar,然後選擇 Build Path > Add To Build Path(參見圖 8)。

圖 8. 將 cordova-1.5.0.jar 添加至構建路徑。

更新 Activity 類

現在,您已經為更新 Android 項目以確保其開始使用 PhoneGap 做好準備。

  1. 開啟您的主應用程式活動檔案。此檔案的名稱與您的項目相同,並會在後面加上 "Activity" 一詞。它將位於您先前在此流程中指定的項目程式包的 src 檔案夾下。

對於我的項目(名為 HelloGap)而言,主 Android 活動檔案名稱為 HelloGapActivity.java,位於我在 New Android Project 對話方塊中指定的程式包 com.tricedesigns.hello 中。

  1. 在主 Activity 類中,為 org.apache.cordova.DroidGap添加以下匯入語句:

import org.apache.cordova.DroidGap;

  1. 將基類從 Activity 更改為DroidGap ;它位於類定義中 extends 一詞的後面:

public class HelloGapActivity extends DroidGap {

  1. 用從您此前建立的本地 assets/www/index.html 檔案載入 PhoneGap 介面的引用替換setContentView() 調用函數(參見圖 9)。

super.loadUrl("file:///android_asset/www/index.html");

注意:在 PhoneGap 項目中,您可以引用位於 URL 引用為 file:///android_asset 的 assets 目錄中的檔案,然後引用該檔案的路徑名稱。file:///android_asset URI 將會映射到 assets 目錄。

圖 9. 主 Activity 類更新。

設定項目中繼資料

現在,您已經將 Android 項目內的檔案配置為使用 PhoneGap。最後一步是設定項目中繼資料,以使 PhoneGap 運行。

  1. 首先,在您的項目根中開啟 AndroidManifest.xml 檔案。使用 Eclipse 文字編輯器,方法是按右鍵 AndroidManifest.xml 檔案,然後選擇 Open With > Text Editor(參見圖 10)。

圖 10. 開啟 AndroidManifest.xml。

  1. 在 AndroidManifest.xml 中,添加以下supports-screen XML 節點作為 manifest 根節點的子節點

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />

supports-screen 節點可識別您應用程式支援的螢幕大小。您可以通過更改此條目的內容來調整螢幕和外觀設定支援。要閱讀有關<supports-screens>,的更多資訊,請訪問 Android 開發人員主題 – 支援螢幕元素。

接下來,您需要為 PhoneGap 應用程式配置許可權。

  1. 複製以下<uses-permission> XML 節點,並粘貼它們作為 AndroidManifest.xml 檔案<manifest> 根節點的子節點:

<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />

<uses-permission>XML 值可識別您要為應用程式啟用的功能。上述程式碼可啟用 PhoneGap 所有功能正常運行所需的全部許可權。構建完應用程式後,您可能希望刪除不會實際用到的所有許可權;這將會刪除應用程式安裝過程中出現的安全警告。要閱讀有關 Android 許可權和 <uses-permission> 元素的更多資訊,請訪問 Android 開發人員主題 – 使用者權限元素。

應用程式許可權配置完畢後,您需要修改現有的 <activity> 代碼。

  1. 找到<activity>節點,它是 <application>XML 節點的子節點。將下面的屬性添加到該<activity> 節點:

configChanges="orientation|keyboardHidden"

  1. 接下來,您需要再為 org.apache.cordova.DroidGap 類建立一個 <activity> 節點。添加下面的<activity> 節點作為現有 <activity> XML 節點的同級節點。

<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>

此時,已將您的項目配置為作為 Android PhoneGap 項目運行。如果您遇到任何問題,請根據 Android PhoneGap 入門網站提供的樣本驗證您的配置。

運行應用程式

要在 Android 模擬器中啟動您的 PhoneGap 應用程式,請按右鍵項目根目錄,然後選擇 Run As > Android Application(參見圖 11)。

圖 11. 啟動 Android 應用程式。

如果您尚未設定任何 Android 虛擬裝置,那麼系統將提示您配置一台 Android 虛擬裝置。要瞭解有關配置 Android 模擬器虛擬設備的更多資訊,請訪問 Android 開發人員裝置指南。

Eclipse 將自動啟動 Android 模擬器執行個體(如果尚未啟動並執行話),為該模擬器部署您的應用程式,然後啟動該應用程式(參見圖 12)。

圖 12. Android 模擬器中的應用程式。

當在 Android 模擬器中運行應用程式後,您可能會希望在物理裝置上對其進行測試。強烈建議您始終先在物理裝置上測試您的應用程式,然後再將該應用程式部署到生產環境中。物理裝置的計算能力和外觀設定往往與模擬器不同,裝置測試能夠揭露模擬器環境中可能無法檢測到的問題。

請按照以下步驟在物理 Android 裝置上啟動您的應用程式:

  1. 確保該裝置已通過 USB 串連到您的電腦。
  2. 選擇 Run > Run Configurations(參見圖 13)。

圖 13. 更新執行配置。

  1. 在 Run Configurations 對話方塊左側的 Android Application 下選擇您的應用程式。
  2. 單擊 Target 選項卡,然後選擇 Manual 作為 Deployment Target Selection Mode。
  3. 當您準備好啟動應用程式後,單擊 Run(參見圖 14)。

圖 14. 準備在裝置上運行應用程式。

在 Android Device Chooser 對話方塊中,您可以選擇模擬器,也可以選擇串連的 Android 裝置。串連的所有 Android 裝置均將顯示在此列表中。

圖 15. 選擇 Android 裝置。

  1. 選擇您要使用的裝置(參見圖 15),然後單擊 OK。

此時將會在該裝置上安裝並啟動您的 PhoneGap 應用程式。

下一步閱讀方向

如果您已經堅持學習完本部分,則可以開始使用 PhoneGap 構建真正的 Android 應用程式。接下來你可以閱讀使用面向 iOS 的本機外掛程式擴充 PhoneGap 。

請記住,需使用 HTML、CSS 和 JavaScript 為使用者介面構建 PhoneGap 應用程式。這樣,您就可以使用傳統的 Web 開發技術輕鬆建立外觀卓越的應用程式。要瞭解有關 PhoneGap 的更多資訊,請查閱 PhoneGap wiki,加入PhoneGap Google Group 或深入學習 PhoneGap 文檔。

使用 Eclipse PhoneGap 構建 Android 應用程式入門

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.