小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）
在了解了PhoneGap中都有哪些事件之后，本节将開始对这些事件的使用方法进行具体地介绍。本节要介绍的是程序载入事件，也就是deviceready、pause和resume这3个事件。
【范例4-2 程序载入事件的使用】
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <title>程序载入事件的使用</title>
06 <!--引入PhoneGap脚本文件-->
07 <script src="js/cordova-2.7.0.js" type="text/javascript"></script>
08 // 声明当设备载入完成时的回调函数onDevieReay
09 document.addEventListener("deviceready", onDeviceReady, false);
10 // 当设备载入完成后就会运行该函数
11 function onDeviceReady() {
12 // 当该函数运行后，弹出对话框告诉用户设备已经载入完成了
13 alert("设备载入完成！ ");
14 // 一般来说须要保证在设备载入完成之后再去运行其它操作
15 // 声明当程序被放置到后台暂停时运行的回调函数onPause
16 document.addEventListener("pause", onPause, false);
17 // 声明当程序被从后台暂停状态恢复到前台运行时的回调函数onResume
18 document.addEventListener("resume", onResume, false);
19 }
20 // 当程序被暂停时运行该函数
21 function onPause() {
22 // 当该函数被运行时，弹出对话框告诉用户该程序被暂停
23 alert("程序被暂停了！");
24 }
25 // 当程序被从暂停状态恢复时运行该函数
26 function onResume() {
27 // 当该函数被运行时弹出对话框告诉用户程序被恢复
28 alert("程序恢复运行");
29 }
30 </script>
31 </head>
32 <body>
33 <h1>程序载入事件的使用</h1>
34 <h3>程序開始运行后弹出对话框提示设备载入完成</h3>
35 <h3>程序进入后台运行也弹出对话框提示程序被暂停</h3>
36 <h3>但当程序被恢复时却没有对话框弹出</h3>
36 </body>
37 </html>
程序执行之后，系统会自己主动对PhoneGap中的脚本进行载入，然后弹出如图4-7所看到的的界面。表明设备载入完成。
而当用户点击“返回”button或“HOME”button时，也会弹出对应的对话框，如图4-8所看到的。可是不等笔者反应过来点击“确定”button，程序就已经被置入后台了。
清华大学出版社推出的《构建跨平台APP：Phonegap移动应用实战》是一本APP实战书，包括20多个APP实例和3个APP项目，还结合了HTML5移动开发。本书面向移动开发入门人员。低门槛，浅阅读，最适合移动APP创业小白。本次公布第3~5章作为读者学习的基础，有兴趣的欢迎购买本书！
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9va3poYW9waW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
图4-7 设备载入完成后弹出对话框
图4-8 程序被暂停时相同弹出对话框提示
依照道理来说。假设此时再执行该程序也会弹出对应的对话框来。可是真相是当再次执行该程序时却没有对话框弹出提示“程序被恢复”。
这并非写错了某段代码导致的，而是因为PhoneGap的某些特定调用关系所决定的。为了证明这一点，如今对范例的第16~29行做一些改动。在此次改动中放弃了利用alert方式弹出对话框。而是利用console.log方法使得当对应的函数被执行时。在Eclipse的LogCat面板上输出信息。
// 当设备载入完成后就会运行该函数
function onDeviceReady() {
console.log("设备载入完成！ ");
}
// 当程序被暂停时运行该函数
function onPause() {
console.log("程序被暂停了。");
}
// 当程序被从暂停状态恢复时运行该函数
function onResume() {
console.log("设备恢复了！ ");
}
然后再执行该程序，在LogCat面板上输出的信息如图4-9所看到的。
图4-9 LogCat中的信息
事实证明当程序从暂停状态下恢复时，假设调用一些DOM操作可能会得不到所预期的结果，这与安卓平台下PhoneGap的兼容性和执行效率等因素有关，在实际开发时须要特别注意这一点。
以下结合本范例来说明PhoneGap中各个事件的用法。通过范例的第10、12和14行能够看出，在PhoneGap中假设想对某个事件进行操作仅仅须要依照document.addEventListener("eventname",function, false);这种格式进行定义就能够了。当中eventname是须要定义的事件名称。而function则是负责对该事件进行响应的自己定义函数。
提示：细致观察范例能够发现一个有意思的问题，那就是对pause和resume两个事件的声明是在设备载入完成之后进行的，这是一个很好的习惯。每个PhoneGap开发人员都要努力适应这一点。
趁此机会再介绍一点额外的知识，那就是在PhoneGap中进行调试的方法。
在程序开发时常常会遇到一些意外的错误，一般来说能够通过在特定的位置输出一些数据来验证程序出错的位置。这时就须要考虑使用什么方法来获取这些数据了。
对于习惯了Web开发的开发人员来说，利用alert方法在对话框中弹出数据是一种很方便的选择，可是在实际使用中这样的方法并非很的方便，因此就经常採用console.log方法输出信息以便于调试。
除了利用console.log方法之外，还有很多人喜欢利用JavaScript的DOM操作将结果直接输出在页面中。在某些情况下，比方须要统计某一变量在一段时间内的变化情况。这样的方法也是很有用的。
清华大学出版社推出的《构建跨平台APP：Phonegap移动应用实战》是一本APP实战书，包括20多个APP实例和3个APP项目，还结合了HTML5移动开发。本书面向移动开发入门人员。低门槛，浅阅读。最适合移动APP创业小白。
本次公布第3~5章作为读者学习的基础，有兴趣的欢迎购买本书！欢迎加群：348632872，向作者直接提问交流！
小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）的更多相关文章
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载五（使用PhoneGap获取设备信息）
除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的 ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）
4.1.2 通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载二（生命周期）
4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...
- 【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...
- 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》串行4（场景变化）
作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...
- 构建跨平台APP开发的两本书，这里重点推荐下
第一本是<构建跨平台:jquery Mobile移动应用实战> 是目前jqm开发写的比较入门的一本书,上手很快,但是高手我觉得就没有必要学习了,因为写的比较浅显. 第二本是<构建跨平 ...
- jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...
随机推荐
- gooflow0.6的流程设计
为何使用gooflow:1.兼容性好 2.扩展点很多可以个性化设计 3.配有api文档 4.json格式的数据传输 gooflow0.8版 由于最近项目需要,急需设计一个流程,考虑到时间问题,和用户个 ...
- 调整ListBox控件的行间距及设置文本格式
首先要将该控件的DrawMode属性为OwnerDrawVariable 添加DrawItem重绘事件:private void listBox1_DrawItem(object sender, Dr ...
- div section article aside的理解
div 是一个大的容器 内部可以包含header main nav aside footer等标签 没有语义,多用于为脚本添加样式 section的语义比div语义强些,用于主题性比较强的内容,比如一 ...
- xadmin的插件机制
xadmin的视图方法中如果加了@filter_hook 标记的都可以作为插件的钩子函数. 例如在ListAdminView类中有许多加了上述标记的方法, @filter_hook def get_c ...
- VS-FluentData 单元测试
1. 使用VS2013建立一个控制台工程: using System; using System.Collections.Generic; using System.Linq; using Syste ...
- 2013Java最新面试题
更新时间:2015-04-07 来源:网络 投诉删除 [看准网(Kanzhun.com)]Java面试题频道小编搜集的范文“2013Java最新面试题”,供大家阅读参考 ...
- 《Braid》碎片式台词
谁见到过风? 你没有,我也没有. 但当树儿低下头, 便是风儿经过时. 便是风儿穿过的时候. 但当树叶微微摇首, 你没有,我也没有. 谁见到过风? 二.时间与宽恕 1.提姆要出发了!他要去寻找并救出公主 ...
- nutch-1.7 编译
转载自:http://peigang.iteye.com/blog/1563288 从nutch-.3开始 本地抓取(单击) 和 分布式抓取(集群)所使用的配置文件和命令单独分开. 资源:下载地址:h ...
- bzoj 3669: [Noi2014]魔法森林 动态树
3669: [Noi2014]魔法森林 Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 363 Solved: 202[Submit][Status] ...
- Delphi能通过SSH登录Linux，连接MYSQL取数么？像Navicat一样
百度随时就能搜,你就懒得搜下.http://tieba.baidu.com/p/671327617 Ssh tunnel通常能实现3种功能1) 加密网络传输2) 绕过防火墙3) 让位于广域网的机器连接 ...