小白學phoneGap《構建跨平臺APP：phoneGap移動應用實戰》連載五（使用PhoneGap

時間 2019-11-06

標籤白學 phonegap 構建跨平臺 app 移動應用實戰連載使用欄目無線简体版

原文原文鏈接

除了可以將HTML頁面打包成能夠直接安裝運行的APP外，PhoneGap的一個最大優點在於能夠經過JavaScript調用設備來訪問設備上的硬件信息，從而實現一些本來只有依靠原生SDK纔可以達到的目的。範例5-1就展現了一個利用API來獲取設備信息的例子。javascript

【範例5-1 利用PhoneGap獲取設備信息】html

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>	
<script src="cordova.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	//設置觸發器函數onDeviceReady()
	document.addEventListener("deviceready", onDeviceReady, false);
	// PhoneGap加載完畢，如今能夠安全地調用PhoneGap方法
	function onDeviceReady() {
	   // 如今能夠安全使用PhoneGap API
	   //獲取頁面中id爲deviceProperties的元素
		var element = document.getElementById('deviceProperties');
		//將獲取的設備信息寫入到頁面元素中
		element.innerHTML = '設備名稱: '     + device.name     + '<br />' + 
							'PhoneGap版本: ' + device.phonegap + '<br />' + 
							'操做系統: ' + device.platform + '<br />' + 
							'設備編號: '     + device.uuid     + '<br />' + 
							'操做系統版本: '  + device.version  + '<br />';
	}
	
</script>
</head>
<body>
<h4 id="deviceProperties"></h4>
</body>
</html>

使用PhoneGap編譯以後，運行結果如圖5-1所示。java

經過本例能夠看出，使用PhoneGap中API的方法與使用原生JavaScript和HTML的方法沒有什麼不一樣，只是多了一些事先定義好的類，如範例第15行中的device。安全

PhoneGap定義了一個類device，其中包含了name、phonegap、platform、uuid、version這5個成員變量，分別存放設備的設備名稱、PhoneGap版本號、操做系統、設備編號和操做系統版本，使用時能夠直接引用。函數

在範例的第15~19行就是使用了innerHTML操做來將device類中的信息顯示到頁面元素中，而頁面元素是在第13行中利用元素的id屬性來獲取的。熟悉JavaScript的讀者能夠發現，這與JavaScript的DOM操做徹底相同。
學習

清華大學出版社推出的《構建跨平臺APP：Phonegap移動應用實戰》是一本APP實戰書，包含20多個APP實例和3個APP項目，還結合了HTML5移動開發。本書面向移動開發入門人員，低門檻，淺閱讀，最適合移動APP創業小白。本次發佈第3~5章做爲讀者學習的基礎，有興趣的歡迎購買本書！歡迎加羣：348632872，向做者直接提問交流！ui