PhoneGap实战[按需印刷]

2.2　配置PhoneGap / 15
2.2.1　配置PhoneGap 到iOS / 15
2.2.2　配置PhoneGap 到Android / 19
2.2.3　配置PhoneGap到BlackBerry / 31
2.2.4　配置PhoneGap 到webOS / 34
2.2.5　配置PhoneGap 到Symbian / 36
2.3　小结 / 37
第3章　编写第一个PhoneGap应用—汇率计算器 / 38
3.1　汇率计算器功能概述 / 38
3.2　创建程序 / 39
3.3　配置程序界面 / 40
3.3.1　引入相关文件 / 40
3.3.2　制作程序界面 / 40
3.4　给程序添加功能逻辑 / 46
3.5　在模拟器中测试程序 / 51
3.6　在手机上测试程序 / 52
3.6.1　生成iPhone应用 / 52
3.6.2　生成Android应用 / 53
3.7　小结 / 53
第二篇　基　础　篇
第4章　PhoneGap API详解 / 56
4.1　PhoneGap API简介 / 56
4.2　使用PhoneGap API前的准备 / 57
4.3　本地事件处理 / 57
4.3.1　deviceready / 57
4.3.2 pause / 58
4.3.3 resume / 59
4.3.4 online / 60
4.3.5 offline / 61
4.3.6 backbutton / 61
4.3.7 batterycritical / 62
4.3.8 batterylow / 63
4.3.9 batterystatus / 64
4.3.10 menubutton / 65
4.3.11 searchbutton / 66
4.3.12 startcallbutton / 67
4.3.13 endcallbutton / 68
4.3.14 volumedownbutton / 69
4.3.15 volumeupbutton / 69
4.4 加速计传感器 / 70
4.4.1 获取加速计传感器的坐标位置 / 70
4.4.2 周期性获取加速计传感器的坐标位置 / 71
4.4.3 停止监视加速计传感器的坐标位置 / 73
4.5 使用设备摄像头 / 74
4.6　多媒体采集 / 77
4.6.1　使用capture对象录制视频 / 77
4.6.2 使用capture对象获取图片 / 79
4.6.3 使用capture对象录制语音 / 80
4.7 侦测设备屏幕朝向—指南针 / 82
4.7.1 获取指南针当前朝向 / 82
4.7.2 在固定的时间间隔获取设备朝向的角度 / 83
4.7.3 停止WatchID参数指定的指南针监听 / 84
4.7.4 当指南针改变度数时获取朝向度数 / 86
4.7.5 停止watchID参数指定的指南针朝向度数的监听 / 87
4.8　获取网络连接状态 / 88
4.9　访问手机通讯录 / 89
4.9.1　创建一个新的联系人 / 89
4.9.2 查询联系人 / 90
4.9.3　处理联系人信息 / 91
4.10　获取设备信息 / 93
4.10.1　获得设备的型号名称 / 94
4.10.2　获取设备上正在运行的PhoneGap版本信息 / 94
4.10.3　获得设备使用的操作系统名称 / 95
4.10.4　获得设备的全球唯一标识 / 95
4.10.5　获得操作系统的版本号 / 95
4.11　文件系统处理 / 96
4.11.1　File / 96
4.11.2　FileReader / 96
4.11.3　FileWriter / 99
4.11.4 FileSystem / 102
4.11.5 FileEntry / 103
4.11.6 DirectoryEntry / 106
4.11.7 DirectoryReader / 111
4.11.8 FileTransfer / 112
4.12 使用设备传感器的GPS地理位置服务 / 115
4.12.1 获得当前地理位置 / 115
4.12.2 监测设备的位置变化 / 116
4.12.3 停止监听设备的位置变化 / 117
4.13 播放和录制音频 / 118
4.13.1 获得音频文件的当前位置 / 118
4.13.2 获得音频文件总时长 / 120
4.13.3 开始或者继续播放音频文件 / 121
4.13.4 暂停播放音频文件 / 123
4.13.5 释放音频资源 / 124
4.13.6 停止播放音频文件 / 125
4.13.7 在音频文件中跳到指定位置 / 127
4.13.8 启动录制音频文件 / 127
4.13.9 停止录制音频文件 / 129
4.14　消息提示 / 130
4.14.1　警告框 / 130
4.14.2 确认框 / 131
4.14.3 蜂鸣 / 132
4.14.4 振动 / 133
4.15 客户端数据存储 / 134
4.15.1 openDatabase / 134
4.15.2 Database / 135
4.15.3 SQLTransaction / 137
4.15.4 SQLResultSet / 138
4.15.5　SQLResultSetList / 140
4.15.6 SQLError / 142
4.15.7 localStorage / 142
4.16 小结 / 143
第三篇　实　战　篇
第5章　“指南针”应用程序 / 146
5.1　指南针应用简介及功能概述 / 146
5.2　利用PhoneGap创建指南针应用程序 / 146
5.2.1　主流平台指南针应用程序介绍 / 146
5.2.2　创建PhoneGap指南针程序 / 147
5.2.3　指南针程序UI界面 / 150
5.2.4　程序代码及逻辑讲解 / 150
5.2.5　导出应用程序 / 155
5.2.6　在手机上测试应用程序 / 158
5.3　小结 / 159
第6章　“万圣节更衣室”应用程序 / 160
6.1　设置项目 / 160
6.2　配置程序界面 / 161
6.2.1　程序界面介绍 / 161
6.2.2　程序界面分辨率说明 / 162
6.2.3　程序界面图片素材配置 / 163
6.3　界面HTML与CSS编写 / 163
6.3.1　基础代码 / 163
6.3.2　开始页 / 164
6.3.3 文本输入页 / 166
6.3.4 摇晃监测页 / 167
6.3.5 结果页 / 169
6.3.6 HTML与CSS最终代码 / 170
6.4 程序编写 / 172
6.4.1 界面切换功能 / 172
6.4.2 文本输入页功能 / 175
6.4.3 摇晃监测页功能 / 177
6.4.4 结果页功能 / 184
6.4.5 退出程序功能 / 188
6.4.6 最终代码 / 189
6.5 打包与测试 / 193
6.5.1 打包生成APK文件 / 193
6.5.2 测试运行 / 195
6.6 小结 / 196
第四篇　提　高　篇
第7章　发布应用程序 / 198
7.1　将程序提交到App Store / 198
7.1.1　向Apple注册 / 198
7.1.2　准备应用程序的发行版本 / 207
7.1.3　提交App / 218
7.2　将Android应用程序提交到移动应用程序市场 / 222
7.2.1　注册成为开发者 / 222
7.2.2　提交App / 225
7.3　小结 / 225
第8章　移动应用的产品设计 / 226
8.1　Android和iPhone的产品设计差异 / 226
8.1.1　功能定义阶段 / 226
8.1.2　构架交互阶段 / 227
8.1.3　改进细化阶段 / 229
8.1.4　输出产品阶段 / 230
8.2　统一化与差异化 / 231
8.2.1　视觉风格的统一 / 231
8.2.2　交互设计的差异化 / 232
8.3　交互体验的重要性 / 234
8.3.1　什么是交互设计 / 234
8.3.2　交互设计的重要性 / 234
8.3.3　如何进行交互设计 / 237
8.4 WebApp与原生App / 239
8.4.1　WebApp和原生App的对比 / 239
8.4.2 如何选择WebApp和原生App / 240
8.5　利用HTML 5和JavaScript编写交互动画 / 241
8.5.1　利用Adobe Edge创建一个新的项目 / 241
8.5.2　创建带缓动的渐入HTML动画 / 243
8.5.3　创建循环动画效果 / 245
8.5.4　创建按钮完成应用界面的跳转 / 246
8.5.5　导出HTML动画 / 247
8.6　小结 / 249
第9章　PhoneGap与jQuery Mobile的结合使用 / 250
9.1　jQuery简介 / 250
9.2　了解jQuery Mobile / 252
9.3　使用jQuery Mobile / 252
9.4　PhoneGap与jQuery Mobile / 255
9.5　小结 / 255
第10章　PhoneGap的插件 / 256
10.1　如何使用PhoneGap插件 / 256
10.2 小结 / 260

.　　致谢
　　首先，感谢刘曜在本书的编写过程中对我们的指导和帮助，同时感谢腾讯CDC在交互设计上给予的支持。此外，还要感谢PhoneGap中国社区的创始人兼资深互联网产品策划人周建伟先生在社区发出了这本书的写作邀请，并为本书的写作提供了宝贵的建议。
　　

.　　图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>
　　<p>我的第一个网页段落</p>
　　</body>
　　</html>
　　在上述代码中，<html> 与 </html> 之间是网页所有内容，<body> 与 </body> 之间是可见的网页内容，<h1> 与 </h1> 之间的内容将显示为标题，<p> 与 </p> 之间的内容将显示为段落。
　　想对 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>、<p>、<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>
　　 <p>我的第一个网页段落</p>
　　</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代码中<p> 与 </p>之间显示的字体大小设为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