html5 plus怎么调用_HTML5 Plus在HBuilder中调用扫码拍照等原生API【调用】

15次阅读

在HBuilder中调用html5 Plus原生能力需先监听plusready事件确保环境就绪,再分别通过plus.barcode、plus.camera、plus.gallery、plus.geolocation模块调用扫码、拍照、相册、定位功能,并按平台要求配置权限与路径处理。

html5 plus怎么调用_HTML5 Plus在HBuilder中调用扫码拍照等原生API【调用】

如果您在HBuilder中开发html5 Plus应用,需要调用设备原生能力(如扫码、拍照、相册、定位等),必须通过HTML5 Plus提供的标准js API进行调用。以下是具体调用方法:

一、确认plus环境已就绪

HTML5 Plus API依赖于运行时plus对象,该对象仅在5+ Runtime环境中存在。需先确保plus对象可用,避免因环境未加载导致调用失败。

1、使用document.addEventListener监听plusready事件,该事件表示HTML5 Plus运行环境初始化完成。

2、在plusready回调中执行后续API调用,不可在页面加载初期直接调用plus.*接口

立即学习前端免费学习笔记(深入)”;

3、若plus对象不存在或plusready未触发,所有plus.camera、plus.barcode、plus.gallery等调用均会静默失败或抛出ReferenceError

二、调用扫码功能

扫码功能由plus.barcode模块提供,支持一维码与二维码识别,需先获取扫描控件并启动扫描界面。

1、调用plus.barcode.getBarcode()获取可用的扫码类型列表。

2、创建plus.barcode.Barcode对象,传入dom容器ID(如

)用于显示扫描框。

3、调用barcode.start()启动扫描,成功后触发onmarked回调,返回result字段中的编码内容。

4、注意:android平台需在manifest.json中勾选“Barcode”权限;ios需在uni-app或5+项目中配置NSCameraUsageDescription描述

三、调用拍照功能

拍照功能由plus.camera模块提供,支持直接调起系统相机拍摄并返回图像信息,不经过相册中间环节。

1、调用plus.camera.getCamera()获取默认后置摄像头对象。

2、调用camera.captureImage()启动拍照,支持指定目标文件路径和压缩质量参数。

3、成功后返回本地绝对路径(如/_www/image.jpg或/data/user/0/io.dcloud.xxx/cache/xxx.jpg)。

4、返回路径为原生文件系统路径,不能直接作为img src使用,需通过plus.io.resolveLocalFileSystemURL转换为Web可读URL

四、调用相册选择图片

从手机相册选取图片由plus.gallery模块实现,适用于用户主动选择已有图片的场景。

1、调用plus.gallery.pick()打开相册选择界面,支持设置maxCount、mode(image/video)、system(是否仅系统相册)等参数。

2、成功后返回files数组,每个元素含originalPath(原始路径)和path(缩略图路径)。

3、调用plus.io.resolveLocalFileSystemURL处理originalPath,再通过file.file()读取Blob或生成Object URL供img标签使用。

4、Android 10+需注意Scoped Storage限制,originalPath可能不可直接访问,建议优先使用path字段或启用android:requestLegacyExternalStorage=”true”

五、调用定位功能

定位能力由plus.geolocation模块提供,支持GPS、基站、wifi等多种方式混合定位。

1、调用plus.geolocation.getCurrentPosition()获取单次定位结果,需传入success、fail回调及options(如enableHighAccuracy、timeout)。

2、调用plus.geolocation.watchPosition()开启持续定位监听,返回watchID用于后续clearWatch。

3、Android需在manifest.json中声明access_FINE_LOCATION和ACCESS_COARSE_LOCATION权限;iOS需配置NSLocationWhenInUseUsageDescription

text=ZqhQzanResources