phonegap与H5中的接口对比
http://www.cnblogs.com/lydialee/p/5418353.html
接口 |
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中使用自身封装的接口,与浏览器无关。 |
接口 |
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中的接口对比相关推荐
- 获取电子面单号的API接口对比(中通、快宝、菜鸟)
什么是电子面单 标准定义:电子面单是一种通过热敏纸打印输出纸质物流面单的物流服务. 通俗定义:快递行业,上面标记有发件人/收件人信息及地址,三段码,物品信息等的一张贴纸,贴在包裹上:派件签收等都可以依 ...
- native html5 区别,H5与Native优劣对比
即将启动爱奇艺商城(mall.iqiyi.com)移动端的native化. 项目开始之前当然要梳理下为什么做native,究竟H5跟native比有什么劣势,而H5又为什么占比那么高并且有" ...
- 微信公众开放平台开发02---微信公众平台PHP接口和java接口对比
微信公众开放平台开发02---微信公众平台PHP接口和java接口对比 技术qq交流群:JavaDream:251572072 ----------------------------------- ...
- 机器视觉:嵌入式视觉系统中的接口
机器视觉:嵌入式视觉系统中的接口 现在我们要构建一个自动割草机,割草机的空间定位需要通过相机扫描环境来获得,这个场景下传统的机器视觉系统满足不了,但嵌入式系统可以满足.为什么?因为割草机是用电池供电的 ...
- 关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
- H5中获取微信头像、昵称
H5中获取微信用户资料的方式有两种,第一种是默认登录方式,即不需要弹出授权框,只会有一个"正在登录"的弹窗,这种方式获取到的数据仅限于该用户已经关注了对应公众号之后,如果是未关注公 ...
- html根据坐标动态生成图形,H5最强接口之canvas实现动态图形功能
上个文章中我们分享了如何利用canvas来进行图形绘制,但是绘制的都是静态图形,本周我们就来学习如何利用canvas进行动态图形绘制. 什么是动画? 我们在绘制动画之前必须要弄清楚什么是动画,一个动画 ...
- 硬件知识:DP接口和HDMI接口对比,看完你就懂了
目录 一.DP接口 二.HDMI接口 三.总结 电脑显示器高清传输通过会用到两个接口,就是DP接口和HDMI接口,今天电脑学习小编带大家对比一下这两个接口. 一.DP接口 DisplayPort缩写D ...
- 在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析
在H5中使用腾讯地图,实现定位,距离计算,实时搜索,地址逆解析 1.创建应用 2.下载微信sdk包 3.安装`vue-jsonp` 4.使用 获取当前位置信息,逆解析地址 路线规划,距离计算 实时搜索 ...
最新文章
- 关于Opengl中将24位BMP图片加入�一个alpha通道并实现透明的问题
- 三、糖醋鲤鱼(Sweet and sour carp)
- 不知事务码MB1A / MB1B / MB1C之间有什么区别吗?
- spring 扫描所有_从Spring的几个阶段理解其工作过程
- 基于CefSharp构建基于Chromium的应用程序
- plsql如何显示表结构图_【论文攻略】排版技巧——如何用 Word 编辑参考文献
- matlab判断能控和能观,实验三 利用Matlab分析能控性和能观性
- 对话英特尔高级副总裁 Raja:软件将为硬件释放无限潜力
- 等级考试(二):二级C++---宏观把控
- 25岁房贷上万濒临失业,大专小哥转行软件测试“挽救”人生
- C++类型转换运算符 static_cast,dynamic_cast,reinterpret_cast,const_cast
- 【DP】LeetCode 53. Maximum Subarray
- memset()的用法
- 威富通支付接口用到的操作类(记录下)
- Bouncy Castle 密码包的配置及使用详解
- B2B2C 商城系统 WSTMart_v2.0.6_180726程序发布
- 来局昆特牌吗?(模拟+策略优化)
- ERROR dispatch for GET /error?thingName=lxyrequestId=123, parameters={masked}
- 《文化相对论》圆满收官!思想交锋,文明互鉴!
- 数据矿工学习-情感分析框架DeepEmo论文-个人中文翻译
热门文章
- 完爆 90% 的数据库性能毛病!
- 高性能计算机软件循环流水,软件流水中循环展开优化.pdf
- ATTCK靶场系列(三)
- 终端电阻对CAN总线的作用和影响
- matlab中如何求两条曲线的交点并在图中标出
- Excel字符串替换(replace)
- Aperta为开曼群岛提供电子资金转账(EFT)服务
- 【vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigati】
- 领导1v1谈话_让谈话强化学习基础知识1
- 天玑900和天玑1100差距大不大