H5 扫描条码、二维码的简易实现（附带nativeObj创建原生对象）

最新推荐文章于 2024-09-14 09:02:44 发布

@copyer_chuan

最新推荐文章于 2024-09-14 09:02:44 发布

阅读量3.2k

点赞数 1

分类专栏： JavaScript 文章标签： html

本文链接：https://blog.csdn.net/ych1274816963/article/details/122210189

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在H5App中使用HTML5+API的Barcode控件实现扫码功能，并通过plus.nativeObj创建原生View控件以创建关闭按钮。详细步骤包括创建扫码控件、设置扫码成功和失败的回调，以及创建和显示关闭按钮。通过结合这两个方法，实现了打开和关闭扫码界面的交互操作。此外，还提到了如何扩展功能，如添加开关手电筒等。

摘要由CSDN通过智能技术生成

本文主要记录一下 H5 app+ 实现扫码功能，并用plus.nativeObj（官方文档：HTML5+ APL/nativeObj）创建原生控件对象的实现。

第一步：通过barcode创建扫码控件（官方文档：HTML5+ API Reference）

function openBarcode(dom, dom1, barCodeType, mui) {
	var barcode = null; // 扫码控件对象
	var textResult = ""; // 扫描成功时的结果
	// 创建Barcode扫码控件
	function createBarcode() {
		if(!barcode){ // 具体api可以查看上方链接查看官方文档
			barcode = plus.barcode.create('barcode', [plus.barcode.CODE128], {
				top:'0px',
				left:'0px',
				width: '100%',
				height: '100%',
				position: 'static'
			});
			barcode.onmarked = onmarked; // 扫码成功的回调
			barcode.onerror = onerror; // 扫码失败的回调
			plus.webview.currentWebview().append(barcode);
		}
		barcode.start();
	}
	/**
	 * 扫描成功的回调函数
	 * @param type
	 *   扫描二维码回调的类型,QR,EAN13,EAN8都是二维码的一种编码格式
	 * @param result
	 *   扫描结果   
	 */
	function onmarked(type, result) {
		result = result.replace(/\n/g, '');
		// 下方是扫描成功逻辑判断，通过自己业务类型进行处理
		if ((result.length <= 10 && barCodeType == "location") || (result.length > 10 && barCodeType == "barcode_a")) {
			$(dom).val(result);
			$(dom1).val(result);
			$(dom).focus();
			barcode.close();
		} else {
			onerror();
		}
	}
	function onerror (error){
		plus.nativeUI.alert("扫描出错,请重试!", function(){
			createBarcode(); // 点击确认按钮重新扫描
		}, "提示", "确定");
	}
	createBarcode();
	plus.key.addEventListener('backbutton', function() {
		barcode.close() // 监听用户滑动返回按钮时，关闭扫码控件
	});
}

第二步：通过nativeObj.View创建原生对象(这儿用于创建关闭按钮，用来关闭扫码界面)

function createBackView() {
	backVew = new plus.nativeObj.View('test',        
        {top:'10px',left:'20px',height:'30px',width:'30px'}
    );
    // 注意：当tag为img的时候，src才生效，并且路径需是 ‘_www’ + 根路径；
    // 可以理解为 _www就是根目录（项目名）
	backVew.draw([
	    {
            tag: 'img',
            id: 'img',
            src: '_www/img/close.png',
            position: {top:'0px',left:'0px',width:'100%',height:'100%'}
        }
	]);
	backVew.show();
	backVew.interceptTouchEvent(true);
	backVew.addEventListener("click", function(e) { //返回按钮
	    barcode.close(); // 关闭扫描界面
		backVew.close(); // 关闭View控件
	}, false);
}

总结：将两个方法结合，在创建扫码控件的时候触发创建关闭按钮原生控件对象，就可以简单实现打开与关闭扫码界面的简单操作了，后续如果需要加入开关手电筒功能，也可以通过nativeObj来实现。