小白學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，向做者直接提問交流！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。