H5扫描设备二维码

**主要分为以下几点：** **1，界面div部分详细如下,可参考：**

<div id="barcode" style="margin-top:45px;background-color: #000000;">
<div style="height:40%"></div>
<p class="tip">...载入中...</p>
</div>
<footer>
<div class="fbt" onclick="mui.back()" style="background-color: #000000;">
<img src="images/insert_up.png" style="height: 28px; float: left;margin-top:5px;margin-left: 15px; display: none;" /><img src="images/22.png" style="height:28px;margin-top: 5px; display: none; float: left;margin-left: 10px;" /><span style="float: left; margin-left: 15px; font-size: 13px;">如无法扫描,请手动绑定</span></div>
<div class="fbte" onclick="MuiUse.openWindow('cancas.html')">手动绑定</div>
</footer>

2，JS部分也就是扫描二维码的逻辑，包含请求服务器数据，和打印扫描结果信息。

var scan = null;
var ws=null,wo=null;
mui.plusReady(function() {
plus.webview.close('cancas.html', 'none');//此处为从首页跳转到扫描界面，打开扫描窗口
ws = plus.webview.currentWebview();
wo=ws.opener();
ws.addEventListener('show', function() {
startRecognize();
});
});

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;
    }

    console.log("扫描结果:" + result);
if(result.length>=10 && result.length<=15){
imeisat(result);
}else{
mui.toast('二维码编码在10~15字符之间');
}

   var a = 0;
function startRecognize() { //创建Barcode对象
/*scan = new plus.barcode.Barcode('barcode');
// 创建支持默认条码类型的识别控件
scan.onmarked = onmarked;
scan.start();*/
//startScan();
scan=new plus.barcode.Barcode('barcode');
    scan.onmarked=onmarked;
    scan.start({conserve:true,filename:"_doc/barcode/"});
}
function cancelScan() { //结束条码识别
scan.cancel();
}
function closeScan() { //关闭条码识别
scan.close();
}
function startScan() { //开始条码识别
scan.start();
}
function setFlash() { //是否开启闪光灯
scan.setFlash();
}

  // 从相册中选择二维码图片 
function scanPicture() {
plus.gallery.pick(function(path) {
plus.barcode.scan(path, onmarked, function(error) {
plus.nativeUI.alert("无法识别此图片");
});
}, function(err) {
plus.nativeUI.alert("Failed: " + err.message);
});
}
function scaned(r) {
console.log("绑定的设备号:" + r);
wo.evalJS("getResult('" + r + "');");
back();
}
function imeisat(ims){
   var stt= JSON.parse(localStorage.logdata);
   var data =
        {imei:ims,
id:stt.id,
username:stt.username,
viewflag:1
        }
       obj.ajax({methodName:"bindDevices",data:data},function(data){//此处为封装好的服务器ajax请求，主要判断扫描的二维码是否是设备的编码。正确的则绑定成功，若错误的，则返回绑定失败。
    var json = eval('('+ data.d + ")");
console.log(json.success);
if(json.success=="true"){
wo.evalJS("getResult('"+ ims +"');");
mui.back();
    }else{
mui.toast("绑定失败!");
    }
    });
  }

**OK，基本的功能就这些，剩下的就是跳转，相信没什么问题了吧，这个是我之前做的一个共享单车类型的app，获取绑定设备id的功能，通过扫一扫，识别到服务器正确返回的编码，正确则绑定成功，错误则返回客户端绑定失败。

欢迎大家有什么问题可以留言，博主看到会给予回复。希望这篇文章可以帮助到更多有志青年。加油！可以关注我看更多的最新动态。严谨转载，本文原创，有事可联系博主，谢谢大家！！**

H5扫描设备二维码

猜你喜欢