Mobile 應用基于 PhoneGap框架 搭建教程是本文要介紹的內容，主要是來學習 PhoneGap框架 的應用，隨著Google的 Android 手機和蘋果的 iPhone 手機成為手機市場的主流，越來越多的開發者加入到移動應用開發的大軍中，但是基于 Java 的 Android 應用和基于C語言的 iPhone應用 讓開發者開發應用的時候甚為煩惱，同樣的應用必須用不同的語言開發兩次才能支持不同的手機平臺。
為了進一步簡化移動應用的開發，Nitobi公司推出了一套開源的移動應用解決方案 PhoneGap 。本文主要介紹PhoneGap的基礎知識，并通過一個示例介紹 PhoneGap 開發測試環境的搭建以及PhoneGap項目的開發和部署，并對PhoneGap提供的主要API做簡單介紹.
PhoneGap簡介
PhoneGap是一款基于HTML5的開源的手機應用開發框架，它允許用戶僅僅通過Web（HTML、JavaScript）技術就可以訪問移動設備的本地應用、API以及應用程序庫等。PhoneGap提供了一系列豐富的API供開發者調用，這些API抽象和簡化了移動設備本身提供的復雜的API，使開發新的手機應用和調用已有的手機功能更簡單方便。另外，PhoneGap真正實現了writtenonce,runeverywhere,并且它采用了W3C標準，能和jQueryMobile結合在一起使用。
PhoneGap特性
目前，PhoneGap已實現對iPhone/iPad、Android、Symbian、Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對其支持的詳細說明如圖1所示：
圖1.PhoneGapAPI對各手機平臺的支持
PhoneGapAPI簡介
Accelerometer
Accelerometer是一個設備移動感應器，它能夠檢測到設備相對于原來位置的移動，并用三維坐標x，y，z表示。該API提供三個方法：
accelerometer.getCurrentAcceleration：得到用x,y,z值表示的當前設備的移動加速度。
accelerometer.watchAcceleration：以特定的時間間隔得到用x,y,z值表示的當前設備的移動加速度。
accelerometer.clearWatch：取消對設備移動加速度的監控。
Camera
Camera提供了訪問和操作移動設備的默認攝像頭的API，包括用攝像頭動態攝取圖片或從移動設備的相冊中獲取圖片。
camera.getPicture():該方法通過配置不同的參數實現動態用攝像頭獲取圖片或從已有的相冊中獲取圖片，返回參數也可以根據設置不同的參數返回圖片的二進制數據或者圖片的路徑。
Compass
Compass提供了獲取移動設備指向的API。
compass.getCurrentHeading：獲取當前移動設備的指向。
compass.watchHeading：以特定的時間間隔獲取當前設備的指向。
compass.clearWatch：取消對當前設備指向的監控。
Contacts
Contacts提供了訪問和操作移動設備通訊錄數據庫的API，包括獲取聯系人列表（支持過濾條件），增加，刪除，編輯通訊錄聯系人等。
contacts.create：創建一個新的聯系人。
contacts.find：查找聯系人。
Contacts模塊包括幾個重要的對象：Contact，ContactName，ContactField，ContactAddress，ContactOrganization，ContactFindOptions，ContactError，通過這些對象和create、init方法共同實現對通訊錄的復雜操作，詳細的介紹可以參考PhoneGap的官方文檔。
Device
Device提供了訪問當前移動設備參數的API，包括設備名、設備系統版本、設備平臺等。
File
File提供了訪問和操作移動設備文件系統的API，其中FileReader和FileWriter提供了對設備文件的讀寫API。
GeoLocation
GeoLocation提供了訪問移動設備的GPS感應器的API。
Media
Media提供了訪問和操作移動設備語音文件的API，包括播放、停止、錄音等。
NetWork
Network提供了訪問移動設備移動網絡和無線網絡設置的API。
Notification
Notification提供了一組API來模擬移動設備的一些可視（對話框）、可聽（提示音）、可感覺（震動）的功能。
notification.alert:彈出警告或者對話框。
notification.confirm：彈出確認框。
notification.beep：播放設備的提示音。
notification.vibrate：使設備震動一段時間。
Storage
Store提供了訪問移動設備的存儲設備的API。
?
搭建PhoneGap開發化境
PhoneGap 支持開發適用于 iPhone 、 Android 、Palm等不同平臺的應用，對不同的平臺開發環境也有所不同，本文以 Android 為例搭建開發環境和創建應用。在搭建環境之前，我們需要先下載一些必須的工具和SDK，所有的工具都可以免費下載：
下載并安裝Eclipse3.4+。
下載并安裝 Android SDK。
下載并安裝ADTPluginforEclipse。
下載并解壓 PhoneGap 。
安裝好Eclipse、AndroidSDK和ADT插件之后，還需要做一些簡單的配置才可以創建項目。圖2顯示了如何在Eclipse里配置AndroidSDK的路徑，圖3和圖4顯示了如何在Eclipse里配置AVD（AndroidVirtualDevice）。
圖2.在Eclipse里配置AndroidSDK路徑
圖3.AndroidSDKandAVDManager菜單
圖4.在Eclipse里配置AVD
如果需要使用 Android 手機測試應用，還需要安裝手機對應型號的驅動器，把手機和開發機器用USB線連接，并且正確設置手機的開發調試功能。(Settings>Applications>Development)
?
創建一個簡單的PhoneGap應用
創建一個新 Android 工程，如圖5所示：
圖5.創建新 Android 工程
?
?
完善項目結構
在項目根目錄下創建/libs和/assets/www目錄，并從解壓后的 PhoneGap 目錄中拷貝phonegap.js(可能帶有版本信息)到/assets/www目錄下，拷貝phonegap.jar（可能帶有版本信息）到libs目錄。修改項目的JavaBuildPath信息，把libs下的jar文件包含在編譯路徑中。
修改項目文件實現簡單的獲取設備聯系人列表功能
com.phonegap.App.java
更改App.java文件為清單1的內容：
清單1.App.java類
-
packagecom.phonegap.sample; ?
-
importandroid.app.Activity; ?
-
importandroid.os.Bundle; ?
-
importcom.phonegap.*; ?
-
publicclassAppextendsDroidGap{ ?
-
/**Calledwhentheactivityisfirstcreated.*/ ?
-
@Override ?
-
publicvoidonCreate(BundlesavedInstanceState){ ?
-
super.onCreate(savedInstanceState); ?
-
//loadtheindex.htmlpagewhenappisloaded. ?
-
super.loadUrl("file:///android_asset/www/index.html"); ?
-
} ?
-
}?
AndroidManifest.xml
把清單2的內容拷貝到AndroidManifest.xml文件的manifest標簽內,并拷貝android:configChanges="orientation|keyboardHidden到activity標簽內做為activity標簽的一個屬性。
清單2.AndroidManifest.xml
?
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<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" />
?
index.html頁面
在/assets/www目錄下創建一個新的HTML頁面命名為index.html，并拷貝清單3的內容到index.html文件。
清單3：Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" >
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen"
title="no title" charset="utf-8" >
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"
></script>
<script type="text/javascript" charset="utf-8" >
//show device information
var deviceInfo = function (){
document.getElementById("platform").innerHTML = device.platform;
document.getElementById("version").innerHTML = device.version;
document.getElementById("uuid").innerHTML = device.uuid;
document.getElementById("name").innerHTML = device.name;
document.getElementById("width").innerHTML = screen.width;
document.getElementById("height").innerHTML = screen.height;
document.getElementById("colorDepth").innerHTML = screen.colorDepth;
};
//listen the device ready event and get the device information.
function init(){
document.addEventListener("deviceready", deviceInfo, true );
}
// get device contacts list by the contacts API.
function get_contacts()
{
var obj = new ContactFindOptions();
obj.filter="";
obj.multiple=true ;
obj.limit=5;
navigator.service.contacts.find(["name","displayName", "phoneNumbers",
"emails"],contacts_success, fail, obj);
}
function fail(fail)
{
alert(fail);
}
function contacts_success(contacts)
{
var result = "";
for (var i=0;i<contacts.length;i++)
{
result += "Name: " + contacts[i].name.givenName + ", displayName: "+
contacts[i].displayName + ",Email:" + contacts[i].emails[0].value;
result += "<br>";
}
document.getElementById("conlist").innerHTML = result;
alert(contacts.length + ' contacts returned.' );
}
</script>
</head>
<body onload="init();" id="stage" class="theme" >
<h1>Welcome to PhoneGap!</h1>
<h2>this file is located at assets/index.html</h2>
<div id="info" >
<h4>Platform: <span id="platform" > </span>,
Version: <span id="version" > </span></h4>
<h4>UUID: <span id="uuid" > </span>,
Name: <span id="name" > </span></h4>
<h4>Width: <span id="width" > </span>,
Height: <span id="height" >
</span>, Color Depth: <span id="colorDepth" ></span></h4>
</div>
<a href="#" class="btn large" onclick="get_contacts();">
Get phone's contacts</a>
<a class="btn large"
>Access IBM Home Page</a>
<form action="http://x.x.x.x:8080/WebTest/index.jsp" method="get" >
Username: <input type="text" name="name" />
<input type="submit" />
</form>
<div id="conlist" >
</div>
</body>
</html>
?
?
?
?
?
注意：中的“x.x.x.x”應為運行著一個contextroot為WebTest的Web應用的主機地址（IP或者HostName），WebTest項目可從本文檔提供的鏈接中下載。
測試項目
在項目上點擊右鍵，在出現的菜單中選擇“RunAs”，然后選擇“AndroidApplication”，Eclipse會彈出窗口讓你選擇合適的AVD，如果還沒有配置，請參照“搭建PhoneGap開發環境”小節介紹的方法創建一個AVD。如果選擇用 Android 手機測試程序，請確認驅動已經裝好，USB連接正常，并且正確設置手機的開發調試選項，然后選擇“RunAs--AndroidApplication”。
?
運行結果展示
圖6顯示了該實例在AVD上的運行結果。
圖6.示例運行結果
點擊“Getphone’scontacts”會出現圖7和圖8所示的結果:
圖7.示例運行結果（對話框）
圖8.示例運行結果（聯系人信息）
點擊“AccessIBMHomePage”將會出現圖9所示的畫面：
圖9.顯示IBM主頁畫面
在圖6的輸入框中輸入“Rendy”，然后點擊“Submit”按鈕，會出現圖10所示的頁面：
圖10.提交用戶名后顯示畫面
從上面的示例可以看到，開發人員只需掌握HTML和JavaScript就可以開發基于 PhoneGap 的可以和移動設備的本地應用交互的手機Web應用，極大的簡化了移動應用的開發周期。
本文對PhoneGap開源框架做了簡單介紹，并通過一個示例介紹了如何開發基于 PhoneGap框架 的可以和移動設備的本地應用交互的MobileWeb應用。PhoneGap以它開發簡單、兼容性好、支持標準化等無與倫比的優勢正在不斷的占據移動應用開發的市場，雖然它也存在運行速度慢、UI反應延時等問題，但是隨著技術的進步，這些不足會不斷的改進和消除。
?
部署和運行示例代碼
下載代碼到本地計算機，打開Eclipse，點擊File->import->ExistingProjectsintoWorkspace如圖7所示，選擇archivefile并指定到代碼所在的本地路徑（圖11），點擊Finish按鈕。
圖11.導入工程到Eclipse
圖12.導入Archive文件
工程導入Eclipse后會自動編譯，右鍵點擊項目選擇RunAs? Android Application就可以運行程序。
用同樣的方法將WebTest項目導入Eclipse工作空間中，右鍵點擊項目選擇RunAs?RunOnServer。
小結： Mobile 應用基于 PhoneGap框架 搭建教程的內容介紹完了，希望通過本文的學習能對你有所幫助！
?
?
?
描述 名字 大小 下載方法| 示例代碼 | SampleAndroidProject.zip | 340KB | HTTP |
| WebTest 項目代碼 | WebTest.zip | 6KB | HTTP |
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
