小白学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个按钮并列在一行中,如图 ...
随机推荐
- 浅析tornado web框架
tornado简介 1.tornado概述 Tornado就是我们在 FriendFeed 的 Web 服务器及其常用工具的开源版本.Tornado 和现在的主流 Web 服务器框架(包括大多数 Py ...
- 十大响应式Web设计框架
http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...
- initWithCoder: 与initWithFrame:
之前一直用代码来编写画面,现在着手使用storyboard和xib来构筑画面,遇到initWithCoder方法, 故查了下,initWithCoder方法的调用,看了篇博客,链接如下: http:/ ...
- In machine learning, is more data always better than better algorithms?
In machine learning, is more data always better than better algorithms? No. There are times when mor ...
- Nodejs 集成到IIS
http://www.hanselman.com/blog/WebMatrixAndNodejsTheEasiestWayToGetStartedWithNodeOnWindows.aspx http ...
- 【UVA1371】Period （二分+DP）
题意: 给出两个字符串A,B将B分解成若干个子字符串,然后每个子字符串都要经过编辑变成字符串A,所有子串中编辑最多的次数即为当前状态下的最大编辑次数,要求求最小的最大编辑次数. 编辑操作包括修改.删除 ...
- Javascript禁止网页复制粘贴效果，或者复制时自动添加来源信息
一.禁止复制 使用方法:在oncopy事件中return false oncopy="return false;" 1.禁止复制网页内容 <body oncopy=" ...
- python作用域 scope
可以先看:http://www.cnblogs.com/youxin/p/3645734.html 几个概念:python能够改变变量作用域的代码段是def.class.lamda.if/elif/e ...
- android逐行读取文件内容以及保存为文件
用于长时间使用的apk,并且有规律性的数据 1,逐行读取文件内容 //首先定义一个数据类型,用于保存读取文件的内容 class WeightRecord { String timestamp; flo ...
- ORACLE软件下载地址
Oracle Database 11g Release 2 Standard Edition and Enterprise Edition Software Downloads Oracle 数据库 ...