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。
?
搭建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)
?
創(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
?
<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目錄下創(chuàng)建一個(gè)新的HTML頁面命名為index.html，并拷貝清單3的內(nèi)容到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”應(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”。
?
運(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)和消除。
?
部署和運(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? Android Application就可以運(yùn)行程序。
用同樣的方法將WebTest項(xiàng)目導(dǎo)入Eclipse工作空間中，右鍵點(diǎn)擊項(xiàng)目選擇RunAs?RunOnServer。
小結(jié)： Mobile 應(yīng)用基于 PhoneGap框架 搭建教程的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對(duì)你有所幫助！
?
?
?
描述 名字 大小 下載方法| 示例代碼 | SampleAndroidProject.zip | 340KB | HTTP |
| WebTest 項(xiàng)目代碼 | WebTest.zip | 6KB | HTTP |
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
