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

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

PhoneGap簡(jiǎn)介

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

PhoneGap特性

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

圖1.PhoneGapAPI對(duì)各手機(jī)平臺(tái)的支持

PhoneGapAPI簡(jiǎn)介

Accelerometer

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

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

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

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

Camera

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

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

Compass

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

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

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

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

Contacts

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

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

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

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

Device

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

File

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

GeoLocation

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

Media

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

NetWork

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

Notification

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

notification.alert:彈出警告或者對(duì)話框。

notification.confirm：彈出確認(rèn)框。

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

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

Storage

Store提供了訪問移動(dòng)設(shè)備的存儲(chǔ)設(shè)備的API。

#p#

搭建PhoneGap開發(fā)化境

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

下載并安裝Eclipse3.4+。

下載并安裝Android SDK。

下載并安裝ADTPluginforEclipse。

下載并解壓PhoneGap。

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

圖2.在Eclipse里配置AndroidSDK路徑

圖3.AndroidSDKandAVDManager菜單

圖4.在Eclipse里配置AVD

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

#p#

創(chuàng)建一個(gè)簡(jiǎn)單的PhoneGap應(yīng)用

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

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

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

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

修改項(xiàng)目文件實(shí)現(xiàn)簡(jiǎ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)簽的一個(gè)屬性。

清單2.AndroidManifest.xml

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

index.html頁面

在/assets/www目錄下創(chuàng)建一個(gè)新的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)為運(yùn)行著一個(gè)contextroot為WebTest的Web應(yīng)用的主機(jī)地址（IP或者HostName），WebTest項(xiàng)目可從本文檔提供的鏈接中下載。

測(cè)試項(xiàng)目

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

#p#

運(yùn)行結(jié)果展示

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

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

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

圖7.示例運(yùn)行結(jié)果（對(duì)話框）

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

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

圖9.顯示IBM主頁畫面

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

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

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

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

#p#

部署和運(yùn)行示例代碼

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

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

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

工程導(dǎo)入Eclipse后會(huì)自動(dòng)編譯，右鍵點(diǎn)擊項(xiàng)目選擇RunAsAndroidApplication就可以運(yùn)行程序。

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

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