HBuilder h5+app 扫描功能实现升级版 做成vue组件形式

在使用的页面中通过组件的形式引入

1、下面是测试代码，需在手机或者模拟器中才能看到效果

<template>
<hz-scan style="position: absolute;right: .2rem;top: 0.1rem" @scan="scanEvent"/>
</template>
<script>
import hzScan from './hzscan'
export default {
  components: {hzScan},
   methods:{
    scanEvent(data){
      this.$toast('扫描结果：'+data);
    },
}
</script>

2、组件代码， 

<template>
  <div class="scan-box">
    <img src="../../assets/img/qr_icon.png" @click="scanningQRCode"/>
    <div class="scan" v-if="dateBoxFlag">
      <div id="bcid"></div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
  let scan = null,view = null,view1 = null;
  export default {
    data() {
      return {
        dateBoxFlag:false,
        flag:false,
      }
    },
    methods: {
      scanningQRCode(){// 点击扫描图标，创建扫描控件
        let _this = this;
        _this.dateBoxFlag = true;
        _this.startRecognize();
      },
      //启动扫描
      startRecognize() {
        let _this = this;
        _this.plusReady(()=>{
          scan = new plus.barcode.Barcode('bcid');//创建扫描控件
          scan.onmarked = onmarked;
          scan.onerror = onerror;
          _this.startScan();//开始扫描
          view = new plus.nativeObj.View('test', // 创建视图控件，绘制关闭按键
            {top:'50px',left:'10%',height:'40px',width:'10%'},
            [{tag:'rect',id:'rect1',
              rectStyles:{color:'rgba(0,0,0,0.2)',radius:'30px'},
              position:{top:'5px',left:'0px',width:'30px',height:'30px'}},
              {tag:'font',id:'font1',text:'X',
                textStyles:{size:'20px',color:'#ffffff'},
                position:{top:'5px',left:'0px',width:'30px',height:'30px'}},
            ]);
          view1 = new plus.nativeObj.View('test1', // 创建视图控件，绘制闪光灯按键
            {top:'50px',left:'80%',height:'40px',width:'10%'},
            [{tag:'rect',id:'rect2',
                rectStyles:{color:'rgba(0,0,0,0.2)',radius:'30px'},
                position:{top:'5px',left:'0px',width:'30px',height:'30px'}},
              {tag:'font',id:'font2',text:'ϟ',
                textStyles:{size:'20px',color:'#ffffff'},
                position:{top:'5px',left:'0px',width:'30px',height:'30px'}},
            ]);
          view.show();
          view1.show();
          view.addEventListener('click',onclick,false);
          view1.addEventListener('click',onclick,false);
          function onclick(e) {
            let target = e.target;
            if(target.id === 'test') _this.closeScan();
            if(target.id === 'test1') _this.flashOperation();
          }
          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, '');// 获取扫描结果
            _this.$emit('scan',result);
            _this.closeScan();// 得到结果后关闭控件
          }
          function onerror() {
            _this.$toast('识别失败');
            _this.closeScan();
          }
        })
      },
      //开始扫描
      startScan() {
        scan.start();
      },
      //识别成功后关闭识别控件
      closeScan() {
        scan.close();view.close();view1.close();
        scan = null;view = null;view1 = null;
        this.dateBoxFlag = false;// 关闭弹窗
      },
      flashOperation(){// 闪光灯操作
        this.flag = !this.flag;
        scan.setFlash(this.flag);
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .scan-box{
    img{
      width 0.5rem
      height 0.5rem;
    }
  }
  .scan{
    height: 100%;
    width 100%;
    position fixed;
    top:0;left :0;
    #bcid{
      width: 100%;
      height: 100%;
      background :#cccccc;
    }
  }

</style>

以上代码直接复制即可使用，无需改变，使用注明出处