vue调用手机扫描二维码

HbuilderX打包后在手机端或者模拟手机端测试 PC端无法测试；hBuilder打包后集成H5+sdk就可以直接用他们家的sdk了

效果图（代码直接CV即可用）

代码部分（代码直接CV即可用）

<button @click.native='startRecognize'>触发按钮</button>
<div id="bcid" :style='{zIndex:zIndex}'></div>   

//JS部分
export default{
    components:{
        tabbar
    },
    data (){
        return {
            text:'',
            codeUrl: '',
            scan:'',
            zIndex:-1
        }
    },
    methods:{
      //初始化扫描控件
      startRecognize() { 
        this.zIndex=9999
        let that = this;
        if (!window.plus) {return};
        // 初始化扫描控件
        this.scan = new plus.barcode.Barcode('bcid');
        this.scan.onmarked = onmarked; 
        // 调用开始扫描 
        this.startScan()
        // 扫描后回调
        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;
          }
          result = result.replace(/\n/g, '');
          that.codeUrl = result;
          // 返回值
          //Toast(result);  
          that.zIndex=-1
          that.closeScan(); 
        }
      },
      //开始扫描
      startScan() { 
        if (!window.plus) return;
        this.scan.start();
      },
      //关闭扫描
      cancelScan() { 
        if (!window.plus) return;
        that.zIndex=-1
        this.scan.cancel();
      },
      //关闭条码识别控件
      closeScan() { 
        if (!window.plus) return;
        this.scan.close();
      }, 
    }
}



//css部分
<style >
    #bcid {
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom:3rem;
      text-align: center;
      color: #fff; 
    } 
</style> 

本文参考

http://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.scan
https://blog.csdn.net/qq_35844177/article/details/78951825