PhoneGap实战

章节摘录

版权页：   插图：   4.调整修改 通过将设计原型交付给目标用户测试，得到实际的使用反馈后调整原型，然后再测试和再调整，反复进行，这就是交互设计最后也是最重要的一步。在这个过程中通过修改迭代，最大限度地挖掘并满足用户需求，只有不断地改进才能保持一款产品长久的生命力。 上面4个步骤简单介绍了交互设计的操作流程，步骤之外更多的是需要设计师思考和尝试，交互设计阶段的完成并不代表着交互思维的完结，只有延续交互设计的思维，本着“交互无处不在”的设计思维才能设计出更加贴近用户实际需求的产品。 8.4 WebApp与原生App 随着智能手机阵营的不断壮大，一方面更多的终端意味着更多的市场，另一方面也意味着平台的“分裂”。无论是目前流行的iOS和Android系统，还是Symbian或WindowsPhone都已经支持大部分的HTML 5特性，而且移动设备的硬件竞争也为HTML 5扫清了硬件障碍，未来的移动应用领域注定将以更加开放的形态发展。基于各自开放且操作性强的交流平台，开放的开发方式在移动应用的开发过程中扮演着关键的角色。 8.4.1 WebApp和原生App的对比 原生App是基于移动操作系统公司提供的第三方应用开发人员SDK所开发的程序。例如，Apple公司提供的是基于Objective—C语言的iOS SDK开发，Android提供的是基于Java语言的Android SDK开发。 对于WebApp，实际上可以简单地理解为针对移动终端优化过的Web站点。它的用户界面是用HTML、CSS和JavaScript等Web技术构建的，能够通过一个链接地址访问到，并且交互体验上针对移动终端的特点进行了优化。 这两种开发方式都有明显的优势和弊端，我们可以简单地通过以下几个方面来进行对比。 1.开发者快速上手 目前，移动设备开发人员尤其是iOS开发人员相对稀缺，因此原生App开发的成本相对较高，相比之下，Web前端开发人员更多一些，而且他们能够充分利用CSS／JavaScript／HTML 5并快速上手，开发成本相对也较低。 2.多终端适配 WebApp的开发只需使用基础的Web技术：HTML+CSS+JavaScript，即可实现，在开发上只需注意手机浏览器的兼容性，用户只需要打开浏览器便可体验WebApp应用。而原生App必须针对不同的移动终端设备，使用不同的开发语言来开发多个版本。 3.开发周期和实时调整 WebApp可以在终端上直接通过地址访问应用，因此开发和调试可以实时交错进行，即便在发布后发现问题也可以随时更改，用户只需刷新页面即可立即体验更新。

前言

前言智能移动设备是一种全新的媒介，自从2007年第一台iPhone正式出售以后，这个世界就像是被注入了某种催化剂，不过短短几年我们的生活几乎已经无法离开这些精致的产品了。无论操作系统是iOS、Android，还是Windows Phone，都说明一点：我们已经进入了一个智能移动设备和移动互联网爆炸式增长的时期。和很多人一样，当我拿到iPhone手机后，对其丰富的应用非常着迷，这些个性化的应用和游戏让我可以随时随地获取资讯、娱乐，甚至还可以在旅行途中轻松地处理工作事务。在度过短暂的“狂热”期后，我非常希望这些排列精致的图标后有一个应用可以完全属于我。于是，我收集了大量的开发资料并着手学习Objective-C，但非常遗憾的是，我发现学习Objective-C并不是件容易的事。虽然它和C语言一样的优雅，但是对于一个习惯了脚本语言的设计师来说还是不太容易适应。很快我发现了一个“取巧”的办法，即通过UIWebView类访问网络或是本地的网页文件，这使我可以利用更为熟练的技术开发iOS终端上的应用。不过如果想要通过JavaScript脚本调用iPhone手机上各种先进的传感器及其他硬件接口，依然不是件容易的事。随着Android操作系统的快速崛起，移动终端的操作系统开始出现分化，高举免费大旗的Android系统很快完成了从“新人”到“元老”的角色转变，大有和iOS一争高下的气势。更多的占有率就意味着更大的市场，如何把iOS程序转移到Android平台成为一个不可回避的问题。重新学习Java固然是最佳选择，但对于一个设计师来说，同时学习两种风格完全不同的编程语言绝对会是一个痛苦的过程。很快WebView再一次成为学习的“捷径”，从本质上来说，不论是Android还是iOS程序，其WebView类的功能都可以看做是用来访问网络的一个内置“浏览器”，通过它可以打开一个由HTML、CSS、JavaScript、PHP“构筑”的Web应用程序。前景看起来变得非常美好，我们只需要开发一套Web应用程序就可以使用WebView实现iOS和Android两个版本的应用程序的发布，但现实是残酷的，WebView只能解决一些基本的问题，想要实现一个完美的应用还需要让Web程序也可以控制移动设备上独特的硬件功能（如加速器、振动感知、指南针、照相机、推送提醒等），似乎要实现这个目标还是得深入地学习两门程序开发语言，大量的硬件接口调用依然是开发过程中面临的坚冰。幸运的是，一个优秀的开源开发工具的诞生改变了这个尴尬的状况，这个工具就是本书的“主角”—PhoneGap。PhoneGap是一个可以统一连接Web应用程序和移动终端硬件的桥梁，因为它不仅为每个主流的智能移动终端操作系统（iOS、Android、Windows Phone等）构建了原生的程序项目模板，还为其提取出了相应操作硬件接口的API。这意味着我们通过PhoneGap构建的应用程序只需要使用一段JavaScript代码即可拥有足够的权限访问移动设备特有的硬件功能。随着个人信息终端由PC向移动设备的转移，这个时代也为开发者提供了新的获得成功的机会。如今，借助PhoneGap，广大的前端开发者和设计师可以开发出更多、更好的移动应用程序。本书写给谁本书适合以下读者阅读：Web网站设计师及移动应用产品的设计人员。移动应用开发的爱好者和初级开发者。Web前端开发工程师。负责移动应用项目开发的产品经理。如何阅读本书本书分为四大部分：第一部分为准备篇，简单地介绍了PhoneGap的基本概念及相关知识，并向读者展示了PhoneGap的用途及优势，同时对Web开发技术进行了入门介绍。然后向读者讲述了PhoneGap的安装和配置过程，最后将学习到的基础知识运用于实践中，开发出第一个移动应用—“汇率计算器”。第二部分为基础篇，全面讲解了PhoneGap API 的功能及使用方法，并附上了具体的实例，从而帮助读者查阅与使用PhoneGap API。第三部分为实战篇，通过开发“指南针”应用和“万圣节更衣室”应用，让读者了解如何利用PhoneGap API 结合Web 技术开发一个完整的移动应用。第四部分为提高篇，首先向读者介绍了如何发布应用程序以及在设计移动应用产品的时候需要注意的事项并提供了一些设计上的建议，然后简单介绍了jQuery Mobile 和 Sencha Touch 框架如何与PhoneGap结合使用，最后讲述了如何使用PhoneGap 的插件。如果你是一名经验丰富的资深用户，之前已经熟悉了PhoneGap及Web开发技术的相关基础知识，那么你可以直接阅读本书第三部分的内容，这部分以接近实战的案例来讲解如何使用PhoneGap开发移动应用，相比于前两部分更独立。但如果你还是一名初学者，建议从第一部分准备篇开始学习。

媒体关注与评论

随着移动设备和移动市场的强势崛起，信息系统正在经历革命性的变化，越来越多的应用程序正从桌面平台走向移动平台，开发基于移动平台的手机App已成为当今程序开发的新热点。众所周知，移动APP的开发主要基于各移动平台的原生SDK进行。然而，作为一名普通的网页设计师、前端开发者，能否跨过原生SDK这道门槛，而使用基本的Web 技术（HTML、CSS、JavaScript）开发移动APP？PhoneGap 给予了我们肯定的答案。PhoneGap是一个使用HTML、CSS及JavaScript来构建跨平台移动App的开源开发框架。它能让你只使用基本的Web技术即可获得移动设备的原生特性，例如摄像头、加速器、指南针等。更棒的是，PhoneGap能让你轻松地实现App的跨平台发布，你只需编写一次基础代码就能将App部署到 iOS、Android、Blackberry、Symbian、WebOS、Windows Phone、Windows8、Bada等八大移动平台上。本书全面系统地对PhoneGap做了详细的讲解，强烈推荐！——PhoneGap中国社区

内容概要

　　董霙，毕业于北京电影学院，从事互动创意设计工作超过10年。2007年加盟腾讯，就职于腾讯广告产品部，任设计中心总监，负责面向客户的新媒体广告创意及产品开发支持服务，有丰富的跨平台创意开发经验。带领团队获得多项产品专利并多次赢得国内广告创意赛事大奖。
黄悦，资深Web前端开发工程师，在该领域研究近10年，实战经验丰富。目前在腾讯主要负责跨平台的广告产品前端开发与设计，此前先后担任过多媒体互动工程师、交互设计师和UI
设计师。精通 HTML、CSS、JavaScript、ActionScript 和 RIA
等前端开发技术，在通过前端技术提高产品运行效率及用户交互体验方面颇有心得，对跨平台 Web App
的开发与设计也有较深入的研究。在产品的开发与设计中崇尚敏捷开发的实践，及时响应需求、快速并高效地实现产品功能。最近两年，集中精力研究和实践CSS3、HTML
5、响应式设计及PhoneGap等前沿技术，致力于更好地开发出具有良好用户体验的桌面及移动Web产品。
李硙，资深Web前端开发工程师，有8年网站开发经验，先后供职于网易、腾讯，从事Web相关的技术工作。一直致力于HTML、JavaScript、CSS等Web相关技术的研究与实践，在HTML页面优化及用户体验的研究上有丰富的实践经验。关注新技术，对HTML
5，以及各种移动设备和移动开发技术有着浓厚的兴趣，尤其是
Web技术在移动领域的应用。在PhoneGap测试版发布之后，对其进行了持续且深入的学习研究，积累了丰富的实战经验。此外，还在PHP和Linux服务器的后台架构与开发方面有很深入的了解和丰富的实践经验。
祁特，资深Web前端工程师，在该领域有8年工作经验，曾经在网易等多家公司担任前端开发工程师。目前就职于腾讯北京分公司，从事Web开发相关的技术工作，有丰富的项目经验。痴迷于HTML、JavaScript、CSS、Flash等网站前端相关技术的研究与实践，并持续关注跨平台技术的发展。近期主要从事跨平台Web移动产品的快速开发，对PhoneGap技术进行了深入研究，拥有大量宝贵的项目经验。
黄珊，有超过8年的互动创意设计工作经验，2009年加盟腾讯，现任职于腾讯广告平台与产品部，担任美术指导，负责腾讯广告互动创意工作。带领的设计团队平均每年产出300多个互动创意作品，多次获得互动广告大奖，2009年获得“Adworld
Awards 2009年度金营销大奖——最佳全场大奖”。近期比较关注HTML
5及CSS3的应用，致力于打造用户-客户-媒体三方一体的广告互动创意产品。
刘娅琦，腾讯广告平台与产品部设计师，主要负责无线客户端广告产品及响应式网站的设计与前端开发。具备丰富的大型网站UI/UE设计及前端开发经验，其作品获得2011年中国互动网络广告创意奖中的多个奖项。撰写出版了《Maya
2008 中英文命令速查手册》、《Flash CS4 完全学习手册》、《Flash CS4
高手之路》等书籍，以生动实用的案例和良好的学习体验得到了市场的积极评价和广大读者的肯定。

书籍目录

推荐序

前言

第一篇　准备篇

第1章　认识PhoneGap

1.1　 PhoneGap 介绍

1.1.1　 什么是PhoneGap

1.1.2　PhoneGap的起源

1.1.3　 PhoneGap的用途

1.1.4　 PhoneGap的发展现状及趋势

1.2　PhoneGap的优势与不足

1.2.1　PhoneGap相比其他框架的优势

1.2.2　 PhoneGap的不足

1.3　 Web开发速成

1.3.1　 HTML介绍

1.3.2　 CSS介绍

1.3.3　 JavaScript入门

1.4　 小结

第2章　安装和配置PhoneGap

2.1　下载PhoneGap

2.2　配置PhoneGap

2.2.1　配置PhoneGap 到iOS

2.2.2　配置PhoneGap 到Android

2.2.3　配置PhoneGap到BlackBerry

2.2.4　配置PhoneGap 到webOS

2.2.5　配置PhoneGap 到Symbian

2.3　小结

第3章　编写第一个PhoneGap应用—汇率计算器

3.1　汇率计算器功能概述

3.2　创建程序

3.3　配置程序界面

3.3.1　引入相关文件

3.3.2　制作程序界面

3.4　给程序添加功能逻辑

3.5　在模拟器中测试程序

3.6　在手机上测试程序

3.6.1　生成iPhone应用

3.6.2　生成Android应用

3.7　小结

第二篇　基础篇

第4章　PhoneGap API详解

4.1　PhoneGap API简介

4.2　使用PhoneGap API前的准备

4.3　本地事件处理

4.3.1　deviceready

4.3.2　 pause

4.3.3　 resume

4.3.4　 online

4.3.5　 offline

4.3.6　 backbutton

4.3.7　 batterycritical

4.3.8　 batterylow

4.3.9　 batterystatus

4.3.10　 menubutton

4.3.11　 searchbutton

4.3.12　 startcallbutton

4.3.13　 endcallbutton

4.3.14　 volumedownbutton

4.3.15　 volumeupbutton

4.4　 加速计传感器

4.4.1　 获取加速计传感器的坐标位置

4.4.2　 周期性获取加速计传感器的坐标位置

4.4.3　 停止监视加速计传感器的坐标位置

4.5　 使用设备摄像头

4.6　多媒体采集

4.6.1　使用capture对象录制视频

4.6.2　 使用capture对象获取图片

4.6.3　 使用capture对象录制语音

4.7　 侦测设备屏幕朝向—指南针

4.7.1　 获取指南针当前朝向

4.7.2　 在固定的时间间隔获取设备朝向的角度

4.7.3　 停止WatchID参数指定的指南针监听

4.7.4　 当指南针改变度数时获取朝向度数

4.7.5　 停止watchID参数指定的指南针朝向度数的监听

4.8　获取网络连接状态

4.9　访问手机通讯录

4.9.1　创建一个新的联系人

4.9.2　 查询联系人

4.9.3　处理联系人信息

4.10　获取设备信息

4.10.1　获得设备的型号名称

4.10.2　获取设备上正在运行的PhoneGap版本信息

4.10.3　获得设备使用的操作系统名称

4.10.4　获得设备的全球唯一标识

4.10.5　获得操作系统的版本号

4.11　文件系统处理

4.11.1　File

4.11.2　FileReader

4.11.3　FileWriter

4.11.4　 FileSystem

4.11.5　 FileEntry

4.11.6　 DirectoryEntry

4.11.7　 DirectoryReader

4.11.8　 FileTransfer

4.12　 使用设备传感器的GPS地理位置服务

4.12.1　 获得当前地理位置

4.12.2　 监测设备的位置变化

4.12.3　 停止监听设备的位置变化

4.13　 播放和录制音频

4.13.1　 获得音频文件的当前位置

4.13.2　 获得音频文件总时长

4.13.3　 开始或者继续播放音频文件

4.13.4　 暂停播放音频文件

4.13.5　 释放音频资源

4.13.6　 停止播放音频文件

4.13.7　 在音频文件中跳到指定位置

4.13.8　 启动录制音频文件

4.13.9　 停止录制音频文件

4.14　消息提示

4.14.1　警告框

4.14.2　 确认框

4.14.3　 蜂鸣

4.14.4　 振动

4.15　 客户端数据存储

4.15.1　 openDatabase

4.15.2　 Database

4.15.3　 SQLTransaction

4.15.4　 SQLResultSet

4.15.5　SQLResultSetList

4.15.6　 SQLError

4.15.7　 localStorage

4.16　 小结

第三篇　实战篇

第5章　“指南针”应用程序

5.1　指南针应用简介及功能概述

5.2　利用PhoneGap创建指南针应用程序

5.2.1　主流平台指南针应用程序介绍

5.2.2　创建PhoneGap指南针程序

5.2.3　指南针程序UI界面

5.2.4　程序代码及逻辑讲解

5.2.5　导出应用程序

5.2.6　在手机上测试应用程序

5.3　小结

第6章　“万圣节更衣室”应用程序

6.1　设置项目

6.2　配置程序界面

6.2.1　程序界面介绍

6.2.2　程序界面分辨率说明

6.2.3　程序界面图片素材配置

6.3　界面HTML与CSS编写

6.3.1　基础代码

6.3.2　开始页

6.3.3　 文本输入页

6.3.4　 摇晃监测页

6.3.5　 结果页

6.3.6　 HTML与CSS最终代码

6.4　 程序编写

6.4.1　 界面切换功能

6.4.2　 文本输入页功能

6.4.3　 摇晃监测页功能

6.4.4　 结果页功能

6.4.5　 退出程序功能

6.4.6　 最终代码

6.5　 打包与测试

6.5.1　 打包生成APK文件

6.5.2　 测试运行

6.6　 小结

第四篇　提高篇

第7章　发布应用程序

7.1　将程序提交到App Store

7.1.1　向Apple注册

7.1.2　准备应用程序的发行版本

7.1.3　提交App

7.2　将Android应用程序提交到移动应用程序市场

7.2.1　注册成为开发者

7.2.2　提交App

7.3　小结

第8章　移动应用的产品设计

8.1　Android和iPhone的产品设计差异

8.1.1　功能定义阶段

8.1.2　构架交互阶段

8.1.3　改进细化阶段

8.1.4　输出产品阶段

8.2　统一化与差异化

8.2.1　视觉风格的统一

8.2.2　交互设计的差异化

8.3　交互体验的重要性

8.3.1　什么是交互设计

8.3.2　交互设计的重要性

8.3.3　如何进行交互设计

8.4　 WebApp与原生App

8.4.1　WebApp和原生App的对比

8.4.2　 如何选择WebApp和原生App

8.5　利用HTML 5和JavaScript编写交互动画

8.5.1　利用Adobe Edge创建一个新的项目

8.5.2　创建带缓动的渐入HTML动画

8.5.3　创建循环动画效果

8.5.4　创建按钮完成应用界面的跳转

8.5.5　导出HTML动画

8.6　小结

第9章　PhoneGap与jQuery Mobile的结合使用

9.1　jQuery简介

9.2　了解jQuery Mobile

9.3　使用jQuery Mobile

9.4　PhoneGap与jQuery Mobile

9.5　小结

第10章　PhoneGap的插件

10.1　如何使用PhoneGap插件

10.2　小结

编辑推荐

《PhoneGap实战》编辑推荐：腾讯资深专家团队撰写，Adobe中国官方专家和PhoneGap中国社区联袂推荐，繁体版台湾发行！

作者简介

《PhoneGap实战》由来自腾讯的资深专家团队撰写，Adobe中国区专家和PhoneGap中国社区联袂推荐。《PhoneGap实战》内容全面、注重实战、启发性强，对PhoneGap的所有功能、特性、使用方法和开发技巧进行了全面而透彻的讲解，是系统学习PhoneGap的权威参考书。

《PhoneGap实战》一共10章：第1章主要介绍PhoneGap的用途、与其他同类框架的比较，以及Web开发的入门知识；第2章详细讲解PhoneGap在各个移动平台上的安装与配置；第3章通过一个汇率计算器实例讲解PhoneGap应用开发的完整流程和相关技术细节；第4章详细讲解PhoneGap的API；第5章和第6章是两个综合性的案例（指南针、万圣节更衣室），它们都遵循构想、设计、开发、调试、发布五大流程，从实战出发，由浅入深，逐步推进；第7章介绍PhoneGap应用在各个平台上的发布流程与方法；第8章从不同的平台、视觉风格、交互设计、移动应用选型等角度分享了移动应用产品设计的一些技巧和最佳实践；第9章讲解PhoneGap与jQuery Mobile的结合使用；第10章介绍PhoneGap插件的使用。

《PhoneGap实战》有3个重要的特点：

（1）注重实战。书中包含的3个经典案例：汇率计算器、指南针、万圣节更衣室，都依循构想、设计、开发、调试、发布五大流程，都从实战出发，由浅入深，逐步推进。

（2）内容全面。《PhoneGap实战》详细而完整地介绍了PhoneGap API 的属性与方法，同时对基本Web 技术（HTML、CSS、JavaScript）进行了入门讲解，即使之前没有网页开发经验的读者也能快速地投入到App开发中。

（3）启发性强。一款跨平台的移动App，除了程序开发之外，在产品设计和用户交互上，也存在各自平台的特殊性，《PhoneGap实战》将比较同款产品在 iOS 与 Android 平台上设计、交互的异同，从而启发读者设计出更符合平台特征的移动App。    



温馨提示：本图书为简体中文，图书封面所示“繁体版中国台湾发行”意在告知读者此书另有繁体版，在台湾发行，请读者知悉。

图书封面

---

 PhoneGap实战下载

---