H5 扫描二维码绑定设备信息

主要分为以下几点:

1,界面div部分详细如下,可参考:



...载入中...





如无法扫描,请手动绑定

手动绑定


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的功能,通过扫一扫,识别到服务器正确返回的编码,正确则绑定成功,错误则返回客户端绑定失败。  


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

你可能感兴趣的:(Android,H5+MUI)