小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序加载事件）

时间 2019-11-06

标签白学 phonegap 构建跨平台 app 移动应用实战连载使用程序加载事件栏目无线繁體版

原文原文链接

在了解了PhoneGap中都有哪些事件以后，本节将开始对这些事件的用法进行详细地介绍。本节要介绍的是程序加载事件，也就是deviceready、pause和resume这3个事件。javascript

【范例4-2 程序加载事件的使用】html

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所示的界面，代表设备加载完毕。而当用户点击“返回”按钮或“HOME”按钮时，也会弹出相应的对话框，如图4-8所示，可是不等笔者反应过来点击“肯定”按钮，程序就已经被置入后台了。java

清华大学出版社推出的《构建跨平台APP：Phonegap移动应用实战》是一本APP实战书，包含20多个APP实例和3个APP项目，还结合了HTML5移动开发。本书面向移动开发入门人员，低门槛，浅阅读，最适合移动APP创业小白。本次发布第3~5章做为读者学习的基础，有兴趣的欢迎购买本书！函数

图4-7 设备加载完毕后弹出对话框学习

图4-8 程序被暂停时一样弹出对话框提示spa

按照道理来讲，若是此时再运行该程序也会弹出相应的对话框来，可是真相是当再次运行该程序时却没有对话框弹出提示“程序被恢复”。这并非写错了某段代码致使的，而是因为PhoneGap的某些特定调用关系所决定的，为了证实这一点，如今对范例的第16~29行作一些修改。在这次修改中放弃了利用alert方式弹出对话框，而是利用console.log方法使得当相应的函数被执行时，在Eclipse的LogCat面板上输出信息。调试

// 当设备加载完毕后就会执行该函数
	function onDeviceReady() {
		console.log("设备加载完毕！");
	}
	// 当程序被暂停时执行该函数
	function onPause() {
		console.log("程序被暂停了！");
	}
	// 当程序被从暂停状态恢复时执行该函数
	function onResume() {
		console.log("设备恢复了！");
	}

而后再运行该程序，在LogCat面板上输出的信息如图4-9所示。code

图4-9 LogCat中的信息orm

事实证实当程序从暂停状态下恢复时，若是调用一些DOM操做可能会得不到所预期的结果，这与安卓平台下PhoneGap的兼容性和运行效率等因素有关，在实际开发时须要特别注意这一点。htm

下面结合本范例来讲明PhoneGap中各个事件的使用方法，经过范例的第十、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，向做者直接提问交流！