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

        本文主要记录一下 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来实现。

你可能感兴趣的:(JavaScript,html)