n***@gmail.com
n***@gmail.com
  • 发布:2017-12-25 12:54
  • 更新:2023-03-23 10:49
  • 阅读:12668

开启扫一扫 示例教程

分类:HTML5+

需求明确

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

知识点明确

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

效果展示

实现步骤

  1. 创建条码扫描识别控件实例对象,涉及到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>

示例工程已上传,供开发者参考

7 关注 分享
BoredApe Trust Yaphets 8***@qq.com 6***@qq.com 7***@qq.com 小黄人跑跑跑

要回复文章请先登录注册

4***@qq.com

4***@qq.com

回复 5***@qq.com :
我也是同样,怎么这么久还不解决啊?
2023-03-23 10:49
冻住不许走

冻住不许走

求问 uni.scanCode实现的和您这个功能是一样的吗
2020-11-10 10:43
2***@qq.com

2***@qq.com

回复 5***@qq.com :
一年多过去了,解决了吗?
2020-05-11 09:39
1***@qq.com

1***@qq.com

求源码
2020-04-17 20:12
7***@qq.com

7***@qq.com

不知道楼主有没有遇到这个情况
2019-09-25 15:39
7***@qq.com

7***@qq.com

回复 5***@qq.com :
我也遇到这个问题,请问解决了吗
2019-09-25 15:39
5***@qq.com

5***@qq.com

从相册中选择二维码,手机拍摄的二维码照片都无法识别,这是官方bug吗,偶尔才会成功一次,同样的图片在微信、支付宝、qq浏览器中都能识别
2019-01-03 17:34