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