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 所示：

回页首

PhoneGap API 简介

• 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。
• 下载 并安装 ADT Plugin for Eclipse。
• 下载 并解压 PhoneGap。

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

如果需要使用 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); } 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>

    
    

  注意：<form action="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 按钮。

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

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

回页首

下载

关于下载方法的信息

参考资料

学习

• 参考 PhoneGap 的官方开发文档。
  
  
• 参考 Android 官方开发网站，获得更多和 Android 开发的相关资料。
  
  
• 参考 ADT Plugin 的相关资料。
  
  
• developerWorks Web development 专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
  
  
• developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
  
  
• developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。
  
  
• 查看 HTML5 专题，了解更多和 HTML5 相关的知识和动向。
  
  

讨论

• 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。
  
  

作者简介

任冬艳，IBM 中国开发中心 Optim 团队开发工程师，在 J2EE 和 Web 开发领域有着多年开发经验，喜欢关注新技术。她毕业于北京邮电大学，并拥有硕士学位。

翟峰在 J2EE 和 Web 开发领域有着多年开发经验，喜欢关注新技术。毕业于西北大学，拥有计算机硕士学位。

李雪锋：在 IBM Optim 团队web 产品开发。毕业于北京交通大学并获得硕士学位。对云计算、移动应用程序开发等方面有浓厚的兴趣。

为本文评分

评论

回页首

内容

• PhoneGap 简介
• PhoneGap 特性
• PhoneGap API 简介
• 搭建 PhoneGap 开发化境
• 创建一个简单的 PhoneGap 应用
• 结束语
• 部署和运行示例代码
• 下载
• 参考资料
• 作者简介
• 评论