关于html5:vue-h5-hbuilder实现扫码功能

39次阅读

共计 897 个字符,预计需要花费 3 分钟才能阅读完成。

先上效果图,合乎需要再进一步浏览

最近写了一个手机端的扫码录入零碎,这里简略说一下调取原生 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();}
    },

好了就这样吧!!

正文完
 0