PhoneGap从入门到精通

第0章　移动Web开发学习指南 1

本章教学录像：26分钟

移动Web程序是指能够在智能手机、平板电脑、电子书阅读器等可移动设备中完整运行的Web程序。和传统桌面式Web程序相比，移动Web要求程序更加简单、高效，而且具备传统桌面Web程序所没有的硬件优势，例如GPS定位、传感器应用等。本章将简要介绍开发移动Web应用程序的基础知识，以便为读者步入本书后面知识的学习打下基础

0.1 Web标准开发技术 2

0.1.1 结构化标准语言 2

0.1.2 表现性标准语言 2

0.1.3 行为标准 2

0.2 移动Web开发概览 3

0.2.1 主流移动平台介绍 3

0.2.2 移动Web的特点 5

0.2.3 设计移动网站时需要考虑的问题 6

0.2.4 主流移动设备屏幕的分辨率 6

0.2.5 使用标准的HTML、CSS和JavaScript技术 7

0.3 移动Web开发必备技术 7

0.4 移动Web学习路线图 8

0.5 PhoneGap学习路线图 9

第1篇 基础知识

第 1章　PhoneGap基础 12

本章教学录像：31分钟

PhoneGap是基于HTML、CSS和JavaScript的技术，是一个创建跨平台移动应用程序的快速开发平台。PhoneGap使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手机的核心功能，包括地理定位、加速器、联系人、声音和振动等。此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。本章将详细讲解PhoneGap的基础知识，为读者步入本书后面知识的学习打下基础。

1.1 PhoneGap简介 13

1.1.1 什么是PhoneGap 13

1.1.2 背景介绍 13

1.1.3 PhoneGap的发展历程 14

1.1.4 PhoneGap的主要功能 14

1.1.5 PhoneGap的发展现状 15

1.1.6 PhoneGap优点和缺点分析 15

1.2 PhoneGap API基础 18

1.3 PhoneGap的工作 19

1.4 PhoneGap开发必备技术 19

1.4.1 Titanium框架 19

1.4.2 Adobe AIR技术 20

1.4.3 Corona库 21

1.4.4 常用的JavaScript移动UI框架 21

1.5 高手点拨 22

1.6 实战练习 22

第2章　使用PhoneGap开发移动Web应用 23

本章教学录像：22分钟

在充分了解PhoneGap的重要性和具体功能之后，本章将详细讲解使用PhoneGap开发移动Web应用程序的基础知识，以带领读者进入PhoneGap框架开发的学习阶段。

2.1 使用PhoneGap进行移动Web开发的步骤 24

2.2 搭建PhoneGap开发环境 24

2.2.1 准备工作 24

2.2.2 获得PhoneGap开发包 25

2.3 搭建Android开发环境 31

2.3.1 安装Android SDK的系统要求 31

2.3.2 安装JDK 31

2.3.3 获取并安装Eclipse和Android SDK 36

2.3.4 安装ADT 38

2.3.5 设定Android SDK Home 40

2.3.6 验证开发环境 41

2.3.7 实战演练—创建Android虚拟设备 42

2.3.8 实战演练—启动AVD模拟器 44

2.3.9 实战演练—在Android平台创建基于PhoneGap的程序 45

2.4 搭建iOS开发环境 52

2.4.1 搭建前的准备—加入iOS开发团队 52

2.4.2 安装Xcode 54

2.4.3 创建一个Xcode项目并启动模拟器 58

2.5 综合应用—在iOS平台创建基于PhoneGap的程序 62

2.6 高手点拨 65

2.7 实战练习 66

第2篇 必备技术

第3章　HTML5技术初步 68

本章教学录像：42分钟

HTML5是文本标记语言HTML的最新版本，其提供了一些新的元素和属性。除了原先的DOM接口外，HTML5还增加了更多API。本章将详细讲解HTML5的基础知识，特别是新特性方面的知识。

3.1 HTML5简介 69

3.1.1 发展历程 69

3.1.2 HTML5的吸引力 69

3.2 视频处理 70

3.2.1 video标记概述 70

3.2.2 autoplay 属性实战—自动播放一个视频 71

3.2.3 controls属性实战—控制播放的视频 73

3.2.4 height属性实战—设置播放视频的高度 74

3.2.5 其他属性 75

3.3 音频处理 76

3.3.1 audio标记概述 76

3.3.2 autoplay属性实战—自动播放一个音频 77

3.3.3 controls属性实战—控制播放的音频 78

3.3.4 loop 属性实战—循环播放音频 79

3.3.5 其他属性 80

3.4 Canvas画布处理 81

3.4.1 Canvas标记介绍 81

3.4.2 HTML DOM Canvas 对象 81

3.4.3 实战演练—实现坐标定位 82

3.4.4 实战演练—在指定位置画线 84

3.4.5 实战演练—绘制一个圆 84

3.4.6 实战演练—用渐变色填充一个矩形 85

3.4.7 实战演练—显示一幅指定的图片 86

3.5 Web数据存储 88

3.5.1 Web存储简介 88

3.5.2 HTML5中Web存储的意义 88

3.5.3 localStorage存储实战—显示访问页面的统计次数 88

3.5.4 sessionStorage 存储实战—显示访问页面的统计次数 90

3.6 表单的新特性 91

3.6.1 全新的Input 类型 91

3.6.2 全新的表单元素 95

3.6.3 全新的表单属性 97

3.7 综合应用—制作一个颜色滑动控制器 103

3.8 高手点拨 105

3.9 实战练习 105

第4章　CSS基础 107

本章教学录像：40分钟

CSS（层叠式样式表）是Cascading Style Sheet的缩写，中文名称为样式表，是W3C组织制定的、控制页面显示样式的标记语言。本章将详细讲解CSS技术的基础知识。

4.1 体验CSS的功能 108

4.2 基本语法 109

4.3 使用选择符 110

4.3.1 选择符的种类 110

4.3.2 实战演练—使用ID选择符设置文字颜色 112

4.4 CSS属性 113

4.5 几个常用值 115

4.5.1 颜色单位 115

4.5.2 长度单位 117

4.5.3 百分比值 118

4.5.4 URL统一资源定位符 118

4.5.5 URL默认值 119

4.6 在网页中使用CSS 119

4.6.1 页面调用CSS方式 119

4.6.2 通用优先级实战 122

4.6.3 类型选择符和类选择符实战 123

4.6.4 ID选择符实战 124

4.6.5 最近优先原则实战 125

4.7 CSS的编码规范 127

4.7.1 书写规范 127

4.7.2 命名规范 128

4.8 CSS调试 128

4.8.1 设计软件调试 129

4.8.2 继承性和默认值带来的问题 129

4.9 综合应用—实现精致、符合标准的表单页面 131

4.10 高手点拨 133

4.11 实战练习 134

第5章　jQuery Mobile基础 135

本章教学录像：37分钟

jQuery Mobile具有一些独一无二的重要特征。本章将讲解jQuery Mobile的基础语法知识和具体用法。

5.1 jQuery Mobile简介 136

5.1.1 jQuery简介 136

5.1.2 jQuery Mobile的特点 136

5.1.3 对浏览器的支持 137

5.1.4 对平台的支持 138

5.2 jQuery Mobile的特性 139

5.2.1 跨所有移动平台的统一UI 139

5.2.2 简化的标记驱动的开发 139

5.2.3 渐进式增强 139

5.2.4 响应式设计 140

5.3 获取jQuery Mobile 140

5.3.1 下载插件 141

5.3.2 使用URL方式加载插件文件 142

5.4 页面结构 143

5.4.1 实战演练—使用基本框架 143

5.4.2 实战演练—使用多页面模板 146

5.4.3 实战演练—设置内部页面的标题 148

5.5 导航链接处理 150

5.5.1 实战演练—设置外部页面链接 151

5.5.2 实战演练—设置页面后退链接 153

5.6 使用Ajax修饰导航 154

5.6.1 实战演练—使用Ajax驱动导航 154

5.6.2 使用函数changePage() 157

5.7 综合应用—开发一个移动版Ajax网页 159

5.8 高手点拨 165

5.9 实战练习 166

第6章　PhoneGap事件详解 167

本章教学录像：29分钟

在PhoneGap开发应用中，事件是其他PhoneGap API的基础，在事件监听器中，包含了调用其他API的功能函数。本章将详细讲解PhoneGap所独有的事件列表，而不讨论传统网页元素所能触发的事件。

6.1 PhoneGap的事件列表 168

6.2 deviceready事件详解 169

6.2.1 deviceready事件基础 169

6.2.2 实战演练—使用deviceready 事件 170

6.3 pause事件和resume事件 172

6.3.1 实战演练—使用pause事件 172

6.3.2 实战演练—使用resume事件 173

6.4 online事件和offline事件 176

6.4.1 实战演练—使用online事件 176

6.4.2 实战演练—使用offline事件 178

6.5 batterycritical、batterylow和batterystatus事件 179

6.5.1 使用batterycritical事件 179

6.5.2 使用batterylow事件 180

6.5.3 实战演练—使用batterystatus事件 181

6.6 backbutton事件 185

6.7 使用searchbutton事件 186

6.8 使用其他事件 187

6.8.1 使用menubutton事件 187

6.8.2 使用startcallbutton事件 188

6.8.3 使用endcallbutton事件 189

6.8.4 使用volumedownbutton事件 190

6.8.5 使用volumeupbutton事件 191

6.9 综合应用—监听各类PhoneGap事件 192

6.10 高手点拨 194

6.11 实战练习 194

第3篇 核心内容

第 7章　应用和通知API详解 196

本章教学录像：17分钟

在PhoneGap开发应用中，API是整个框架的核心内容，有助于实现常见的移动Web应用。本章将讲解PhoneGap中的应用API和通知API的基础知识。

7.1 应用API 197

7.1.1 白名单安全机制 197

7.1.2 访问对象的方法 197

7.2 Notification通知 198

7.2.1 主要对象 199

7.2.2 实战演练—使用notification.alert()方法 199

7.2.3 实战演练—使用notification.confirm()方法 201

7.2.4 实战演练—使用notification.beep()方法 203

7.2.5 实战演练—使用notification.vibrate()方法 205

7.2.6 实战演练—使用活动指示器和进度对话框通知 207

7.3 综合应用—演示各种API的基本用法 210

7.4 高手点拨 217

7.5 实战练习 218

第 8章　设备、网络连接和加速计API详解 219

本章教学录像：16分钟

本章将详细讲解PhoneGap中的设备、网络连接和加速计API的相关知识。

8.1 设备API 220

8.1.1 主要对象 220

8.1.2 使用device.name()方法 220

8.1.3 使用device.phonegap()方法 221

8.1.4 使用device.platform()方法 221

8.1.5 使用device.uuid()方法 222

8.1.6 使用device.version()方法 223

8.1.7 实战演练—使用设备API 223

8.2 网络连接API 224

8.2.1 属性和常量 224

8.2.2 实战演练—检测当前网络状况 225

8.3 加速计API 227

8.3.1 使用acceleration对象 227

8.3.2 实战演练—使用getCurrentAcceleration获取加速度 228

8.3.3 实战演练—使用watchAcceleration获取加速度 230

8.3.4 实战演练—使用clearWatch清除加速度 232

8.4 综合应用—实现一个蓝牙控制器 234

8.5 高手点拨 253

8.6 实战练习 254

第9章　地理位置API详解 255

本章教学录像：26分钟

在现实应用中，很多智能手机都拥有GPS功能。PhoneGap应用专门提供了地理位置API来实现GPS位置定位功能。本章将详细讲解地理位置API的相关知识。

9.1 地理位置基础 256

9.1.1 应用背景 256

9.1.2 Geolocation接口介绍 256

9.2 Geolocation对象详解 257

9.2.1 实战演练—使用Position对象 257

9.2.2 PositionError对象 259

9.2.3 实战演练—使用Coordinates对象 260

9.3 地理位置API的参数 262

9.3.1 geolocationSuccess 262

9.3.2 geolocationOptions 262

9.4 操作方法 263

9.4.1 实战演练—获取设备当前的地理位置信息 263

9.4.2 实战演练—定期获取设备的地理位置信息 266

9.4.3 实战演练—取消定期获取设备的地理位置信息 268

9.4.4 实战演练—使用Geolocation 270

9.5 综合应用—联合使用Geolocation和百度地图实现定位功能 272

9.6 高手点拨 275

9.7 实战练习 276

第10章　指南针API详解 277

本章教学录像：19分钟

在现实应用中，智能手机中的指南针功能可以确保我们在行程之中不会迷失方向。在PhoneGap应用中，专门提供了指南针API来实现方向定位功能。本章将详细讲解指南针API的相关知识和具体用法。

10.1 指南针API的对象 278

10.1.1 CompassHeading对象 278

10.1.2 CompassError对象 278

10.1.3 onSuccess函数 278

10.1.4 CompassOptions对象 279

10.2 指南针API中的函数 279

10.2.1 实战演练—获取设备当前的指南针信息 279

10.2.2 实战演练—定期获取设备的指南针信息 281

10.2.3 实战演练—取消定期获取设备的指南针信息 283

10.2.4 实战演练—获取罗盘的朝向度数 286

10.2.5 实战演练—停止对罗盘的监听 288

10.3 综合应用—实现一个移动版指南针 290

10.4 高手点拨 296

10.5 实战练习 296

第11章　照相机API详解 297

本章教学录像：27分钟

很多智能手机都具有多媒体功能，例如相机、视频、音乐、录像等，以适应用户的需要。在PhoneGap应用中，专门提供了针对相机应用的API，即Camera。本章将详细讲解Camera的相关知识。

11.1 照相机API的函数 298

11.1.1 函数camera.getPicture() 298

11.1.2 cameraSuccess 300

11.1.3 cameraError 301

11.1.4 实战演练—在网页中触发照相机 301

11.2 业务操作 303

11.2.1 业务操作基础 304

11.2.2 实战演练—使用照相机API 305

11.3 综合应用—实现拍照并设置为头像功能 308

11.4 综合应用—实现拍照并查看相册功能 313

11.5 高手点拨 316

11.6 实战练习 316

第12章　采集API详解 317

本章教学录像：21分钟

PhoneGap相关应用专门提供了针对多媒体信息采集的API，即Capture。本章将详细讲解采集API—Capture的相关知识。

12.1 主要对象 318

12.1.1 Capture对象 318

12.1.2 CaptureAudioOptions对象 318

12.1.3 CaptureImageOptions对象 319

12.1.4 CaptureVideoOptions对象 319

12.1.5 CaptureCB函数 320

12.1.6 CaptureErrorCB函数 320

12.1.7 ConfigurationData对象 321

12.1.8 MediaFile对象 321

12.1.9 MediaFileData对象 321

12.2 主要方法 322

12.2.1 实战演练—使用capture.captureAudio()方法 322

12.2.2 实战演练—使用capture.captureImage()方法 324

12.2.3 MediaFile.getFormatData()方法 327

12.3 综合应用—Video视频采集器 327

12.4 高手点拨 330

12.5 实战练习 330

第13章　媒体API详解 331

本章教学录像：20分钟

PhoneGap应用专门提供了针对多媒体应用的API，即Media。在本章的内容中，将详细讲解Media的相关知识。

13.1 主要参数 332

13.2 主要方法 332

13.2.1 实战演练—使用media.getCurrentPosition()方法 333

13.2.2 实战演练—使用media.getDuration()方法 336

13.2.3 实战演练—使用play()方法 339

13.2.4 media.pause()方法 342

13.2.5 media.release()方法 343

13.2.6 实战演练—使用media.startRecord()方法 346

13.2.7 media.stop()方法 348

13.2.8 media.stopRecord()方法 351

13.3 综合应用—播放本地视频 354

13.4 高手点拨 358

13.5 实战练习 358

第14章　通讯录API详解 359

本章教学录像：27分钟

在现实应用中，无论是智能手机还是非智能手机，都具有通讯录功能，通过通讯录能够快速找到联系人的信息。PhoneGap应用专门提供了针对通讯录的API，即Contacts。本章将详细讲解通讯录API的相关知识。

14.1 主要对象 360

14.1.1 实战演练—使用Contact对象 360

14.1.2 实战演练—使用ContactName对象 364

14.1.3 实战演练—使用ContactField对象 367

14.1.4 实战演练—使用ContactAddress对象 370

14.1.5 ContactOrganization对象 372

14.1.6 ContactFindOptions对象 374

14.2 包含的方法 376

14.2.1 实战演练—查找联系人方法 376

14.2.2 创建联系人 378

14.2.3 保存联系人 379

14.2.4 删除联系人 379

14.3 综合应用—创建一个简易的Web版通讯录 380

14.4 高手点拨 387

14.5 实战练习 388

第15章　数据存储API详解 389

本章教学录像：18分钟

在现实应用中，无论是智能手机还是非智能手机，都需要具备数据存储功能。通过此功能，多种信息可被存储为本地数据。PhoneGap应用专门提供了实现数据存储应用的API，即Storage。本章将详细讲解Storage的相关知识。

15.1 主要对象 390

15.1.1 Database对象 390

15.1.2 SQLTransaction对象 392

15.1.3 SQLResultSet对象 394

15.1.4 SQLResultSetList对象 396

15.1.5 SQLError对象 397

15.1.6 localStorage对象 397

15.2 主要方法 399

15.3 综合应用—实现数据操作处理 400

15.4 高手点拨 405

15.5 实战练习 406

第16章　文件操作API详解 407

本章教学录像：34分钟

在PhoneGap应用中，文件API是File，其提供了操作任意格式文件的功能，用于处理那些不适合数据库的用户场景。本章将详细讲解文件API的相关知识。

16.1 主要对象 408

16.1.1 DirectoryEntry对象 408

16.1.2 DirectoryReader对象和File对象 408

16.1.3 FileEntry对象 409

16.1.4 FileReader对象 409

16.1.5 实战演练—使用FileSystem对象 410

16.1.6 FileTransfer对象 412

16.1.7 FileUploadOptions对象和FileUploadResult对象 414

16.1.8 实战演练—使用FileWriter对象 414

16.1.9 Flags对象 418

16.1.10 LocalFileSystem对象 418

16.1.11 Metadata对象 420

16.2 主要方法 420

16.2.1 方法entry.getMetadata() 420

16.2.2 方法entry.moveTo() 421

16.2.3 方法entry.copyTo() 422

16.2.4 方法entry.toURI() 423

16.2.5 方法entry.remove() 423

16.2.6 方法entry.getParent() 423

16.2.7 方法entry.createReader()和方法entry.getDirectory() 424

16.2.8 方法entry.getFile() 424

16.2.9 方法entry.removeRecursively() 425

16.2.10 方法readEntries() 426

16.2.11 方法entry.createWriter() 426

16.2.12 实战演练—使用方法ReadAsDataURL()和方法ReadAsText() 427

16.2.13 方法upload() 429

16.2.14 实战演练—使用方法download() 431

16.3 综合应用—实现拍照并上传功能 434

16.4 高手点拨 439

16.5 实战练习 440

第17章　PhoneGap的插件 441

本章教学录像：20分钟

在现实开发应用中，利用PhoneGap开发设计更加复杂的移动Web应用时，前面讲解的知识就难以胜任了，这时候我们可以尝试插件。本章将详细讲解PhoneGap插件的相关知识。

17.1 PhoneGap插件基础 442

17.2 使用PhoneGap插件 443

17.2.1 ChildBrowser插件介绍 443

17.2.2 实战演练—使用ChildBrowser插件 443

17.3 实现PhoneGap插件 448

17.3.1 编写前的准备 448

17.3.2 实战演练—编写PhoneGap插件 448

17.3.3 将PhoneGap嵌入到iOS程序中 454

17.4 常用的PhoneGap插件 455

17.4.1 NativeControls插件 455

17.4.2 WebGL插件 457

17.5 综合应用—使用插件实现弹出软键盘效果 457

17.6 综合应用—调用二维码扫描插件 464

17.7 实战练习 474

第4篇 综合实战

第 18章　电话本管理系统 476

本章教学录像：16分钟

经过本书前面内容的学习，读者已经掌握了使用PhoneGap框架开发移动Web程序的基础知识。在本章的内容中，我们将综合运用前面所学的知识，并结合使用HTML5、CSS3和JavaScript技术，开发一个在移动平台运行的电话本管理系统。希望读者认真阅读本章内容，仔细品味HTML5 jQuery Mobile PhoneGap组合在移动Web开发领域的真谛。

18.1 需求分析 477

18.1.1 产生背景 477

18.1.2 功能分析 477

18.2 创建Android工程 478

18.3 实现系统主界面 479

18.4 实现信息查询模块 481

18.5 实现系统管理模块 483

18.6 实现信息添加模块 487

18.7 实现信息修改模块 489

18.8 实现信息删除模块和更新模块 492

第19章　RSS订阅系统 493

本章教学录像：13分钟

RSS（Really Simple Syndication，简易信息聚合）是在线共享内容的一种简易方式，也叫聚合内容。通常在时效性比较强的内容上使用RSS订阅能更快速地获取信息，而网站提供RSS输出，有利于让用户获取网站内容的最新更新。本章综合运用前面所学的知识，详细讲解使用HTML5、CSS3、jQuery Mobile和PhoneGap等技术来开发一个Web版RSS订阅系统的方法。

19.1 RSS基础 494

19.1.1 RSS的用途 494

19.1.2 RSS的基本语法 494

19.2 SAX技术简介 496

19.2.1 SAX的原理 496

19.2.2 基于对象和基于事件的接口 496

19.2.3 常用的接口和类 497

19.3 功能介绍 500

19.4 创建Android工程 501

19.5 系统主界面 502

19.5.1 文件头信息 502

19.5.2 显示顶部导航 503

19.5.3 显示城市天气信息 503

19.5.4 显示订阅栏目信息 505

19.6 订阅管理 510

19.6.1 管理订阅 510

19.6.2 添加或取消订阅 520

19.7 设置功能 521

19.7.1 展示系统设置功能 521

19.7.2 换肤设置 523

19.7.3 数目设置 524

19.7.4 设置连接方式 524

19.7.5 清空订阅 525

19.8 RSS信息展示 526

19.9 系统调试 532