接口

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中的接口对比的更多相关文章

  1. Java和C#中的接口对比(有你不知道的东西)

    1.与Java不同,C#中的接口不能包含字段(Field). 在java中,接口中可以包含字段,但是这些字段隐式地是static和final的.而C#不允许接口中有字段,编译器在编译时就会提示错误(如 ...

  2. HTML5与phonegap接口对比

    HTML5与phonegap接口对比 接口 HTML5 phonegap 差异 地理定位 geolocation 单次定位: navigator.geolocation.getCurrentPosit ...

  3. 从web图片裁剪出发:了解H5中的Blob

    刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...

  4. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  5. 微信H5中静默登录及非静默登录的正确使用姿势

    在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...

  6. 从工程角度看C++观察者模式中的接口是否需要提供默认的实现

    在C++中,我们会经常用到观察者模式(回调模式,Delegate模式等,意思都一样),比如当Source中的某个参数发生了变化时,我们通过观察者模式进行回调通知,下面是一个例子: class Sour ...

  7. (转)C#抽象类和接口对比

    c#中抽象类(abstract)和接口(interface)的相同点与区别  转自:http://blog.csdn.net/fxh_hua/archive/2009/08/20/4464739.as ...

  8. h5调用底层接口的一些知识

    之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天敲代码的时候,有了一个比较好的想法,第一,定位在学习这 ...

  9. 对飞猪H5端API接口sign签名逆向实验

    免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...

随机推荐

  1. AngularJS -- Bootstrap(启动器)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...

  2. javaWeb正则表达式

    对于web来说,字符串的处理特别重要,而正则表达式是对字符串处理的利器,在字符过滤,验证方面都能看到她的身影. 今天需要处理一段json字符串,在用String.replaceAll的过程中,遇到了正 ...

  3. MySQL主从同步和读写分离的配置

    主服务器:192.168.1.126 从服务器:192.168.1.163 amoeba代理服务器:192.168.1.237 系统全部是CentOS 6.7 1.配置主从同步 1.1.修改主服务器( ...

  4. Ansible(一) - 入门及安装

    Ⅰ. Ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置 ...

  5. 如何科学地蹭热点:用python爬虫获取热门微博评论并进行情感分析

    前言:本文主要涉及知识点包括新浪微博爬虫.python对数据库的简单读写.简单的列表数据去重.简单的自然语言处理(snowNLP模块.机器学习).适合有一定编程基础,并对python有所了解的盆友阅读 ...

  6. Windows下如何创建低权限进程

       1.  前言 在使用 Sysinternals 出品的 Process Explorer 过程中,对 “Run as Limited User” 功能的实现方式颇感兴趣,一番搜寻之下发现Mark ...

  7. PE文件格式详解,第二讲,NT头文件格式,以及文件头格式

    PE文件格式详解,第二讲,NT头文件格式,以及文件头格式 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) PS:本篇博客 ...

  8. __无标题栏的窗口拖动___javafx

    遇到困难::添加mouseevent监听,我用的mouse_DragedDetected配合MouseEvent.Pressed,,闪的不行,后来借鉴swing的pressed,move,releas ...

  9. spring cloud+dotnet core搭建微服务架构:配置中心(四)

    前言 我们项目中有很多需要配置的地方,最常见的就是各种服务URL地址,这些地址针对不同的运行环境还不一样,不管和打包还是部署都麻烦,需要非常的小心.一般配置都是存储到配置文件里面,不管多小的配置变动, ...

  10. 使用keepalived使用主备热备份功能

    图: 配置文件: 主服务器的配置如下: global_defs { router_id NodeA}vrrp_instance VI_1 { state MASTER #设置为主服务器 interfa ...