phonegap与H5中的接口对比
接口 |
HTML5 |
phonegap |
差异 |
地理定位 geolocation |
单次定位: navigator.geolocation.getCurrentPosition(Success, [error],[options]); 重复性定位: navigator.geolocation.watchPosition(Success, [error],[options]); |
调用接口同左 |
二者调用方法一致 在phonegap中定位时,会由于设备差异,导致某些设备上无法定位,需要借助百度地图SDK定位。 |
摄像头 carema |
HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程访问,用户可以直接用 getUserMedia获得摄像头提供的视频流 调用: navigator.getUserMedia(‘video’,success,error) (1)获取视频流:一个HTML5 的 Video 标签,将从摄像头获得的视频作为这个标签的输入来源。 Function success(videoStream){ viedo_ele.src=videoStream; } (2 )使用canvas绘制video标签的内容, ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh) (3)获取图片:将Canvas的数据转换为base64位编码的PNG图像 Var imgData=canvas.toDataURL(“image/png”); |
提供对设备默认摄像头应用程序的访问,图片以base64编码的字符串或图片URI形式返回: navigator.camera.getPicture(Success, cameraError, [ cameraOptions ] ); 通过cameraOptions参数所设定返回格式:默认返回base64编码 destinationType:Camera.DestinationType.FILE_URI(返回URI) |
调用接口不一样 HTML5通过访问摄像头的接口,使用video和canvas标签,模拟拍照效果。目前仅Chrome和opera支持。 phonegap是直接调用原生的摄像头。 |
方向变化 compass |
HTML5提供了DeviceOrientation 事件监听有关设备的物理方向和移动信息。根据手机旋转情况确定指南针旋转角度 指南针的显示用canvas绘制。 window.addEventListener("deviceorientation", update, false); Deviceorientation方向事件对象中包含设备前后旋转、左右旋转、沿Z轴旋转等的角度。 (1)DeviceOrientationEvent.absolute 返回的是个bool值表示设备是否绝对支持方向定位 (2)DeviceOrientationEvent.alpha 表示设备沿z轴上的旋转角度,范围为0~360。 (3)DeviceOrientationEvent.beta范围为-180~180。它描述的是设备由前向后旋转的情况。 (4)DeviceOrientationEvent.gamma范围为-90~90。它描述的是设备由左向右旋转的情况。 |
检测设备方向或朝向,使用度作为衡量单位,取值范围从0度到359.99度。 navigator.compass.getCurrentHeading(Success,Error,Options); 在固定的时间间隔获取罗盘朝向的角度变化: navigator.compass.watchHeading(Success,Error, [compassOptions]); function Success(heading) { alert(heading.magneticHeading); }; |
调用的接口不一样 HTML5提供的方向变化事件包含的信息更详细。 Phonegap只提供了设备朝向 |
本地存储 Storage |
HTML5中支持localStorage和sessionStorage两种storage存储方式,前者是持久性的数据存储,后者是会话级别的数据存储。 localStorage.setItem(key,value); localStorage.getItem(key); |
phonegap提供对W3C localStorage 接口的访问,可以使用键值对的方式存储数据。 var storage= window.localStorage; storage.setItem(key,value) storage.getItem(key); |
二者调用接口一致 |
文件系统 fileSystem |
HTML5提供了PERSISTENT(永久存储)和TEMPORARY (临时存储)两种存储模式。 (1)获取调用fs对象的方法 window.requestFileSystem=window.requestFileSystem || window.webkitRequestFileSystem; (2)请求fs对象 window.requestFileSystem(type,size,success,error); (3)通过fs对象获取文件,利用FileReader、FileWriter读写文件: function success(fs){ //获取目录 fs.root.getDirectory(); // fs.root.getFile(); //获取文件 } /*申请5MB临时存储空间*/ window.requestFileSystem(window.TEMPORARY,5*1024*1024,onInitFs,errorHandler); |
也提供两种存储模式,但是通过一个localFileSystem对象来指定存储类型。 (1)请求一个filesystem对象:window.requestFileSystem(LocalFileSystem.PERSISTENT,0,onSuccess, onError); (2)通过fs获取文件,利用 FileReader、FileWriter读写文件: function onSuccess(fs){ fs.root.getDirectory(); // fs.root.getFile(); } |
二者调用接口基本一样。 只是前者请求filesystem对象的方法跟浏览器有关,目前只有chrome支持。 Phonegap中使用自身封装的接口,与浏览器无关。 |
phonegap与H5中的接口对比的更多相关文章
- Java和C#中的接口对比(有你不知道的东西)
1.与Java不同,C#中的接口不能包含字段(Field). 在java中,接口中可以包含字段,但是这些字段隐式地是static和final的.而C#不允许接口中有字段,编译器在编译时就会提示错误(如 ...
- HTML5与phonegap接口对比
HTML5与phonegap接口对比 接口 HTML5 phonegap 差异 地理定位 geolocation 单次定位: navigator.geolocation.getCurrentPosit ...
- 从web图片裁剪出发:了解H5中的Blob
刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...
- 关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
- 微信H5中静默登录及非静默登录的正确使用姿势
在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...
- 从工程角度看C++观察者模式中的接口是否需要提供默认的实现
在C++中,我们会经常用到观察者模式(回调模式,Delegate模式等,意思都一样),比如当Source中的某个参数发生了变化时,我们通过观察者模式进行回调通知,下面是一个例子: class Sour ...
- (转)C#抽象类和接口对比
c#中抽象类(abstract)和接口(interface)的相同点与区别 转自:http://blog.csdn.net/fxh_hua/archive/2009/08/20/4464739.as ...
- h5调用底层接口的一些知识
之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天敲代码的时候,有了一个比较好的想法,第一,定位在学习这 ...
- 对飞猪H5端API接口sign签名逆向实验
免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...
随机推荐
- GitHub使用(三) - GitHub安装及初步使用
1. 首先下载Windows版本“GitHubSetup.exe”如下,下载地址为:https://desktop.github.com/
- JS判断访问设备是移动设备还是pc
<scripttype="text/javascript"> function browserRedirect() { var sUserAgent= navigato ...
- SpringMVC框架(四)文件的上传下载,上下文路径
文件目录: SpringMVC配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...
- 项目发布Debug和Release版的区别
一.Debug和Release的区别 Debug:调试版本,包含调试信息,所以容量比Release大很多,并且不进行任何优化(优化会使调试复杂化,因为源代码和生成的指令间关系会更复杂),便于程序员调试 ...
- Python实战之IO多路复用select的详细简单练习
IO多路复用 I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. select 它通过一个select()系统调用来 ...
- VS2010 c/c++ 本地化 emscripten 配置
配置环境 1.下载emsdk-1.35.0-full-64bit.exe,有VS2010的话直接安装. 2.安装好之后,打开cmd,# emsdk update # emsdk install lat ...
- Swift 算法实战之路:栈和队列
这期的内容有点剑走偏锋,我们来讨论一下栈和队列.Swift语言中没有内设的栈和队列,很多扩展库中使用Generic Type来实现栈或是队列.笔者觉得最实用的实现方法是使用数组,本期主要内容有: 栈和 ...
- 每天十分钟系列:JS数据操作之神奇的map()
Array.prototype.map() map()方法可以创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果. demo1 上面的例子,在控制台中打印的结果是: 1 2 3 ...
- [js插件开发教程]实现一个比较完整的开源级选项卡插件
在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...
- Fastify 系列教程一(路由和日志)
介绍 Fastify是一个高度专注于以最少开销和强大的插件架构,为开发人员提供最佳体验的Web框架. 它受到了 Hapi 和 Express 的启发,是目前最快的 Node 框架之一. Fastify ...