在HBuilder中开发HTML5 Plus应用需启用5+App支持、监听plusready事件后调用plus.barcode.scan扫码、plus.camera.captureImage拍照、plus.gallery.pick选图,所有API仅在真机或5+App环境中生效。

如果您在HBuilder中开发HTML5 Plus应用,需要调用设备原生能力如扫码、拍照等,则必须通过HTML5 Plus的JavaScript API进行操作。以下是具体使用步骤:
一、确认项目已启用HTML5 Plus支持
HTML5 Plus API仅在5+ App运行环境中可用,普通浏览器或WebView无法调用。需确保项目已打包为5+ App或在HBuilder真机运行调试模式下启动。
1、在HBuilder中右键点击项目根目录,选择“转换为5+App项目”。
2、检查项目根目录下是否存在manifest.json文件,并确认其中"plus"节点存在且未被禁用。
立即学习“前端免费学习笔记(深入)”;
3、运行时选择“真机运行”或“云打包”,严禁在Chrome等浏览器中直接打开index.html测试Plus API。
二、获取plus对象并等待onloaded事件
HTML5 Plus的全局对象plus并非立即可用,必须等待plusready事件触发后才能安全调用API。
1、在页面
2、编写onPlusReady函数,在其中执行后续API调用逻辑。
3、未监听plusready就直接调用plus.camera.getCamera()等方法将返回undefined或报错。
三、调用扫码功能
使用plus.barcode.scan可启动系统级扫码界面,支持二维码、条形码等多种格式识别。
1、在onPlusReady函数内调用:plus.barcode.scan(successCB, errorCB);
2、定义成功回调函数successCB,接收参数result,其result.text即为扫描到的内容。
3、定义失败回调函数errorCB,接收错误对象,可读取message属性获知失败原因。
4、扫码过程会自动切换至原生摄像头界面,无需自行创建video元素。
四、调用拍照功能
通过plus.camera.getCamera()获取摄像头对象,再调用captureImage执行拍照并保存到本地。
1、调用var c = plus.camera.getCamera();获取默认后置摄像头。
2、执行c.captureImage(function(path){ console.log("照片路径:"+path); }, function(e){ alert("拍照失败"); });
3、照片路径为本地绝对路径(如_www/images/xxx.jpg),可配合plus.io.resolveLocalFileSystemURL读取文件信息。
4、captureImage不支持直接返回base64,需额外使用plus.zip.compressImage压缩或plus.io.readAsDataURL读取。
五、访问相册选取图片
使用plus.gallery.pick可调起系统相册选择器,允许用户从已有图片中选取一张。
1、调用plus.gallery.pick(successCB, cancelCB, {system:true});
2、成功回调中files数组第一个元素的path即为选中图片路径。
3、设置{system:true}确保调起原生相册而非网页文件选择器。
4、pick方法返回的是临时路径,若需长期保存,必须使用plus.io.copyTo复制到应用沙箱目录。











