小白学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