接口

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. JAVA 局部变量表

    1. 除了 long,double 占用两个slot 之外,其他类型均占用一个slot. 2.在内容相同的情况下, 实例方法(不加 static) 会比 类方法 (static)对占用一个局部变量位置 ...

  2. C语言 printf 格式化输出函数

    用 法: int printf(const char *format,[argument]); format 参数输出的格式,定义格式为: %[flags][width][.perc] [F|N|h| ...

  3. 通过express搭建自己的服务器

    前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是 ...

  4. NDK各个版本链接

    ndk_r15c (July 2017) Windows 32-bit : https://dl.google.com/android/repository/android-ndk-r15c-wind ...

  5. Asp数据转Json

    需要引用的文件: json.asp(可在JSON官网下载,也可在底部链接的demo中直接拷贝该文件) Conn.asp是链接数据库文件 <%@LANGUAGE="%> <% ...

  6. 在Java环境上运行redis

    首先你得有Java环境,不多说,参考http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html 下载redis驱动包 链接:http: ...

  7. Message Queuing(MSMQ)

    一.前言 MicroSoft Message Queuing(微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布于相连的网络空间中的任 ...

  8. centos 7.1系统更改Mariadb数据存储位置步骤分享

    一.首先确保你要更改Mariadb数据存储的位置的空间够大 现在已将Mariadb存储位置更改到/opt/目录下 1.然后将Mariadb服务stop:systemctl stop mariadb 2 ...

  9. es6零基础学习之项目目录创建(一)

    和大家分享一下在学习es6的过程中所积累的东西,也希望更多的朋友能够互相学习 首先创建项目目录 打开你的命令行,什么文件下都可以,大家请随意,我自己用的git,输入 mkdir es6 创建一个完整的 ...

  10. NPOI导出excel(带图片)

    近期项目中用到Excel导出功能,之前都是用普通的office组件导出的方法,今天尝试用下NPOI,故作此文以备日后查阅. 1.NPOI官网http://npoi.codeplex.com/,下载最新 ...