小白学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个按钮并列在一行中,如图 ...
随机推荐
- python基础之列表常用操作及知识点小结
列表(list) List(列表) 是 Python 中使用最频繁的数据类型.列表可以完成大多数集合类的数据结构实现.它支持字符,数字,字符串甚至可以包含列表(所谓嵌套).列表用[ ]标识,是pyth ...
- SQL的四种语言和数据库范式
1. SQL的四种语言 DDL(Data Definition Language)数据库定义语言 CREATE ALTER DROP TRUNCATE COMMENT RENAME DML(Data ...
- 12个Icon图标资源网站
1.除了Icon以外,还有很多不错的UI设计素材. 地址:http://worldui.com/2.除了免费Icon资源下载以外,还提供Icon定制的付费服务.地址:http://dryicons.c ...
- iOS 开发常用的一些工具
http://www.itjhwd.com/ios-tool/ 通用工具 HomeBrew:OS X上非常出色的包管理工具. 源码控制 Git:分布式版本控制系统和源码管理系统,其优点是:快和简单易用 ...
- JSP中使用的模式——JSP+JavaBean
模式二:JSP+Servlet+JavaBean 链接地址:http://wxmimperio.coding.io/?p=189 JSP中两种模式的总结 链接地址:http://wxmimperio. ...
- 用word2013写博客
第一次使用,添加博客账户时碰到一个奇怪的问题,先输入用户名,然后密码只能输入两个字符,后来先输入密码再输入用户名才解决,很神奇~
- 【andorid】Attribute is missing the Android namespac
初学安卓,错误颇多 出现这个问题,是因为xml节点属性单词拼写错了,比如android我写成了adnorid,当然就错误了.
- nodejs广播
http://site.douban.com/185124/widget/notes/10805558/note/240909343/ http://t42dw.iteye.com/blog/1767 ...
- bower的权限问题
装bootstrap的时候,先用sudo指令装了bower,但是一打 bower isntall bootstrap 就报错: Error: EACCES, permission denied '/U ...
- Cow Contest
poj3660:http://poj.org/problem?id=3660 题意:一些奶牛之间进行编程比赛,每头牛都有一个编程能力.如果a的能力比b的能力高,则a总能打败b .现在给你一些牛之间的比 ...