小白学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个按钮并列在一行中,如图 ...
随机推荐
- .Net C/S系统开发框架(楚楚原创)
C/S系统开发框架-企业版 V4.0 (Enterprise Edition) 简介: http://www.csframework.com/cs-framework-4.0.htm 视频下载: 百度 ...
- Linux下安装MySQLdb
在Linux下使用Python访问MySQL的方法之一是使用MySQLdb module,下面将介绍在Linux下如何安装MySQLdb的过程. (1)下载MySQLdb 从SourceForge.n ...
- Coursera《machine learning》--（6）逻辑回归
六 逻辑回归(Logistic Regression:LR) 逻辑回归(Logistic Regression, LR)模型其实仅在线性回归的基础上,套用了一个逻辑函数,但也就是由于这个逻辑函数,使得 ...
- Linux内核监控模块-2-系统调用表地址的获取（Linux内核版本3.13）
那么在Linux内核2.6之后,不能直接导出sys_call_table的地址后,我们要如何获得系统调用表的地址,从而实现系统调用的截获呢. 先贴上我实现好的代码,然后再来讲解吧. modu.c #i ...
- The Model Complexity Myth
The Model Complexity Myth (or, Yes You Can Fit Models With More Parameters Than Data Points) An oft- ...
- node场景
http://www.zhihu.com/question/19653241 http://www.csdn.net/article/2012-05-03/2805296 http://limu.it ...
- QQ 群也能接收告警啦！团队沟通力 Up Up！
截止到昨天,你已经可以通过 OneAlert 的「排班」和「分派」功能,来对告警进行有序地分发,解决团队协作效率低的问题了.然而 OneAlert 觉得自己还可以更进一步,把团队沟通困难的问题也解决掉 ...
- The Glorious Karlutka River =)
sgu438:http://acm.sgu.ru/problem.php?contest=0&problem=438 题意:有一条东西向流淌的河,宽为 W,河中有 N 块石头,每块石头的坐标( ...
- SysErrorMessage 函数和系统错误信息表
在看 API 文档时, 我们经常见到 GetLastError; 它可以返回操作后系统给的提示.但 GetLastError 返回的只是一个信息代码, 如何返回对应的具体信息呢?FormatMessa ...
- Traffic Manager：Azure中国版 正式发布
我们很高兴地宣布Azure Traffic Manager 现已面向中国版Azure正式发布.此版本现已投入生产,由企业 SLA支持,随时可用于生产场景中. 借助Azure Traffic Ma ...