描述
开 本: 32开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302470670丛书名: 跨平台移动开发丛书
本书分3篇共16章，*篇是入门篇，包括了Cordova的小伙伴们、在安卓和iOS开发环境下的配置、对HTML 5前景的简单介绍。第二篇是基础知识篇，包含了本地事件设备信息、通讯录、加速度传感器、设备传感器、音频、文件、多媒体资源等Cordova中API的实例。第三篇是项目实战篇，包括简单的游戏（Flappy Bird）、新闻客户端，以及结合jQuery Mobile制作的号码本。
本书内容详尽、实例丰富，适合Cordova跨平台APP开发的初学者，尤其是在校学生，以及有意在互联网时代捞到*桶金的创业者。
目 录
篇 入 门 篇
第1章 初步了解Cordova 3
1.1 认识Cordova 3
1.1.1
Cordova的发展 3
1.1.2
Cordova的特色 4
1.1.3
Cordova的优势 6
1.2
Cordova的小伙伴们 7
1.2.1
jQuery Mobile 7
1.2.2
jQuery Touch 8
1.2.3
jQ iPhone UI 9
1.3 小结 9
第2章 Cordova入门 10
2.1 开发环境的搭建 10
2.1.1
安卓开发环境的搭建 10
2.1.2
iOS开发环境的搭建 17
2.1.3
Cordova的配置 19
2.2 跨平台的HTML 5 21
2.3 更好玩的CSS 3 22
2.4 完美兼容浏览器的jQuery框架 24
2.5 小结 25
第3章 开始前的准备 26
3.1
HTML 5，你真的准备好了吗 26
3.2
HTML 5的若干练习 29
3.2.1
实现渐变的背景和圆角的按钮 29
3.2.2
利用JavaScript响应用户的操作 32
3.2.3
利用CSS 3生成动画 34
3.2.4
利用JavaScript让“流氓兔”跑步 37
3.3 关于界面设计 39
3.4 使用jQuery
Mobile进行界面制作 42
3.5 编辑器的选择 45
3.6
Cordova中的API能干什么 46
3.7 小结 48
第二篇 基础知识篇
第4章 Cordova的本地事件 51
4.1 什么是生命周期 51
4.1.1
Activity的生命周期 51
4.1.2
通过实例体验Activity的生命周期 53
4.1.3
Cordova的生命周期 55
4.2 使用程序加载事件 57
4.3 使用被动消息事件 60
4.4 使用主动消息事件 63
4.5 小结 65
第5章 设备信息的获取 66
5.1
Cordova获取设备信息 66
5.2
device类的异常情况 68
5.3 实战：用Cordova制作一个简单的应用 69
5.3.1
界面设计及实现 69
5.3.2
为应用加入功能 73
5.4 小结 76
第6章 通讯录信息的获取 77
6.1 创建一个Contact对象 77
6.2 利用find()方法查询通讯录 79
6.3
Contact对象的属性 81
6.4 联系人的创建、读取、修改和删除 84
6.5
ContactField对象的深入研究 87
6.6 小结 89
第7章 Cordova的消息提示 90
7.1
notification警告的使用 90
7.2
notification确认对话框的使用 92
7.3
notification显示可以传递变量的对话框 94
7.4
notification控制蜂鸣器和震动 96
7.5 小结 97
第8章 加速度传感器 98
8.1 获取当前的加速度 98
8.2 监视设备的加速度 100
8.3 详解acceleration对象 103
8.4 加速度传感器的使用 103
8.4.1
游戏 103
8.4.2
抽奖 104
8.4.3
更多更强大的交互 104
8.5 实战：制作“马上有一切”的动画 104
8.5.1
原形设计 105
8.5.2
素材准备 105
8.5.3
动画实现 106
8.5.4
终实现 110
8.6 小结 114
第9章 设备传感器 115
9.1 利用Geolocation类获取设备地理信息 115
9.2 利用getCurrentPosition()方法获取设备所在坐标
116
9.3 使用watchPosition()方法监控设备的位置变化
119
9.4 设备方向的获取 122
9.5 监视设备方向的两种方法
124
9.6 小结 128
第10章 Cordova对音频的控制 129
10.1
利用Cordova播放音频的方法 129
10.2
利用pause()方法暂停播放音乐 131
10.3
利用stop()方法停止播放音频文件 133
10.4
获取音频文件的更多信息 135
10.5
播放指定位置的音乐 138
10.6
使用Cordova录制声音 140
10.7
释放音频资源 143
10.8
实战：制作一个简单的“录音机”软件 143
10.8.1
需求分析 143
10.8.2
界面实现 144
10.8.3
界面交互的实现 150
10.8.4
录音和播放功能的实现 153
10.8.5
终的组合 155
10.9
小结 157
第11章 Cordova中的文件操作 158
11.1
使用FileReader读取文件 158
11.2
使用FileWriter编写文件 163
11.3
使用FileSystem获取文件系统信息 168
11.4
FileEntry类简介 169
11.5
DirectoryEntry类的简介 174
11.6
使用FileTransfer向服务器上传文件 178
11.7
其他与文件系统相关的类 181
11.8
小结 185
第12章 多媒体资源的捕获 187
12.1
声音的采集 187
12.2
图像信息的采集 191
12.3
视频的采集 195
12.4
鸡肋的MediaFileData对象 196
12.5
小结 197
第13章 Cordova本地存储的使用 198
13.1
HTML 5中的本地存储功能 198
13.1.1
为什么需要本地存储 198
13.1.2
HTML 5的本地存储 199
13.2
Cordova中的本地存储功能 201
13.3
数据库的使用 202
13.4
数据库内容的读取 207
13.5
键值对的使用方法 210
13.6
小结 212
第三篇 项目实战篇
第14章 打造一款类Flappy
Bird的小游戏 215
14.1
需求分析 215
14.2
模型建立 217
14.3
界面设计 219
14.4
游戏的设计和实现 223
14.4.1
“像素鸟”的飞行 223
14.4.2
“像素鸟”的跳跃和下落 225
14.4.3
碰撞检测功能 229
14.5
界面的美化 232
14.6
缺陷和不足 233
14.6.1
玩法上的缺陷 233
14.6.2
功能上的贫乏 234
14.6.3
人机交互不友好 234
14.7
小结 235
第15章 实战Cordova新闻应用 236
15.1
项目开始前的“闲言碎语” 236
15.2
项目需求 238
15.3
界面设计和实现 238
15.3.1
新闻列表的设计和实现 238
15.3.2
新闻内容页的实现 241
15.3.3
界面的进一步整合 246
15.4
利用Ajax获取服务器上的信息 248
15.4.1
Ajax的一个简单实例 248
15.4.2
JavaScript跨域解决方法 250
15.4.3
服务端的实现 252
15.5
让数据显示出来 256
15.5.1
新闻列表的显示 256
15.5.2
新闻内容的显示 258
15.5.3
终的整合 259
15.6
小结 263
第16章 实战Cordova制作号码本 264
16.1
项目介绍 264
16.2
为Cordova编写插件 265
16.2.1
实现发短信的插件 265
16.2.2
为Cordova编写电话拨号插件 271
16.3
界面设计 272
16.4
界面的实现 274
16.4.1
联系人列表的实现 274
16.4.2
新建联系人界面的实现 276
16.4.3
短信编辑界面的实现 277
16.5
界面功能的实现 279
16.5.1
联系人数据的生成 279
16.5.2
页面的整合 284
16.6
终功能的实现 289
16.7
小结 290
本章的主要内容有： 使用getCurrentPosition()方法获取设备在当前所处的坐标位置。 利用watchPosition()方法对设备所处的坐标位置进行监听。 使用getCurrentHeading()方法获取设备当前的朝向。 利用watchHeading()方法监听设备的朝向。9.1 利用Geolocation类获取设备地理信息GPS是现代智能手机中一个非常重要的功能，能够实现全球范围内对设备的实时定位，近几年来在一些社交应用中也经常见到它发挥作用。比如微信的“摇一摇”功能就利用了GPS来获取用户的地理位置。图9-1是微信利用GPS获取两用户之间距离的一个例子。 图9-1 微信通过GPS计算用户之间的距离Cordova利用类Geolocation来获取设备所在地理位置的坐标。对于一些不支持GPS的设备，Geolocation类还可以借助IP地址、RFID、Wi-Fi、蓝牙的MAC地址或GSM/CDMA手机ID的网络信号做出推断，以保证其兼容性。虽然基于IP地址、GSM基站等方法都可以保证返回设备所在地理位置的经度和纬度，但是这样得到的结果却不一定准确。在实际开发时仍要充分考虑到不支持GPS的设备可能存在的误差。9.2 利用getCurrentPosition()方法获取 设备所在坐标在Geolocation类中，基本的方法就是getCurrentPosition()了，它的作用是通过一个Positon对象来返回设备所在的位置信息。范例9-1是使用getCurrentPosition()方法的一个例子。首先在命令行执行命令添加插件:cordova plugin add cordova-plugin-geolocation。【范例9-1】使用getCurrentPosition()方法获取设备位置信息。01 02 03 04 05
获取当前位置信息
40
41
你的当前位置：
42
经度：
43
纬度：
44
海拔高度：
45
精度：
46
海拔准确度：
47
航向：
48
速度：
49
时间：
50 51 运行后设备上将显示出当前所处的位置信息，如图9-2所示。 图9-2 使用getCurrentPosition()获取当前的位置信息本范例使用了方法getCurrentPosition()来获取设备所处的位置信息，如第12行所示。与其他Cordova所提供的API相似，该方法同样是将处理成功和失败的两个方法onSuccess和onError作为参数。不过在onSuccess()方法中默认会传送一个position对象，该对象保存了两个子对象coords和timestamp。其中coords封装了一系列与设备当前所处地理位置有关的信息，比如经度、纬度、海拔等。timestamp对象则只是单纯地记录了coords对象被创建的时间。表9-1中是coords对象中所包含的各个属性以及它们的含义。表9-1 coords对象中封装的属性名称 类型 说明latitude 数字 以十进制小数表示的纬度信息longitude 数字 以十进制小数表示的经度信息altitude 数字 海拔高度，单位为米accuracy 数字 经度和纬度的精确度altitudeAccuracy 数字 海拔高度的精确度heading 数字 当前设备运动状态，以正北为零点显示当前运动方向与正北方向的角度speed 数字 以米/秒为单位显示当前设备运动的速度第16~23行可以看到这些属性的使用，需要注意的是timestamp并不只是单纯的以小时来记录coords被创建的时间，其中还包含了年、月以及所处的时区等信息。在Cordova中并不是单纯地使用从GPS中获取的数据来显示位置信息的，当GPS不可用时，Cordova还会利用网络甚至是与基站的通信来判断当前的位置。因此即使在不具备GPS功能的设备上也可以使用该功能。9.3 使用watchPosition()方法 监控设备的位置变化本节将介绍一种与上一节中的getCurrentPosition()方法具有类似功能的方法，只不过它能够对设备的位置信息进行连续监控。看到这一点不知道读者有没有联想到什么？没错，那就是在上一章介绍过的加速度传感器，也有着类似的方法用来监视设备加速度的变化。范例9-2中展示了watchPosition()方法的使用。【范例9-2】使用watchPosition()方法监视设备的位置变化。01 02 03 04 05
获取当前位置信息
47
48
你的当前位置：
49
经度：
50
纬度：
51
海拔高度：
52
精度：
53
海拔准确度：
54
航向：
55
速度：
56
时间：
57 58 通过范例不难看出，该方法与在上一节中介绍过的getCurrentPosition()方法在用法上非常类似，只是增加了一个参数option。那么参数option又是干什么的呢？从Cordova提供的文档中可以了解到，这里的option实际上是一个geolocationOptions类型的可选参数，用来定义对程序获取位置信息的一些设置。它的具体属性以及说明参见表9-2。表9-2 option对象中的属性名称 类型 说明frequency 整数型 用来定义获取设备位置信息的频率，单位是毫秒enableHighAccuracy 布尔类型 提供一个表明应用程序希望获得可能结果的提示，可以理解为是否希望使用高精确度的定位timeout 整数型 两次获取设备位置信息所允许的时间间隔，单位为毫秒maximumAge 整数型 应用程序将接受一个缓存的位置信息，该缓存的位置信息的年龄不大于此参数设定值，单位是毫秒。实际上maximumAge属性的出现是由于初对frequency的定义不符合W3C规范，因此设计了这个参数计划在将来用它来取代frequency。如果说watchPosition()的用法就只有这些，也许已经足够了；但是在某些应用上却可能会有一些瑕疵，比如当用户想要停止获取设备位置时该怎么办呢？总不可能让用户去“后台”强行关闭掉程序吧。事实上还有一个方法是笔者没有介绍到的，那就是在范例第33行用到的clearWatch()方法。该方法只需要一个参数，就是当前所监视位置信息所使用的id，那么这个id又是从哪里来的呢？再回过头来看范例第14行。在watchPosition()方法开始执行时会返回一个id数值，而在本范例中将这个数值保存在了变量watchID中，因此当想要停止对设备位置的监控时只需要执行：navigator.geolocation.clearWatch(watchID);说到这里，笔者突然想到了一种非常不错的表白方法，读者可以去尝试一下，当然还是利用本节中介绍的watchPosition()方法来实现。既然能够利用watchPosition()方法实现对设备位置信息的获取，那么如果把具有同样类型的应用装在女神的手机里会怎样呢？当然这不是教唆读者利用这种方法去监视女神的动态，然后半路拦截；而是有更加浪漫的方法。既然能够获取女神的位置了，是不是可以将这些坐标在屏幕上显示出来呢？那么如果拿着女神的手机在田野里绕着一个心形的图案跑一圈屏幕上是不是就会显示出一个心形呢？好了，话就说这么多，能不能成功就看各位读者的动手能力了。9.4 设备方向的获取本章前面的内容介绍了怎样获取设备的位置信息，不知道读者在学完了这些内容之后，有没有考虑过这些API能够实现什么样的功能呢？反正笔者当时思考了很久，结果近乎荒诞地想到了指南针。这是一个非常愚蠢的想法，因为从坐标信息到方向信息完全是两个不搭边的功能。但是这也说明了一个问题，指南针作为移动设备在地理信息方面的应用实在是太深入人心了，如图9-3所示的就是一款指南针应用的界面。 图9-3 一款指南针应用的界面有过开发应用经验的读者可能都知道，想要开发一个具有动画效果（如指南针的转动）的应用是很难的，但是如果用HTML 5就能够比较轻松地实现这样的动画效果。那么是不是可以用Cordova来实现一款指南针呢？答案是肯定的。如果要实现指南针的功能，就必须要有能够获取设备方向的API，这正是在本节所要介绍的内容。首先在命令行执行命令添加插件:cordova plugin add cordova-plugin-device-orientation。【范例9-3】利用getCurrentHeading()方法获取设备的当前朝向。01 02 03 04 05
显示当前的方向
27 28 运行结果如图9-4所示，得出的结果是笔者的手机所朝的方向。 图9-4 手机上获取了当前设备方向读者在使用Cordova的指南针功能时一定要在真机上进行测试，否则会获取失败。getCurrentHeading()方法的使用与其他Cordova中的API非常类似，依然是在回调函数onSuccess中对获取到的结果进行处理。该方法传递来的结果是一个heading对象，它包含了表9-3所示的4个属性。表9-3 heading对象中的属性名称 类型 说明magneticHeading 数字 用来表示设备在某一时刻相对于正北方向偏移的角度，它的值从0~359.99不等trueHeading 数字 与magneticHeading相同，但是东东前的方向不确定时，比如你现在正在北极，那么该属性的值将是负的headingAccuracy 数字 测量的方向可能存在的误差timestamp 整数 用来记录获取设备方向的时间，单位是毫秒9.5 监视设备方向的两种方法上一节介绍了使用Cordova获取设备方向的方法，细心的读者可能已经发现笔者在本节要介绍的两种传感器了。但是为什么要把它们合在一起介绍呢？除了都可以用来获取与地理位置有关的信息之外，也许还会有其他的原因。那就是这两种传感器的用法实在是太相近了，在获取设备的位置信息时，可以使用getCurrentPosition()和 watchPosition()，而在获取设备的方向时除了可以使用上一节中介绍的getCurrentHeading()之外，还可以使用另一个方法watchHeading()来对设备的方向进行监视。【范例9-4】使用watchHeading()方法监视设备方向。01 02 03 04 05
显示当前的方向
44
45
46
47 48 运行结果如图9-5所示，如果点击屏幕顶部的“显示当前方向”字样，则会停止对设备方向的监视。 图9-5 监视设备方向所得的结果通过对范例的阅读可以发现，watchHeading()的使用与9.3节介绍的watchPosition()方法是一样的，因此这里就不再对它的用法做过多的重复介绍了。这里要说的是除了watchHeading()，在Cordova中还有一种方法能够实现对方向的监控，那就是watchHeadingFilter()方法，它的作用是当设备方向发生变化时执行相对应的onSuccess函数。【范例9-5】使用watchHeadingFilter()方法监视设备方向。01 02 03 04 05
显示当前的方向
44
45
46
47 48 运行结果如图9-6所示，读者可以通过静止手机或是将手机转动一定的角度来观察屏幕上数据的变化。 图9-6 使用watchHeadingFilter()方法监视设备方向从范例中可以看出，该watchHeadingFilter()方法在使用上与范例9-4中的watchHeading()方法非常类似，但是在第13行中可以看到，该方法的option参数发生了变化，因为在此处所使用的option变成了一个compassOptions类型的对象，开发者可以通过它来设置当设备变化了多少角度时程序才会有所反应。接下来对这两种方法进行比较，不过既然同时存在两种方法，而没有废除掉其中的一种，那就说明两种方法都存在可取的地方。watchHeading()方法用来按照一定的时间周期对设备的方向进行监视，这就会导致一个问题，如果这个频率设得太高，比如每隔1ms就获取一次方向数据，即使是八核的CPU也会有些吃力；而如果频率设得太低，则获取的数据又不够精确。使用watchHeadingFilter()方法就不需要考虑这样的问题，但是却会遇到另一种麻烦，比如将option参数中的值设的过大，如范例中的10，就会造成设备不够灵敏。但是一般来说将这个值设为1就足够使用了。但是假设此时遇到了一个爱动的用户，它尝试让手机在指尖旋转，那么就会发生可怕的事情，虽然手机不会爆炸，但至少这个程序很难再保持正常运行了。
评论
还没有评论。