『转』搭建基于 PhoneGap 框架的 Mobile 应用

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" > &nbsp;</span>,
       Version: <span id="version" >&nbsp;</span></h4> 
       <h4>UUID: <span id="uuid" > &nbsp;</span>, 
       Name: <span id="name" >&nbsp;</span></h4> 
       <h4>Width: <span id="width" > &nbsp;</span>,
       Height: <span id="height" >&nbsp; 
       </span>, Color Depth: <span id="colorDepth" ></span></h4> 
    </div>    
   <a href="#" class="btn large" onclick="get_contacts();">
   Get phone's contacts</a> 
    <a href="http://w3.ibm.com/w3odw/spg/index_default.html" 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AndroidApplication就可以运行程序。

用同样的方法将WebTest项目导入Eclipse工作空间中，右键点击项目选择RunAsRunOnServer。

小结：Mobile应用基于PhoneGap框架搭建教程的内容介绍完了，希望通过本文的学习能对你有所帮助！

 

 

下载

 

描述 名字 大小 下载方法

示例代码	SampleAndroidProject.zip	340KB	HTTP
WebTest 项目代码	WebTest.zip	6KB	HTTP

关于下载方法的信息