vue + h5 + hbuilder实现扫码功能

先上效果图，符合需求再进一步阅读

最近写了一个手机端的扫码录入系统，这里简单说一下调取原生app的扫码功能需要注意的点。
我是第一次接触H5扫描，GitHub上翻了很多案例，有个共同特点就是，在Hbuilder真机调试时都需要点击才能调取原生二维码扫描，而我的需求是直接触发生成二维码扫描控件，而且千篇一律都是用的new plus.barcode.Barcode这个方法进行创建的控件但是怎么也不显示，最后让我在文档中找到了解决方法

如图，官方文档中给出了解答，不想翻文档大家可以参考我图片上的写法

``

startRecognize () {
      let that = this
      if (!window.plus) return
      // scan = new plus.barcode.create('bcid');
      scan = plus.barcode.create('bcid', [plus.barcode.QR], {
        top:'60px',
        left:'0px',
        width: '100%',
        height: '100%',
        position: 'static'
      });
      plus.webview.currentWebview().append(scan);
      console.log("创建扫描控件---------", scan);
      // 开始扫描
      console.log("开始扫描");
      that.startScan();
      scan.onmarked = onmarked
      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("扫描数据",type, result, file);
        result = result.replace(/\n/g, '')
        alert(result)
        //关闭
        scan.close();
      }
    },

好了就这样吧！！

Tags 标签

加个好友，技术交流