HBuilder开发WAP2APP增加扫一扫功能

需求明确

开启常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

知识点明确

Barcode模块:plus.barcode,提供开启摄像头扫描功能。
Gallery模块:plus.gallery，提供读取相册二维码图片功能。
效果展示：

实现步骤

创建条码扫描识别控件实例对象,涉及到Barcode模块,具体参数设置可参考5+ API Barcode
在plusReady事件触发之后创建一个Barcode实例对象，此对象提供四个方法：
start: 开始条码识别
cancel: 结束条码识别
close: 关闭条码识别控件
setFlash: 是否开启闪光灯
和两个事件：
onmarked: 条码识别成功事件
onerror: 条码识别错误事件

function plusReady() {if(ws || !window.plus || !domready) {return;}// 获取窗口对象ws = plus.webview.currentWebview();// 开始扫描ws.addEventListener('show', function() {scan = new plus.barcode.Barcode('bcid');// 定义识别成功事件scan.onmarked = onmarked;// 定义开始条码识别scan.start({conserve: true, // 是否保存成功扫描到的条码数据时的截图filename: '_doc/barcode/'  // 保存成功扫描到的条码数据时的图片路径});}, false);// 显示页面并关闭等待框ws.show('pop-in');
}

// 二维码扫描成功

function onmarked(type, result, file) {switch(type) {case plus.barcode.QR:type = 'QR';break;case plus.barcode.EAN13:type = 'EAN13';break;case plus.barcode.EAN8:type = 'EAN8';break;default:type = '其它' + type;break;}result = result.replace(/\n/g, '');plus.nativeUI.alert('扫描结果:' + JSON.stringify(result), function() {console.log('扫描成功')}, "helloW2A", "OK");back();
}

2.从相册中选择图片识别,涉及到Gallery模块，具体参数设置可参考5+ API：Gallery

// 从相册中选择二维码图片**
function scanPicture() {plus.gallery.pick(function(path) {plus.barcode.scan(path, onmarked, function(error) {plus.nativeUI.alert('无法识别此图片');});}, function(err) {console.log('Failed: ' + err.message);});
}

3.DOM结构参考

<body style="background-color: #000000;"><!--指定Barcode对象的在界面中关联div标签的id号。--><div id="bcid"><div style="height:40%"></div><p class="tip">...载入中...</p></div><footer><div class="fbt" onclick="back()">取　 消</div> <!--退出页面--><div class="fbt" onclick="scanPicture()">从相册选择二维码</div></footer>
</body>

HBuilder开发WAP2APP增加扫一扫功能相关推荐

wap2app实现打包点微同城APP集成扫一扫，微信分享支付等原生功能
DZ有个点微同城的插件,发现这个插件挺好用的,但是它没有APP,于是就自己动手研究了一段时间点微同城打包成APP 于是便集成了点微同城原生微信登录,原生微信支付,原生支付宝支付以及扫一扫,长按保存海报 ...
flutter开发实战-flutter二维码条形码扫一扫功能实现
flutter开发实战-flutter二维码条形码扫一扫功能实现 flutter开发实战-flutter二维码扫一扫功能实现,要使用到摄像头的原生的功能,使用的是插件:scan 效果图如下一.扫一扫 ...
HBuilder制作WAP2APP之给APP增加或注入分享功能
1.项目需求: 给封装打包的WAP2APP增加原生分享到微信或者朋友圈等分享功能! 2.实现原理: 到微信开发者平台登记应用获取APPID step1:登陆微信开发者中心, 并登陆微信开发者账号 st ...
Android开发扫一扫功能,Android使用ZXing实现扫码功能
最近正在开发app,基本功能已开发完成,剩下扫码识别功能.之前上级已经写了一版,不是很好用,让我自己好好琢磨一下.针对这种功能需求,一般就先google,看有没有现成的代码可用,不出所料,果然有很多. ...
IOS开发（17）IOS 使用LBXScan框架开发扫一扫功能
说起IOS开发,我是个新手,最近公司接到的项目,C.C++都快忘光的我做IOS开发表示又很大的压力.无奈,还是的搞.找了找资料,看了几天就走在了IOS APP开发的道路上. 在做扫一扫功能,由于自己没 ...
android studio开发整合资源简单实现android扫一扫功能
开发安卓app过程中需要集成扫码功能,搜索的时候发现了 http://blog.csdn.net/yuzhiqiang_1993/article/details/52805057 这篇博客文章,写的很 ...
uniapp——开发微信H5调用jweixin微信js-sdk(uniapp开发H5使用微信扫一扫功能)
小伙伴们,大家有没有开发过网页或者H5等等web页面时候遇到需要调用微信的jweixin.js的呢? 小编在开发过程中遇到了一个问题,因为我的项目是微信小程序内链的H5页面,所以当时我就使用uniap ...
微信网页开发(10)--扫一扫功能接口
点此查看微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载本文目录 1. 背景 2. 代码 3. 测试 1. 背景我们可以在微信网页调起扫一扫功能,可以识别一维码.二维码的内容 ...
JS_微信公众号开发调用扫码支付功能
需要在公众号里面切入扫码功能前端代码: <!DOCTYPE html> <html> <head lang="en"><meta cha ...

HBuilder开发WAP2APP增加扫一扫功能

HBuilder开发WAP2APP增加扫一扫功能相关推荐

最新文章

热门文章