搭建基于 PhoneGap 框架的 Mobile 应用-移动端开发-火龙果软件工程

搭建基于 PhoneGap 框架的 Mobile 应用

作者：任冬艳, 翟峰,李雪锋来源：IBM 发布于 2015-6-16

2066 次浏览

目前，随着 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 真正实现了 written once, run everywhere, 并且它采用了 W3C 标准，能和 jQuery Mobile 结合在一起使用。

PhoneGap 特性

目前，PhoneGap 已实现对 iPhone/iPad、Android、Symbian、Palm、黑莓各版本绝大部分功能的支持, 其中官方文档中对其支持的详细说明如图 1 所示：

图 1.PhoneGap API对各手机平台的支持

PhoneGap API 简介

1.Accelerometer

Accelerometer 是一个设备移动感应器，它能够检测到设备相对于原来位置的移动，并用三维坐标 x，y，z 表示。该 API 提供三个方法：

accelerometer.getCurrentAcceleration：得到用 x,y,z 值表示的当前设备的移动加速度。

accelerometer.watchAcceleration：以特定的时间间隔得到用 x,y,z 值表示的当前设备的移动加速度。

accelerometer.clearWatch：取消对设备移动加速度的监控。

2.Camera

Camera 提供了访问和操作移动设备的默认摄像头的 API，包括用摄像头动态摄取图片或从移动设备的相册中获取图片。

camera.getPicture(): 该方法通过配置不同的参数实现动态用摄像头获取图片或从已有的相册中获取图片，返回参数也可以根据设置不同的参数返回图片的二进制数据或者图片的路径。

3.Compass

Compass 提供了获取移动设备指向的 API。

compass.getCurrentHeading：获取当前移动设备的指向。

compass.watchHeading：以特定的时间间隔获取当前设备的指向。

compass.clearWatch：取消对当前设备指向的监控。

4.Contacts

Contacts 提供了访问和操作移动设备通讯录数据库的 API，包括获取联系人列表（支持过滤条件），增加，删除，编辑通讯录联系人等。

contacts.create：创建一个新的联系人。

contacts.find：查找联系人。

Contacts 模块包括几个重要的对象：Contact，ContactName，ContactField，ContactAddress，ContactOrganization，ContactFindOptions，ContactError，通过这些对象和 create、init 方法共同实现对通讯录的复杂操作，详细的介绍可以参考 PhoneGap 的官方文档。

5.Device

Device 提供了访问当前移动设备参数的 API，包括设备名、设备系统版本、设备平台等。

6.File

File 提供了访问和操作移动设备文件系统的 API，其中 FileReader 和 FileWriter 提供了对设备文件的读写 API。

7.GeoLocation

GeoLocation 提供了访问移动设备的 GPS 感应器的 API。

8.Media

Media 提供了访问和操作移动设备语音文件的 API，包括播放、停止、录音等。

9.NetWork

Network 提供了访问移动设备移动网络和无线网络设置的 API。

10.Notification

Notification 提供了一组 API 来模拟移动设备的一些可视（对话框）、可听（提示音）、可感觉（震动）的功能。

notification.alert: 弹出警告或者对话框。

notification.confirm：弹出确认框。

notification.beep：播放设备的提示音。

notification.vibrate：使设备震动一段时间。

11.Storage

Store 提供了访问移动设备的存储设备的 API。

搭建 PhoneGap 开发化境

PhoneGap 支持开发适用于 iPhone、Android、Palm 等不同平台的应用，对不同的平台开发环境也有所不同，本文以 Android 为例搭建开发环境和创建应用。在搭建环境之前，我们需要先下载一些必须的工具和 SDK，所有的工具都可以免费下载：

下载并安装 Eclipse3.4+。

下载并安装 Android SDK。

下载并安装 ADT Plugin for Eclipse。

下载并解压 PhoneGap。

安装好 Eclipse、Android SDK 和 ADT 插件之后，还需要做一些简单的配置才可以创建项目。图 2 显示了如何在 Eclipse 里配置 Android SDK 的路径，图 3 和图 4 显示了如何在 Eclipse 里配置 AVD（Android Virtual Device）。

图 2：在 Eclipse 里配置 Android SDK 路径

图 3：Android SDK and AVD Manager 菜单

图 4：在 Eclipse 里配置 AVD

如果需要使用 Android 手机测试应用，还需要安装手机对应型号的驱动器，把手机和开发机器用 USB 线连接，并且正确设置手机的开发调试功能。(Settings > Applications > Development)

创建一个简单的 PhoneGap 应用

创建一个新 Android 工程，如图 5 所示：

图 5：创建新 Android 工程

完善项目结构

在项目根目录下创建 /libs 和 /assets/www 目录，并从解压后的 PhoneGap 目录中拷贝 phonegap.js( 可能带有版本信息) 到 /assets/www 目录下，拷贝 phonegap.jar（可能带有版本信息）到 libs 目录。修改项目的 Java Build Path 信息，把 libs 下的 jar 文件包含在编译路径中。

修改项目文件实现简单的获取设备联系人列表功能

com.phonegap.App.java

更改 App.java 文件为清单 1 的内容：

清单 1.App.java 类

package com.phonegap.sample; 

 import android.app.Activity; 
 import android.os.Bundle; 
 import com.phonegap.*; 

 public class App extends DroidGap { 
    /** Called when the activity is first created. */ 
    @Override 
  public void onCreate(Bundle savedInstanceState) { 
   super.onCreate(savedInstanceState); 
 //load the index .html page when app is loaded. 
    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);
}

</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 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>

注意：<formaction="http://x.x.x.x:8080/WebTest/index.jsp"method="get">中的“x.x.x.x”应为运行着一个 context root 为 WebTest 的 Web 应用的主机地址（IP 或者 HostName），WebTest 项目可从本文档提供的链接中下载。

测试项目

在项目上点击右键，在出现的菜单中选择“Run As”，然后选择“Android Application”，Eclipse 会弹出窗口让你选择合适的 AVD，如果还没有配置，请参照“搭建 PhoneGap 开发环境”小节介绍的方法创建一个 AVD。如果选择用 Android 手机测试程序，请确认驱动已经装好，USB 连接正常，并且正确设置手机的开发调试选项，然后选择“Run As--Android Application”。

运行结果展示

图 6 显示了该实例在 AVD 上的运行结果。

图 6：示例运行结果

点击“Get phone ’ s contacts” 会出现图 7 和图 8 所示的结果 :

图 7：示例运行结果（对话框）

图 8：示例运行结果（联系人信息）

点击“Access IBM Home Page”将会出现图 9 所示的画面：

图 9：显示 IBM 主页画面

在图 6 的输入框中输入“Rendy”，然后点击“Submit”按钮，会出现图 10 所示的页面：

图 10：提交用户名后显示画面

从上面的示例可以看到，开发人员只需掌握 HTML 和 JavaScript 就可以开发基于 PhoneGap 的可以和移动设备的本地应用交互的手机 Web 应用，极大的简化了移动应用的开发周期。

结束语

本文对 PhoneGap 开源框架做了简单介绍，并通过一个示例介绍了如何开发基于 PhoneGap 框架的可以和移动设备的本地应用交互的 Mobile Web 应用。 PhoneGap 以它开发简单、兼容性好、支持标准化等无与伦比的优势正在不断的占据移动应用开发的市场，虽然它也存在运行速度慢、UI 反应延时等问题，但是随着技术的进步，这些不足会不断的改进和消除。

部署和运行示例代码

下载代码到本地计算机，打开 Eclipse，点击 File->import->Existing Projects into Workspace 如图 7 所示，选择 archive file 并指定到代码所在的本地路径（图 11），点击 Finish 按钮。

图 11：导入工程到 Eclipse

图 12：导入 Archive 文件

工程导入 Eclipse 后会自动编译，右键点击项目选择 Run As?Android Application 就可以运行程序。

用同样的方法将 WebTest 项目导入 Eclipse 工作空间中，右键点击项目选择 Run As?Run On Server

2066 次浏览