PhoneGap实战[按需印刷]

    书籍
    计算机书籍
《PhoneGap实战》由来自腾讯的资深专家团队撰写，Adobe中国区专家和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插件的使用。

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

《PhoneGap实战》
推荐序
前言
第一篇　准　备　篇
第1章　认识PhoneGap / 2
1.1 PhoneGap 介绍 / 2
1.1.1 什么是PhoneGap / 2
1.1.2　PhoneGap的起源 / 2
1.1.3 PhoneGap的用途 / 3
1.1.4 PhoneGap的发展现状及趋势 / 3
1.2　PhoneGap的优势与不足 / 4
1.2.1　PhoneGap相比其他框架的优势 / 4
1.2.2 PhoneGap的不足 / 5
1.3 Web开发速成 / 6
1.3.1 HTML介绍 / 6
1.3.2 CSS介绍 / 7
1.3.3 JavaScript入门 / 10
1.4 小结 / 13
第2章　安装和配置PhoneGap / 14
2.1　下载PhoneGap / 14

　　智能移动设备是一种全新的媒介，自从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开发移动应用，相比于前两部分更独立。但如果你还是一名初学者，建议从第一部分准备篇开始学习。
　　勘误与支持
　　参加本书编写工作的还有：刘秀英、黄志勇、胡兵、陈思羽、何小晓、杜旸、吴雅琴、任宝星、卢雪君、赵燕、陈前、林福生。由于作者的水平有限，加之编写时间仓促，书中难免出现一些错误或者不准确的地方，恳请读者批评指正。若你在书中发现了错误和遇到了问题，可在官方微博上与我交流，我的微博地址是：http:// t.qq.com/Adgame，我将尽量在线上为读者提供最满意的解答。书中的全部源文件均可以从华章网站（www.hzbook.com）下载，我也会将相应的功能更新及时发布出来。期待能够得到读者的真挚反馈。

　　随着移动设备和移动市场的强势崛起，信息系统正在经历革命性的变化，越来越多的应用程序正从桌面平台走向移动平台，开发基于移动平台的手机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中国社区(http://bbs.phonegapcn.com/)
　　

　　第一篇 准备篇 第1章 认识PhoneGap 第2章 安装和配置PhoneGap 第3章 编写第一个PhoneGap应用—汇率计算器 第1章认识PhoneGap PhoneGap 可以让你使用基础的 Web 技术开发出足以媲美原生App的移动应用。而且，最有意思的是，你只要编写一次基础代码，就可以将 App 部署到多个移动平台上。怎么样，够强大吧？好奇吗？那让我们一起进入 PhoneGap 的世界吧！ 1.1 PhoneGap 介绍 1.1.1 什么是PhoneGap PhoneGap 是基于HTML 5 的移动应用前端开发框架。使用 HTML+CSS+JavaScript，再通过PhoneGap就可以快速创建移动App。 PhoneGap 能让你只使用简单的 Web 技术即可获得移动设备的原生特性，如摄像头、加速器、指南针等。使用这些特性，再充分发挥你的想象力，就可以实现各种类型的、特别有意思的移动应用。 PhoneGap是完全开放源代码的，你可以通过编写组件，实现任何原生设备特性的扩展。之后，还可以通过 PhoneGap 打包App，这样编写一次基础代码就可以将 App 部署到多个移动平台上。 如果希望了解更多PhoneGap的相关信息，可访问：http://phonegap.com/。 1.1.2PhoneGap的起源 随着 iOS、Android和Windows Phone 等手机移动平台的迅速发展，开发基于移动平台的手机应用App成为程序开发的新热点。作为一名网页开发者，当然也很想尝试独立开发App，但进入 App开发之前，却不得不面临两大难题。 第一个难题：网页开发者通常只熟知基本的Web 技术（HTML、CSS、JavaScript），而对于移动平台的App，必须使用各平台特定的语言进行开发。例如，想要开发 iPhone 的App，你必须使用Objective-C作为开发语言。同理，如果要开发Android的 App，你就要使用 Java语言。作为网页开发者来说，要想学习和使用基于C语言的 Objective-C语言和Java语言可不是一件轻松的事。而且，除了这两种比较流行的平台外，还有其他平台，同样也要用对应的语言才能进行App的开发。可以说学习与使用一门新的移动平台开发语言，是开发者首先要面临的最大难题。 第二个难题：如果开发的App只发布到一种平台上，必然无法覆盖足够的用户群。但如果要将App发布到多个平台上，可能就得先学习五六个平台开发语言，并且安装与配置不同平台的SDK和IDE工具包，这样才能对App进行开发与打包发布。这对于想将App进行多平台发布的开发人员来说，是一件特别麻烦的事情。 为了解决以上两大难题，PhoneGap诞生了。 1.1.3 PhoneGap的用途 PhoneGap 让我们可以使用 HTML、CSS、JavaScript 这些技术来开发多平台原生App，它的主要用途如图1-1所示。 图1-1 PhoneGap的主要用途 可以使用 HTML 5 与 CSS3 的新功能特性创建原生 App。例如，你可以利用 HTML 5 的Video 功能，轻松播放视频，也可以利用 CSS3 的 Transitions 新属性，创建动画。 可以使用 JavaScript 来编写你的代码。JavaScript 语言广为前端开发者熟悉与使用，PhoneGap 的核心代码也为 JavaScript ，这样，你无须学习新的开发语言，即可立即投入 App开发。 获得移动设备的原生特性。例如，地理定位、加速器、联系人、声音和振动等设备特性。 编写一次，即可将你的 App发布到iPhone、Android、BlackBerry、Windows Phone、WebOS等多个平台。 1.1.4 PhoneGap的发展现状及趋势 2009年4月，PhoneGap赢得 Web 2.0 Expo LaunchPad 比赛后，得到了Web开发者的广泛认可。其代码下载已经超过 600 000 次，目前有数以千计使用PhoneGap开发的App在不同的 App商店上可供下载。 其中，经典的案例如图1-2和图1-3所示，如你想了解更多案例，可访问：http://PhoneGap.com/APPs。 现在PhoneGap的代码已经贡献给了Apache软件基金会（ASF），并且改名为 Apache Cordova。这个名字来源于温哥华的科尔多瓦街（Cordova Street），它是创建PhoneGap时Nitobi公司的所在地。 目前，PhoneGap正在完善代码，其即将成为一个完整的 Apache 项目。通过ASF，PhoneGap未来将确保该项目会继续开放管理，并将在Apache的许可下一直保持自由和源码开放。 图1-2 Untappd 社交分享App 图1-3 Diary Mobile日常生活记录App PhoneGap 1.x 版本较之前的版本进行了模块化的改进，这将使其更加安全，并且拥有更优的性能。当前PhoneGap的最新版本为2.0.0，可以通过PhoneGap官网下载：http://phonegap.com/download。 1.2PhoneGap的优势与不足 1.2.1PhoneGap相比其他框架的优势 当前跨平台的移动App开发框架除了PhoneGap 以外，还有Titanium等也发展得较为成熟。为了更好地了解PhoneGap的优势，下面将Titanium与PhoneGap进行以下几个方面的对比。 （1）支撑平台 PhoneGap 支持当前大多数的主流平台，如 iOS、Android 、BlackBerry、Symbian、Palm、Windows Phone等；而Titanium 框架目前只支持 Android 和 iOS 平台。在跨平台这个特性上，PhoneGap的优势十分明显。 在平台支持方面，PhoneGap更注重支持平台的数量， Titanium则更注重提供接近于原生App的UI 效果，其自带 UI组件与原生平台的 UI 组件相仿，让开发的App看上去更像原生的App。 （2）代码可操控性 PhoneGap和Titanium均采用HTML + CSS + JavaScript 作为程序开发语言，并且对 HTML 5 与CSS3提供了良好的支持。但PhoneGap 包含了Titanium不具备的DOM特性，可以使用jQuery等第三方库，在代码操控灵活性与方便性上更胜一筹。 （3）测试方便性 PhoneGap 开发的App可以很方便地直接在浏览器中进行测试，而对Titanium 开发的App需要在Titanium IDE开发工具上进行测试。 （4）帮助文档可读性 PhoneGap提供完备的API帮助文档与相应的使用实例，让我们可以很方便地学习与使用API。相比之下，Titanium在这些方面稍微有些欠缺，在API方法的使用上没有具体的例子。 （5）使用许可度 相较于Titanium，PhoneGap在使用上有更多的自由。PhoneGap是基于Apache开源证书的纯粹的开源产品，而Titanium只有一部分基础功能的部件是免费的，而其他高级部件、Titanium Studio的附加功能和官方专业指导服务都需要付费。 综合比较以上几点，本书作者认为，作为开源框架，PhoneGap的优势更为明显与均衡，具有更好的发展前景。 1.2.2 PhoneGap的不足 “兼容性越强、成本越低的技术，其性能越差；兼容性越差、成本越高的技术，其性能越好。” 正如上面这条规则所示，PhoneGap 作为跨平台框架，有很多优点并且在开发上给我们带来了很多的便捷，但它也有不足的地方。它的不足之处主要体现在以下几个方面。 （1）运行效率 PhoneGap应用程序的运行是寄托于移动设备上各平台的内置浏览器webkit的，受到webkit处理速度影响，以及各个平台的硬件与软件的性能制约，其程序运行的速度会比原生的程序慢，在用户体验上较原生应用程序会稍差。 （2）不能完整调用原生API特性 PhoneGap应用程序对平台API的使用依赖于PhoneGap框架本身，目前还只支持各平台基础的API特性。对于各平台新升级发布或者特殊的 API 特性，只有依靠PhoneGap新版本的升级或插件来满足使用上的需求。例如，就目前来说，iOS平台上的应用内付费的功能特性只能使用插件来实现。 （3）平台界面差异化不足 PhoneGap 应用程序在所有平台上运行界面看起来都一样。即使这个应用程序与原生应用很相像，但对于习惯了iOS 与 Android 平台的用户来说，会觉得不习惯，他们还是会很快看出差异。 通过综合比较PhoneGap的优点与不足，我们认为，如果你想快速实现一般的移动WebApp或者普通的2D游戏，那么可以采用PhoneGap技术。如果你想要实现需要大量CPU计算的应用或者3D游戏，或者对用户体验及界面有极致的追求，考虑目前的硬件条件和开发成本，使用原生开发来实现比较适合。 1.3 Web开发速成 PhoneGap使用HTML+CSS+JavaScript进行开发，因此，在进行PhoneGap工具的学习之前最好对这3种语言有一定的了解。 1.3.1 HTML介绍 当前我们浏览的网页都是用HTML（HyperText Markup Language，超文本标记语言）编写的。利用HTML标签可以指示浏览器如何在网页上构建和展现文字、图形、动画、声音、表格、链接等元素。 1. HTML 5 HTML已出现了20多年，从最初的1.0版本已发展到了当前的5.0版本，HTML 5的使命是帮助网页设计人员和开发人员们开发强大的下一代网络应用程序。 HTML 5作为一种更为健壮与成熟的HTML版本，首先它规范并新增了标签，使到网页编码更语义化，写出来的页面代码一眼就能看出结构。除此之外，HTML 5 还新增了很多实用的功能，如HTML 5中的 [video] 标记等。在早期的网页中，视频并不是一个主要的部分，或者说根本没有。互联网用户只有安装了称为“插件”的额外软件后，才能在浏览器中观看视频。而现在，随着网络的发展，轻松观看视频已成了广大用户迫切需要实现的一项功能。利用 HTML 5中引入的 [video] 标记，我们就可以轻松地在网页中嵌入和播放视频，无须安装其他浏览器插件。 除了视频播放以外，HTML 5 还提供了离线功能（用户即使在没有网络连接的情况下，也能与网络应用程序互动），以及拖放等新功能。 HTML 5作为一种开放式标准， 在装有新一代浏览器的桌面设备和移动设备上都能良好运行。而 PhoneGap 也正是基于支持HTML 5的移动设备浏览器而得以实现App开发的。 可以说，在未来的几年里，HTML 5将在移动设备、桌面设备的应用开发中占据主导地位。 2. HTML 标签 HTML使用标记标签来描述网页，可以说是网页构成的基础框架。网页浏览器通过读取HTML标签将不同的标签渲染成相应的内容。例如，h标签，浏览器会将其渲染为标题显示出来； p 标签，浏览器会将其渲染为段落。HTML 的标记有几十个，具体内容可查阅相关帮助文档。 图1-4所示是一个使用最基本的HTML标签语言编写的网页。 图1-4 HTML标签语言编写的网页 图1-4所示网页的HTML 代码如下所示： [html] [body] [h1]我的第一个网页标题[/h1]
　　我的第一个网页段落
　　 [/body] [/html] 在上述代码中，[html] 与 [/html] 之间是网页所有内容，[body] 与 [/body] 之间是可见的网页内容，[h1] 与 [/h1] 之间的内容将显示为标题，
　　 与
　　 之间的内容将显示为段落。 想对 HTML有更进一步的了解，可访问：http://www.w3school.com.cn/html/index.asp。如果希望了解HTML 5中包含的新特性，可访问：http://www.w3school.com.cn/html5/index.asp。 1.3.2 CSS介绍 HTML通过[h1]、
　　、[div] 这样的标签只是定义了“这是标题”、“这是段落”、“这是层”之类的信息，但内容的样式外观，如标题的大小和颜色、段落的高度、层的位置等设置就需要引入 CSS（层叠样式表）来实现了。利用 CSS能对网页进行布局设计，对元素进行装饰，通过颜色、圆角、渐变和动画等设计元素可使网页拥有更丰富的表现力。如果用一栋房子来进行比喻的话，HTML可看做房子的框架根基，而CSS 可看做房子的外观的设置器，可完成各个物件的颜色、位置与大小等设计与装饰上的工作。 1. 样式定义及样式表 CSS的样式定义由两个主要的部分构成：选择器（selector），以及一条或多条声明（declaration），其形式如下： selector {declaration1; declaration2; ...;declarationN } 每条声明由一个样式属性（style attribute）和一个值组成，属性和值被冒号分开，其形式如下： selector { style attribute: value} 在如下代码中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 h1 {color: red; font-size: 14px;} 样式通常保存在外部的 .css 文件中，该文件称为样式表文件。通过编辑一个简单的外部样式表文件，能同时改变站点中所有页面的布局和外观。 例如，建立一个 style.css 样式表文件，并应用于如图1-4所示的HTML 例子中。 那么，在 HTML页的代码中，[html]标签与[body]标签之间将会新增使用样式表的语句，具体代码如下： [html] [link href="style.css" rel="stylesheet" type="text/css" media="screen" /] [body] [h1]我的第一个网页标题[/h1]
　　我的第一个网页段落
　　 [/body] [/html] 在上述代码中，增加了[link]模块。[link]标记指示我们将在HTML代码内嵌入外部文件，文件链接href为 style.css文件，文件属性rel为text/css（样式表），媒介meida为screen（计算机屏幕）。 新建style.css 文件，并在文件中添加如下代码： body { color: #fff; background: #000; } h1 { font-size:14px; color:red; } p { font-size:24px; font-weight:bold; } 在上述CSS代码中，body选择器将HTML代码中[body] 与 [/body] 标签之间的显示字体颜色设为白色(#fff)，背景颜色设为黑色(#000)；h1选择器表示将HTML代码中[h1] 与 [/h1] 标签之间显示的字体大小设为14像素，字体颜色为红色； p选择器表示将HTML代码中
　　 与
　　之间显示的字体大小设为24像素，字体样式设为加粗。应用了CSS的HTML网页显示效果如图1-5所示。与没有修饰页面元素的图1-4进行对比，可以更容易地理解CSS的作用。 2. CSS3 CSS 3 是 CSS的最新版本，它提供了一系列新的功能特性。 图1-5 应用了CSS的HTML网页 以CSS 3中的“-webkit-border-radius”（圆角属性）为例，设计师如果要让矩形块状元素以圆角呈现，以前只能通过嵌入圆角图片作为元素背景来实现，在实现过程中除了编写CSS代码以外还需要制作符合相关尺寸的背景图，每次修改都需要重新制作图片会十分不便。CSS 3中引入的新“-webkit-border-radius”属性，可以帮助只修改代码即实现上述效果，代码如下： [html xmlns="http://www.w3.org/1999/xhtml"] [head] [meta http-equiv="Content-Type" content="text/html; charset=utf-8" /] [title]CSS3 圆角矩形[/title] [!-- [style]标签将CSS内容内嵌在HTML代码内 --] [style] /* .box选择器描述了一个黑色背景、宽200像素、高120像素、外边距30像素的矩形 */ .box{ background:black; width: 200px; height: 120px; margin: 30px; } /* .round选择器使用圆角属性描述圆角半径大小为25像素 */ .round{ -webkit-border-radius:25px; } [/style] [/head] [body] [!-- 使用CSS中“box”选择器描述，绘制一个矩形 --] [div class="box"]s[/div] [!-- 使用CSS中“box”和“round”选择器描述，绘制一个圆角矩形 --] [div class="box round"]s[/div] [/body] [/html] CSS3实现圆角矩形效果如图1-6所示。 除此之外，CSS3还提供了其他一些很好的功能。例如，让我们可以轻松实现页面元素移动、变形等动画的Transforms 属性；通过获取设备平台信息，让我们能针对不同的平台设置不同的界面大小、布局、媒体查询等功能。可以说，CSS3让Web设计变得更加方便，更有效率。 图1-6 CSS3实现圆角矩形 想对CSS有更进一步的了解，可访问：http://www.w3school.com.cn/css/index.asp。 希望了解CSS3中包含的新特性，可访问： http://www.w3schools.com/css3/default.asp。 注意：目前，对CSS3和 HTML 5支持得最好的是 Chrome和 Safari，Firefox 3.6 和 Opera 10.5 则“旗鼓相当”，IE家族中只有IE9 支持。因此，要运行与查看 CSS3与HTML 5 网页效果，最好使用新一代的浏览器，在本书中我们推荐 Chrome。 1.3.3 JavaScript入门 JavaScript 是一种能让你的网页实时互动性更强的脚本语言，如网页内的点击按钮行为、图片浏览器、标签切换、提交表单检查报错等动态交互功能。可以说，JavaScript 让我们实现了动态网页的构想。 PhoneGap 的编程核心语言即为 JavaScript，它的语法简单清晰，非常容易理解。在进入 PhoneGap 开发之前，对 JavaScript 语言进行学习是不可或缺的环节。下面通过例子来对JavaScript有个简单的了解。 本例需要实现的功能是通过单击页面按钮，弹出一个显示“Hello World”的提示框。我们从建立一个包含按钮的HTML页面开始。 步骤1 创建一个空的 HTML文件，将其命名为 index.html，添加如下代码： [html] [head] [title]Hello World[/title] [/head] [body] Hello World Example!
　　 [!-- 创建一个id为btnAlert 的按钮 --] [button id="btnAlert"]Try me![/button] [/body] [/html] 在上述代码中，我们定义了一个 id 为 btnAlert 的按钮，其会在下面 JavaScript 中被用到。在Chrome 浏览器中，打开这个HTML页面，其显示效果如图1-7所示。 图1-7 基本的页面效果 步骤2 编写JavaScript 部分的代码在 [head] 标签与[title]标签之间增加 [script] 元素块并放置 JavaScript 代码，代码内容如下： [script] document.addEventListener("DOMContentLoaded", init, false); function init(){ document.getElementById("btnAlert").addEventListener("click", alertInfo, false); } function alertInfo(){ alert("Hello World!"); } [/script] 现在不用担心看不懂代码，我们会在JavaScript 代码解释部分对其进行讲解。 步骤3 保存文件，再次在Chrome中打开该文件，然后单击页面上的“Try me！”按钮，会看到出现一个提示框，其效果如图1-8所示。 图1-8 最终效果页面 现在我们详细讲解步骤2中的代码内容，先看一下相关知识点： addEventListener相当于一个“注册事件监听器”，它使用一个元素监听某个事件，当这个事件被触发之后就会去执行相关的动作。 addEventListener的使用方法如下所示： target.addEventListener(type, listener, useCapture) 其中，target 是需要注册的元素，如document、DOM 或 XMLHttpRequest。type是事件名称，如 click、mouseover、keydown等。listener是target响应到事件后触发的JavaScript 函数。useCapture 是标记是否使用捕捉，一般默认用 false 即可。 接下来，我们来看一下程序执行的流程。具体如下。 步骤1 编写程序的入口代码。 document.addEventListener("DOMContentLoaded", init, false); 上面代码表示的是为 document 元素注册监听 DOMContentLoaded 事件，当这个事件被触发时，将执行 init 函数。其中DOMContentLoaded 事件表示当监听到页面所有的DOM元素都渲染完成时，才执行相关方法（init函数），从而保证可以正确地调用页面内的所有DOM元素。 步骤2 创建初始化函数 init()，代码如下： function init(){ document.getElementById("btnAlert").addEventListener("click", alertInfo, false); } 上面代码表示的是对id名为btnAlert 的按钮注册监听 click (鼠标点击) 事件，当按钮被单击时，将执行alertInfo函数。其中，document.getElementById(id) 函数的功能是通过 DOM元素的id名来获得该元素，并将该元素作为一个对象使用。 步骤3 最后，创建 alertInfo函数，在单击按钮后会执行如下代码： function alertInfo(){ alert("Hello World!"); } alert函数，是 JavaScript 内建的方法，它的作用是弹出消息提示框，并可以预先设置要显示的信息。这样，通过 alert函数就可以显示包含“Hello World!”的提示框了。 以上步骤已成功利用 JavaScript实现了显示“Hello World!”的提示框。当然，这只是一个入门的代码，在随后的PhoneGap App程序编写章节中，将会更深入地学习JavaScript，也希望你能体验到 JavaScript 这门语言的乐趣。 注意：在上述例子中，是将 JavaScript 相关代码单独写在[Script]模块内的，而不是写在 Document Object Model (DOM ) 元素内的。特别是事件处理（如点击按钮事件），不要直接作为元素的属性定义在元素内。 很多JavaScript 的初学者写的第一个例子都是将代码写在DOM内，就像下面这个语句： [button id="likeMe" onclick="alertCompliment(); return false"]Tell me I'm great[/button] 这种写法，对于项目开发来说是非常不好的，因为一个最终成型的 PhoneGap App可能有成百上千行的代码，如果将事件处理写在元素内会给代码的阅读与维护带来很多麻烦。因此，从项目一开始，我们就应该规划好代码的组织结构，遵循模块分离原则，保证 JavaScript 只存在于 JavaScript 模块内，CSS 样式只存在于样式表内。 想对JavaScript有更进一步的了解，可访问： http://www.w3school.com.cn/js/index.asp 。 1.4 小结 本章首先介绍了PhoneGap的一些相关知识，包括PhoneGap基本概念，以及它的发展历史、现状与趋势，并初步了解了PhoneGap能做什么，PhoneGap与其他平台相比优势在哪，并且对到底是选择原生代码开发App还是用PhoneGap开发做了综合比较。接着对Web开发基础技术进行了初步的介绍，包括介绍了网页的构建基础（即HTML），最新版本HTML 5的新特性与功能；然后介绍了如何使用CSS对网页进行装饰；最后通过编写一个Hello World程序，让我们对JavaScript有了初步的接触与了解，并且掌握了一个重要的程序编写原则—模块分离原则，保证JavaScript 只存在于 JavaScript 模块内，CSS 样式只存在于样式表内，这可以使程序更容易阅读与维护。 通过对本章的学习，相信大家会对PhoneGap技术以及Web基础三大技术有了初步的了解，这将为接下来的学习打下坚实的基础。 在下一章中，我们将介绍PhoneGap 的安装和配置。 第2章安装和配置PhoneGap 有些开发者反映，在安装和配置PhoneGap时会遇到一些困难，那本章就来介绍一下在PhoneGap 的常用开发平台下几种移动系统开发环境的安装和配置方法。不过，如果你使用的是Dreamweaver 5.5及以上版本，那么可以跳过这一章，因为它可以快速地将HTML编写的Web程序打包成移动手机的原生应用，相关方法将会在后续章节中介绍。 2.1下载PhoneGap 我们可以在PhoneGap 官方网站获得最新安装包。访问http://PhoneGAP.com/download/ 下载最新版本，下载页面如图2-1所示。 图2-1PhoneGap 下载页面 虽然PhoneGap 的版本更新速度很快，但是安装与配置过程却大同小异。本书大部分范例中使用的版本为PhoneGap 2.0.0。 2.2配置PhoneGap 2.2.1配置PhoneGap 到iOS 步骤1安装必要软件。 首先需要获得苹果公司开发者认证，然后才能下载安装Xcode 开发工具。 要获得苹果公司开发者认证可访问： http://www.apple.com.cn/developer/programs/ios/。 下载Xcode开发工具可访问： http://www.apple.com.cn/developer/technologies/tools/index.html。 步骤2安装Xcode的命令行工具。 如图2-2所示，在Xcode菜单栏依次单击“ Preferences” →“ Downloads”，然后再依次单击“Components” → “Command Line Tools” →“ Install”。 图2-2安装Command Line Tools 步骤3解压安装PhoneGap 。 解压下载的PhoneGap 包，进入lib/ios目录，如图2-3所示。 图2-3解压PhoneGap 后进入lib/ios目录 双击打开图2-3中所示的Cordova-2.0.0.dmg包，打开后如图2-4所示，将其中名为bin的文件夹复制到计算机硬盘的任意位置，本例复制到了桌面。 图2-4Cordova-2.0.0.dmg包 这时，确保Xcode软件是关闭的。然后双击图2-4所示的文件Cordova-2.0.0.pkg，开始安装，如图2-5所示。 图2-5开始安装 在后继各界面中，全部单击“继续”按钮就可以将PhoneGap 安装完成。 步骤4建立新的项目。 PhoneGap 2.0.0版本提供了批处理文件功能，这简化了安装部署新项目的流程，方法如下： 将刚才复制的bin目录直接拖入“终端”程序（菜单中选择实用工具，可找到终端）将其打开，或者打开终端进入bin文件夹，运行如下格式的命令： ./create [项目目录] [项目ID] [项目名称] 其中[项目目录]为项目的存储目录，这里存放在 ~/Desktop/mycode/HelloWorld。[项目ID]为公司标识及项目ID。上架（发布到App应用商店）是一个关键参数，上架时要填写和官网一样的参数，具体内容可参考第7章，这里输入的是org.adc.HelloWorld。[项目名称]为这个项目的名字，这里输入的是HelloWorld。 代码如下： ./create ~/Desktop/mycode/HelloWorld org.adc.HelloWorld HelloWorld 运行效果如图2-6所示。 图2-6执行bin目录下的create命令完成插件部署 这时进入刚刚输入的项目目录，本例是~/Desktop/mycode/HelloWorld。双击打开图2-7中所示的HelloWorld.xcodeproj项目文件。 图2-7打开xcodeproj项目文件 在打开的Xcode程序中，应该可以看到刚刚通过命令新建的HelloWorld项目已经在Xcode中了，如图2-8所示。 步骤5完成部署。 如图2-9所示，单击左上角的“Run” 按钮，稍候会弹出设定的iPad/iPhone 模拟器，并且显示图2-10所示的程序运行成功界面。 图2-8在Xcode中可以看到新建的HelloWorld项目 图2-9单击“Run”按钮运行模拟器 图2-10完成部署 步骤6测试HelloWorld。 打开并编辑www目录下的index.html文件，将如下代码替换至文件并保存。 [!DOCTYPE html] [html] [head] [title]test[/title] [meta charset="utf-8"/] [script type="text/javascript"charset="utf-8"src="cordova-1.5.0.js"][/script] [/head] [body] [h1]Hello World！！[/h1] [/body] [/html] 再次单击Xcode左上角的“Run”按钮，可以在模拟器中看到图2-11所示的结果。 图2-11运行结果 2.2.2配置PhoneGap 到Android 配置PhoneGap到Android的步骤如下。 步骤1安装必要软件。 首先需要确定已经在PC中安装好了Java环境，然后才能安装Eclipse 3.4及其 以上版本，本书将以Eclipse Classic 3.7.2为例介绍相关内容。 如果要下载Eclipse Classic，那么可以访问：http://www.eclipse.org/downloads/。 解压下载的Eclipse压缩包后双击目录中的eclipse.exe文件运行程序，如是是第一次打开，那么会弹出询问存储项目的主目录，如图2-12所示。 图2-12询问存储项目的主目录 设定好存储目录后，可以选中下面的“Use this as the default and do not ask again”（不再弹出此窗口）复选框，然后单击“OK”按钮即可进入程序。 然后，访问http://developer.android.com/sdk/index.html下载Android SDK启动包，并将下载的压缩包解压到D:\Android\android-sdk，如图2-13所示。 图2-13解压压缩包 双击运行SDK Manager.exe，然后打开Android SDK Manager下载最新的目录，如图2-14所示。 图2-14打开Android SDK Manager 待进度条走完，目录也就更新完毕了。单击图2-14右下角的“Install packages” 按钮，下载并安装默认勾选的内容，注意检查一下，要勾选Android 2.2(API 8)分类下的所有内容。这一步骤中要下载的内容大概有1~2GB，因此下载过程比较长，请耐心等待。 接下来安装Eclipse 的ADT插件，这个插件是连接Eclipse和PhoneGap 的桥梁。从Eclipse菜单中选择“Help”，单击“Install New Software…”，如图2-15所示。 图2-15Eclipse中的Help菜单 在打开的“Install”窗口右侧单击“Add”按钮，如图2-16所示。 图2-16 “Install”窗口 弹出“Add Repository”窗口，在“Name”中输入 “ADT Plugin”，在“Location”中输入“https://dl-ssl.google.com/android/eclipse/”，然后单击“OK”按钮，如图2-17所示。 图2-17弹出的“Add Repository”窗口 之后会回到图2-16中，此时需要保持网络畅通， Eclipse将会从网络更新列表，下载完成后单击“Select All” 按钮选中全部，然后单击“ Next”按钮，如图2-18所示。 图2-18 “Install”窗口自动下载目录 在弹出的窗口中选择同意，将会开始安装，如图2-19所示。 图2-19开始安装 安装完成之后会弹出一个窗口，要用户选择是下载安装Android SDK，还是给出指定Android SDK的目录位置进行安装，这里由于之前已经下载了Android SDK，所以选择“Use existing SDKs”指定目录位置，然后单击“Next”按钮，如图2-20所示。 图2-20指定SDK目录位置 在下一步中单击“ Finish”按钮完成Eclipse 的程序配置。 步骤2建立新的项目。 下面开始创建一个Android项目，并且配置PhoneGap 到Eclipse 中，这里同样以传统的HelloWorld为例进行说明。在Eclipse菜单中选择“ New” 目录下的“Project”，在弹出的“New Project”窗口中，选择“Android Application Project”，单击“Next”按钮继续，如图2-21所示。 图2-21“New Project”窗口 在弹出的“New Android App”窗口中的“Application Name”、“Project Name”后分别输入对应的应用名及项目名“HelloWorld”，修改“ Package Name”后的内容为“org.adc.helloworld”，其中adc为组织，“Build SDK”及“Minimum Required SDK”后选择对应的Android 版本，如图2-22所示，单击“Next”按钮继续。 图2-22“New Android App”窗口 制作图标，上传或选择你的应用图标样式，这里选择的是默认图标，如图2-23所示，单击“Next”按钮继续。 图2-23选择制作图标 通过向导创建一个新活动，这里直接使用默认设置，如图2-24所示，单击“Next”按钮继续。 修改属性并单击“Finish”按钮完成操作，如图2-25所示。 这时，一个Android项目就创建完成了。 图2-24新建空白活动 图2-25修改属性并单击“Finish”按钮完成操作 步骤3将几个必要的文件复制到HelloWorld项目中。 这里需要进入上文中在启动Eclipse 时选择的主目录，在 HelloWorld 项目下的assets目录中创建www目录 。 在Eclipse左侧项目列表的HelloWorld项目中，在HelloWorld根目录下的assets目录上单击鼠标右键，选择 “New”→“Folder” , 在弹出的“New Folder”窗口的“Folder name”（目录名称）中输入“www”，单击“Finish”按钮完成操作。最终目录结构如图2-26所示。 图2-26最终目录结构 进入PhoneGap 的lib/android目录，复制cordova-1.x.x.js （x是版本号，这里用的是2.0.0版本，可根据下载的版本做相应修改）文件到HelloWorld/assets/www 目录下；复制cordova-1.x.x.jar文件到HelloWorld /libs 目录下；复制 xml目录到 HelloWorld/res目录下。复制文件后的目录结构如图2-27所示。 图2-27复制文件后的目录结构 到此，文件就已经复制完毕了。 步骤4为了完成配置，并正确编译文件，还需要对项目的Java文件做一些修改。 打开Eclipse内的src目录，使用鼠标右键单击helloworld.java文件，选择“Open With”→“Text Editor”，以文本的方式打开文件。 将类的继承由Activity改为DroidGap，之后将“setContentView(R.layout.main)；”替换成“super.loadUrl("file:///android_asset/www/index.html")；”，添加“import org.apache.cordova.*；”，删除“import android.app.Activity；”。修改后的代码如下： package org.adc.helloworld; import android.os.Bundle; import org.apache.cordova.*; public class MainActivity extends DroidGap { /** 程序初始化调用的内容 */ @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } } 修改完成后发现Eclipse报错且找不到cordova，可通过下面的方法来解决这个问题。 使用鼠标右键单击libs目录，在弹出的快捷菜单中选择“Build Path” →“Configure Build Path”。在弹出的“Properties for HelloWorld”（HelloWorld属性）窗口中选择“Libraries”（库）标签页，如图2-28所示。 图2-28HelloWorld属性窗口 单击“Add JARs…”（添加JARs）按钮，在弹出的窗口中选择libs目录下之前复制的cordova-2.0.0.jar文件，然后单击“OK”按钮，如图2-29所示。 图2-29选择 cordova-2.0.0.jar并添加到库 这样就可以在“Properties for HelloWorld”窗口中看到cordova-2.0.0.jar文件添加成功了，如图2-30所示。 图2-30cordova-2.0.0.jar文件添加成功 单击“OK”按钮退出窗口，然后按键盘上的[F5]键刷新，程序不再提示找不到cordova文件的错误。 接下来使用鼠标右键单击AndroidManifest.xml，在弹出的快捷菜单中选择“Open With” → “Text Editor”以打开文件，在[uses-sdk.../]和[application.../]标签之间插入如下的权限控制代码： [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"/] [uses-permission android:name="android.permission.GET_ACCOUNTS"/] [uses-permission android:name="android.permission.BROADCAST_STICKY"/] 在[activity]标签中添加如下一行代码： android:configChanges="orientation