vue + h5 + hbuilder实现扫码功能

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

``

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();
      }
    },

好了就这样吧!!

你可能感兴趣的:(html5,前端,vue.js)