小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载五(使用PhoneGap获取设备信息)
除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的。范例5-1就展示了一个利用API来获取设备信息的例子。
【范例5-1 利用PhoneGap获取设备信息】
<!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所示。
通过本例可以看出,使用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,向作者直接提问交流!
小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载五(使用PhoneGap获取设备信息)的更多相关文章
- 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载一(PhoneGap中的API)
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...
- 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载四(使用程序载入事件)
在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...
- 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载三(通过实例来体验生命周期)
4.1.2 通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...
- 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载二(生命周期)
4.1 什么是生命周期 想要真正地理解PhoneGap应用开发的内涵,首先需要理解什么是生命周期.这在字面上其实非常容易理解,一个应用从开始运行被手机加载到应用被退出之间的过程就称之为一个生命周期.为 ...
- 【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...
- 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载四(场景切换)
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》串行4(场景变化)
作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...
- jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...
- jqueryMobile应用第一课《构建跨平台APP:jQuery Mobile移动应用实战》连载一(Hello World)
有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...
随机推荐
- (二)搭建SSH环境
一.struts 1.添加jar包: commons-fileupload-1.3.1.jar,[文件上传相关包] commons-io-2.2.jar, commons-lang-2.4.jar , ...
- php array数组(第一部分)
创建一个数组 <?php $arr = array("My","name","is","zhangsan"); e ...
- WSAStartup()函数的使用
int WSAStartup( __in WORD wVersionRequested, __out LPWSADATA lpWSAData ); WSAStartup 格 式: int PASCA ...
- NOIP2015提高组 跳石头 ACM-ICPC2017香港 E(选择/移除+二分答案)
跳石头 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 NN ...
- 性能压测,SQL查询异常
早上测试对性能压测,发现取sequence服务大量超时报错,查询线上的监控SQL: 大量这个查询,我在DeviceID和Isdelete上建有复合索引,应该很快,而且我测试了一下,取值,执行效率很高, ...
- 利用memoize缓存到Redis出现多个参数同一个结果
在为后端输出加入Redis缓存的过程中出现的问题. 在我利用Flask-restful架构的后端中,理所当然的利用装饰器marshal_with对我的返回数据进行格式化输出. 举个最简单的例子: fr ...
- MYSQL中coalesce函数的用法
coalesce():返回参数中的第一个非空表达式(从左向右依次类推): 例如: select coalesce(null,4,5); // 返回4 select coalesce(null,null ...
- 2014-10-22 NOIP模拟赛
1 1 .传教士 (bishop) 问题描述:panzhili 王国的疆土恰好是一个矩形,为了管理方便,国王 jjs 将整个疆土划分成 N*M 块大小相同的区域.由于 jjs 希望他的子民也能信教爱教 ...
- vector详解
/*vector向量容器*/ //用数组方式访问vector元素 #include<iostream> #include<vector> #include<cstdio& ...
- [Xcode 实际操作]六、媒体与动画-(7)遍历系统提供的所有滤镜
目录:[Swift]Xcode实际操作 本文将演示系统到底提供了多少滤镜供开发者使用,并了解每个滤镜都有哪些参数需要配置. 在项目导航区,打开视图控制器的代码文件[ViewController.swi ...