小白学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个按钮并列在一行中,如图 ...
随机推荐
- js中的prototye
前言 没事的时候写着js完,一般可能大家都知道这个属性吧,但是我还要说说,给一些不知道的人看看吧, 希望对你有帮助. 过程 以前在学c#的时候,老师最多用的就是Person这个类来开讲,我觉得是这个更 ...
- npm install express -g出错
npm ERR! Windows_NT npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program ...
- mysql-积累管理sql语句
//连接数据库 mysql -h xxx -u root -p; //查看数据库 show databases //查看数据表 show tables //查看某数据表结构 desc xxx表 //修 ...
- SuperSocket与Netty之实现protobuf协议，包括服务端和客户端
今天准备给大家介绍一个c#服务器框架(SuperSocket)和一个c#客户端框架(SuperSocket.ClientEngine).这两个框架的作者是园区里面的江大渔. 首先感谢他的无私开源贡献. ...
- Spring 初学 1
Spring是一个轻量级的框架,他有自己的MVC框架SpringMVC,在以往的Web项目中大多采用Structs2+hibernate+Spring的框架,Structs做web层,Hibernat ...
- Arduino从基础到实践第三章练习题
先写在这里,还没经过测试. 1. LED两端往中间移动,到中间后向两边返回. // adr301.ino , , , , , , , , , }; ); ; ; unsigned long chang ...
- js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
这篇文章主要分享了判断IE.FF.Opera.Safari.Chrome等浏览器和版本的两种方法,需要的朋友可以参考下 因为ie10-ie11的版本问题,不再支持document.all判断,所以ie ...
- jquery事件之event.target用法详解
1. 定义和用法: 显示哪个 DOM 元素触发了事件: $("p, button, h1, h2").click(function(event){ $("div" ...
- git实现版本回退
1. 首先查看自己的版本: ***:~/piaoshifu_object/epiao.piaoshifu.cn$ git log commit c8d5c67861d2d0e21856cc2b4f60 ...
- "_OBJC_CLASS_$_WeiboApi", referenced from: objc-class-ref in libtuyoo.a(TuYoo.o)
Undefined symbols for architecture i386: "_OBJC_CLASS_$_WeiboApi", referenced from: objc-c ...