HTML5与phonegap接口对比

HTML5与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中使用自身封装的接口，与浏览器无关。