hbuilder 混合app开发扫描二维码功能例子

Posted 2021-09-03 墨子鱼

app扫描二维码功能：

html:
<div id="bcid"></div>

js代码：

scan = null; //扫描对象

//初始化页面
mui.plusReady(function () {

mui.init({
    swipeBack: true, //开启右滑关闭功能（默认就是false）
    keyEventBind: {
      backbutton: true //开启back按键监听（默认就是true）
    }
});

var filter;
//自定义的扫描控件样式
var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: "",};
//扫描控件构造
scan = new plus.barcode.Barcode(\'bcid\',filter,styles);  
  startRecognize();

//调用摄像头，扫描二维码
function startRecognize() {

console.log(\'调用摄像头，扫描二维码\')
try {
    scan.onmarked = onmarked;  //调用onmarked方法
    scan.onerror = onerror;    //调用onerror方法
    scan.start();

        //打开关闭闪光灯处理
        var flag = false;
        document.getElementById("turnTheLight").addEventListener(\'tap\',
            function() {
                console.log(\'打开关闭闪光灯处理\',flag)
                if (flag == false) {
                    scan.setFlash(true);
                    flag = true;
                } else {
                    scan.setFlash(false);
                    flag = false;
                }
            });
    } catch (e) {
        alert("出现错误啦:\\n" + e);
        scan.cancel();//结束条码识别
        scan.close();//关闭条码识别控件
    }

}

function onerror(e) {

console.log(e);

}

//读取扫描数据
function onmarked(type, result) {
console.log(\'onmarked::type\', type)
console.log(\'onmarked::result\',result)
var text = \'\';
switch (type) {
case plus.barcode.QR:

  text = \'QR: \';
  break;

case plus.barcode.EAN13:

  text = \'EAN13: \';
  break;

case plus.barcode.EAN8:

  text = \'EAN8: \';
  break;

}
var equipmentCode = "";//存放二维码读取的设备编码
try {

  var equipmentInfo = result;//二维码扫描的结果
  // var str2 = equipmentInfo.split(";")[0];//以;分，去第一部分
  // equipmentCode = str2.split(":")[1];//根据str2的内容，以：分，获取后面部分
  console.log(\'二维码扫描的结果\',equipmentInfo)
  if(equipmentInfo!=""&&null!=equipmentInfo){
      if(equipmentInfo.indexOf(";")!=-1){
          var emquipmentInfoStr1 = equipmentInfo.split(";")[0];//以;分，取第一部分
          equipmentCode = emquipmentInfoStr1.split(":")[1];//根据str2的内容，以：分，获取后面部分
      }else{
          equipmentCode = equipmentInfo.split(":")[0];//以分，取第一部分
      }
  }

} catch (e) {

  equipmentCode = "";

}
if (equipmentCode != "" && null != equipmentCode) {//二维码中读取设备编码不为空

  scan.cancel();//结束条码识别
  scan.close();//关闭条码识别控件
  getScanSuccess(equipmentCode);  //获取成功，执行方法

} else {

  mui.alert("二维码信息错误，请检查二维码的来源。",function end(){window.location.reload()});
  scan.cancel();//结束条码识别
  scan.close();//关闭条码识别控件

}
}

//扫描成功
function getScanSuccess(equipmentCode){
console.log(\'扫描成功操作\',equipmentCode)
}

//退回
function returnBack() {
console.log(\'returnBack\',turnBackType)
scan.cancel();//结束条码识别
scan.close();//关闭条码识别控件

}