Mobile應(yīng)用基于PhoneGap框架搭建教程是本文要介紹的內(nèi)容，主要是來學(xué)習(xí)PhoneGap框架的應(yīng)用，隨著Google的Android手機和蘋果的iPhone手機成為手機市場的主流，越來越多的開發(fā)者加入到移動應(yīng)用開發(fā)的大軍中，但是基于Java的Android應(yīng)用和基于C語言的iPhone應(yīng)用讓開發(fā)者開發(fā)應(yīng)用的時候甚為煩惱，同樣的應(yīng)用必須用不同的語言開發(fā)兩次才能支持不同的手機平臺。

為了進一步簡化移動應(yīng)用的開發(fā)，Nitobi公司推出了一套開源的移動應(yīng)用解決方案PhoneGap。本文主要介紹PhoneGap的基礎(chǔ)知識，并通過一個示例介紹PhoneGap開發(fā)測試環(huán)境的搭建以及PhoneGap項目的開發(fā)和部署，并對PhoneGap提供的主要API做簡單介紹.

PhoneGap簡介

PhoneGap是一款基于HTML5的開源的手機應(yīng)用開發(fā)框架，它允許用戶僅僅通過Web（HTML、JavaScript）技術(shù)就可以訪問移動設(shè)備的本地應(yīng)用、API以及應(yīng)用程序庫等。PhoneGap提供了一系列豐富的API供開發(fā)者調(diào)用，這些API抽象和簡化了移動設(shè)備本身提供的復(fù)雜的API，使開發(fā)新的手機應(yīng)用和調(diào)用已有的手機功能更簡單方便。另外，PhoneGap真正實現(xiàn)了writtenonce,runeverywhere,并且它采用了W3C標(biāo)準(zhǔn)，能和jQueryMobile結(jié)合在一起使用。

PhoneGap特性

目前，PhoneGap已實現(xiàn)對iPhone/iPad、Android、Symbian、Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對其支持的詳細說明如圖1所示：

圖1.PhoneGapAPI對各手機平臺的支持

PhoneGapAPI簡介

Accelerometer

Accelerometer是一個設(shè)備移動感應(yīng)器，它能夠檢測到設(shè)備相對于原來位置的移動，并用三維坐標(biāo)x，y，z表示。該API提供三個方法：

accelerometer.getCurrentAcceleration：得到用x,y,z值表示的當(dāng)前設(shè)備的移動加速度。

accelerometer.watchAcceleration：以特定的時間間隔得到用x,y,z值表示的當(dāng)前設(shè)備的移動加速度。

accelerometer.clearWatch：取消對設(shè)備移動加速度的監(jiān)控。

Camera

Camera提供了訪問和操作移動設(shè)備的默認攝像頭的API，包括用攝像頭動態(tài)攝取圖片或從移動設(shè)備的相冊中獲取圖片。

camera.getPicture():該方法通過配置不同的參數(shù)實現(xiàn)動態(tài)用攝像頭獲取圖片或從已有的相冊中獲取圖片，返回參數(shù)也可以根據(jù)設(shè)置不同的參數(shù)返回圖片的二進制數(shù)據(jù)或者圖片的路徑。

Compass

Compass提供了獲取移動設(shè)備指向的API。

compass.getCurrentHeading：獲取當(dāng)前移動設(shè)備的指向。

compass.watchHeading：以特定的時間間隔獲取當(dāng)前設(shè)備的指向。

compass.clearWatch：取消對當(dāng)前設(shè)備指向的監(jiān)控。

Contacts

Contacts提供了訪問和操作移動設(shè)備通訊錄數(shù)據(jù)庫的API，包括獲取聯(lián)系人列表（支持過濾條件），增加，刪除，編輯通訊錄聯(lián)系人等。

contacts.create：創(chuàng)建一個新的聯(lián)系人。

contacts.find：查找聯(lián)系人。

Contacts模塊包括幾個重要的對象：Contact，ContactName，ContactField，ContactAddress，ContactOrganization，ContactFindOptions，ContactError，通過這些對象和create、init方法共同實現(xiàn)對通訊錄的復(fù)雜操作，詳細的介紹可以參考PhoneGap的官方文檔。

Device

Device提供了訪問當(dāng)前移動設(shè)備參數(shù)的API，包括設(shè)備名、設(shè)備系統(tǒng)版本、設(shè)備平臺等。

File

File提供了訪問和操作移動設(shè)備文件系統(tǒng)的API，其中FileReader和FileWriter提供了對設(shè)備文件的讀寫API。

GeoLocation

GeoLocation提供了訪問移動設(shè)備的GPS感應(yīng)器的API。

Media

Media提供了訪問和操作移動設(shè)備語音文件的API，包括播放、停止、錄音等。

NetWork

Network提供了訪問移動設(shè)備移動網(wǎng)絡(luò)和無線網(wǎng)絡(luò)設(shè)置的API。

Notification

Notification提供了一組API來模擬移動設(shè)備的一些可視（對話框）、可聽（提示音）、可感覺（震動）的功能。

notification.alert:彈出警告或者對話框。

notification.confirm：彈出確認框。

notification.beep：播放設(shè)備的提示音。

notification.vibrate：使設(shè)備震動一段時間。

Storage

Store提供了訪問移動設(shè)備的存儲設(shè)備的API。

#p#

搭建PhoneGap開發(fā)化境

PhoneGap支持開發(fā)適用于iPhone、Android、Palm等不同平臺的應(yīng)用，對不同的平臺開發(fā)環(huán)境也有所不同，本文以Android為例搭建開發(fā)環(huán)境和創(chuàng)建應(yīng)用。在搭建環(huán)境之前，我們需要先下載一些必須的工具和SDK，所有的工具都可以免費下載：

下載并安裝Eclipse3.4+。

下載并安裝Android SDK。

下載并安裝ADTPluginforEclipse。

下載并解壓PhoneGap。

安裝好Eclipse、AndroidSDK和ADT插件之后，還需要做一些簡單的配置才可以創(chuàng)建項目。圖2顯示了如何在Eclipse里配置AndroidSDK的路徑，圖3和圖4顯示了如何在Eclipse里配置AVD（AndroidVirtualDevice）。

圖2.在Eclipse里配置AndroidSDK路徑

圖3.AndroidSDKandAVDManager菜單

圖4.在Eclipse里配置AVD

如果需要使用Android手機測試應(yīng)用，還需要安裝手機對應(yīng)型號的驅(qū)動器，把手機和開發(fā)機器用USB線連接，并且正確設(shè)置手機的開發(fā)調(diào)試功能。(Settings>Applications>Development)

#p#

創(chuàng)建一個簡單的PhoneGap應(yīng)用

創(chuàng)建一個新Android工程，如圖5所示：

圖5.創(chuàng)建新Android工程

完善項目結(jié)構(gòu)

在項目根目錄下創(chuàng)建/libs和/assets/www目錄，并從解壓后的PhoneGap目錄中拷貝phonegap.js(可能帶有版本信息)到/assets/www目錄下，拷貝phonegap.jar（可能帶有版本信息）到libs目錄。修改項目的JavaBuildPath信息，把libs下的jar文件包含在編譯路徑中。

修改項目文件實現(xiàn)簡單的獲取設(shè)備聯(lián)系人列表功能

com.phonegap.App.java

更改App.java文件為清單1的內(nèi)容：

清單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的內(nèi)容拷貝到AndroidManifest.xml文件的manifest標(biāo)簽內(nèi),并拷貝android:configChanges="orientation|keyboardHidden到activity標(biāo)簽內(nèi)做為activity標(biāo)簽的一個屬性。

清單2.AndroidManifest.xml

android:largeScreens="true" 
android:normalScreens="true" 
android:smallScreens="true" 
android:resizeable="true" 
android:anyDensity="true" 
 /> 

index.html頁面

在/assets/www目錄下創(chuàng)建一個新的HTML頁面命名為index.html，并拷貝清單3的內(nèi)容到index.html文件。

清單3：Index.html

title="notitle"charset="utf-8"> 
WelcometoPhoneGap!  
thisfileislocatedatassets/index.html  
Platform:  
Version:  
UUID:,  
Name:  
Width:,  
Height:  
,ColorDepth:  
Getphone'scontacts  
>AccessIBMHomePage 

Username:

注意：中的“x.x.x.x”應(yīng)為運行著一個contextroot為WebTest的Web應(yīng)用的主機地址（IP或者HostName），WebTest項目可從本文檔提供的鏈接中下載。

測試項目

在項目上點擊右鍵，在出現(xiàn)的菜單中選擇“RunAs”，然后選擇“AndroidApplication”，Eclipse會彈出窗口讓你選擇合適的AVD，如果還沒有配置，請參照“搭建PhoneGap開發(fā)環(huán)境”小節(jié)介紹的方法創(chuàng)建一個AVD。如果選擇用Android手機測試程序，請確認驅(qū)動已經(jīng)裝好，USB連接正常，并且正確設(shè)置手機的開發(fā)調(diào)試選項，然后選擇“RunAs--AndroidApplication”。

#p#

運行結(jié)果展示

圖6顯示了該實例在AVD上的運行結(jié)果。

圖6.示例運行結(jié)果

點擊“Getphone’scontacts”會出現(xiàn)圖7和圖8所示的結(jié)果:

圖7.示例運行結(jié)果（對話框）

圖8.示例運行結(jié)果（聯(lián)系人信息）

點擊“AccessIBMHomePage”將會出現(xiàn)圖9所示的畫面：

圖9.顯示IBM主頁畫面

在圖6的輸入框中輸入“Rendy”，然后點擊“Submit”按鈕，會出現(xiàn)圖10所示的頁面：

圖10.提交用戶名后顯示畫面

從上面的示例可以看到，開發(fā)人員只需掌握HTML和JavaScript就可以開發(fā)基于PhoneGap的可以和移動設(shè)備的本地應(yīng)用交互的手機Web應(yīng)用，極大的簡化了移動應(yīng)用的開發(fā)周期。

本文對PhoneGap開源框架做了簡單介紹，并通過一個示例介紹了如何開發(fā)基于PhoneGap框架的可以和移動設(shè)備的本地應(yīng)用交互的MobileWeb應(yīng)用。PhoneGap以它開發(fā)簡單、兼容性好、支持標(biāo)準(zhǔn)化等無與倫比的優(yōu)勢正在不斷的占據(jù)移動應(yīng)用開發(fā)的市場，雖然它也存在運行速度慢、UI反應(yīng)延時等問題，但是隨著技術(shù)的進步，這些不足會不斷的改進和消除。

#p#

部署和運行示例代碼

下載代碼到本地計算機，打開Eclipse，點擊File->import->ExistingProjectsintoWorkspace如圖7所示，選擇archivefile并指定到代碼所在的本地路徑（圖11），點擊Finish按鈕。

圖11.導(dǎo)入工程到Eclipse

圖12.導(dǎo)入Archive文件

工程導(dǎo)入Eclipse后會自動編譯，右鍵點擊項目選擇RunAsAndroidApplication就可以運行程序。

用同樣的方法將WebTest項目導(dǎo)入Eclipse工作空間中，右鍵點擊項目選擇RunAsRunOnServer。

小結(jié)：Mobile應(yīng)用基于PhoneGap框架搭建教程的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！