前段时间利用vue开发的项目中，有个需求是扫码，查找资料发现，H5+plus提供了这个API
开始入坑开发。。。
Hbuilder云打包真的很方便，而且内置的H5+PLUS的API
上代码

• html部分

 <div class="num-mask"  id="bcid" ></div>

• js部分

<script>
 	let scan = null;
    export default {
        name: "h5barcode",
      data(){
          return {
            
          }
      },
      mounted(){
        this.startRecognize();
      },
      methods:{
    
        // H5调用扫描功能
        startRecognize () {
          let that = this;
          if (!window.plus) return;
          scan = new plus.barcode.Barcode('bcid');
          scan.onmarked = onmarked;
          scan.start();
          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, '');
            
            scan.close();
            //这里写扫码结束后 自己的逻辑

          }
        },
       
        
      }
    }
</script>

• css部分

 .num-mask{
    width: 100%;
    height: 90%;
    position: fixed;
    left: 0;
    top: 10%;
    background: rgba(0,0,0,1);
    z-index: 9;

  }
   .title{
    width: 100%;
    position: absolute;
    top: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 2rem;
  }

代码基本就OK了，剩下的就是配置Hbuilder的内容，保证获取相机权限
然后打包，发布OK

由于本人水平有限，刚刚接触H5+plus 有遗漏希望大神指正