上QQ阅读APP看书，第一时间看更新
5.1 Cordova获取设备信息
除了能够将HTML页面打包成可以直接安装运行的APP外，Cordova的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息，从而实现一些原本只有依靠原生SDK才能够达到的目的。范例5-1就展示了一个利用API来获取设备信息的例子。
【范例5-1】利用Cordova获取设备信息。
先在命令行进入到项目文件夹下，执行以下命令添加插件：
cordova plugin add cordova-plugin-device
01 <! DOCTYPE html>
02 <html>
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04 <head>
05 <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
06 <script type="text/javascript" charset="utf-8">
07 //设置触发器函数onDeviceReady()
08 document.addEventListener("deviceready", onDeviceReady, false);
09 // Cordova加载完毕，现在可以安全地调用Covdova方法
10 function onDeviceReady() {
11 // 现在可以安全使用Cordova API
12 //获取页面中id为deviceProperties的元素
13 var element = document.getElementById('deviceProperties');
14 //将获取的设备信息写入到页面元素中
15 element.innerHTML = ’设备名称： ' + device.name + '<br />' +
16 'Cordova版本： ' + device.cordova + '<br />' +
17 ’操作系统： ' + device.platform + '<br />' +
18 ’设备编号： ' + device.uuid + '<br />' +
19 ’操作系统版本： ' + device.version + '<br />';
20 }
21
22 </script>
23 </head>
24 <body bgcolor="#E4E4E4">
25 <h1>cordova</h1>
26 <h4 id="deviceProperties"></h4>
27 </body>
28 </html>
使用Cordova编译之后，运行结果如图5-1所示。
图5-1 利用Cordova显示设备信息
通过本例可以看出，使用Cordova中API的方法与使用原生JavaScript和HTML的方法没有什么不同，只是多了一些事先定义好的类，如范例第15行中的device。
Cordova定义了一个类device，其中包含了name、cordova、platform、uuid、version这5个成员变量，分别存放设备的设备名称、Cordova版本号、操作系统、设备编号和操作系统版本，使用时可以直接引用。
提示
不同的Cordova版本，此处测试会略有不同。
在范例的第15~19行就是使用了innerHTML操作来将device类中的信息显示到页面元素中，而页面元素是在第13行中利用元素的id属性来获取的。熟悉JavaScript的读者可以发现，这与JavaScript的DOM操作完全相同。