小白学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章作为读者学习的基础,有兴趣的欢迎购买本书!

  

图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,向作者直接提问交流!



原文地址:https://www.cnblogs.com/mengfanrong/p/5265423.html