vue使用hbuider打包调用扫一扫

1.html部分

<template>
  <div>
    <div id="publicNav">
      <!-- 这个地方用了vant的NavBar 导航栏 -->
      <van-nav-bar title="扫一扫" left-arrow @click-left="onClickLeft">
        <div slot="right" @click="onClickRight">
          <div class="torch">
          手电筒
          </div>
        </div>
      </van-nav-bar>

    </div>
    <div>
      <div class="scan">
        <div id="container">
          <p class="tip">...载入中...</p>
        </div>
      </div>
    </div>
  </div>
</template>

2.js部分

<script>
export default {
  data() {
    return {   };
  },
  components: {},
  mounted() {
    this.startScan(); //进入页面就调取扫一扫
  },
  created() {
    this.startRecognize();
  },
  methods: {
    onClickLeft() {
     scan.cancel();//关闭
     scan.close();//关闭条码识别控件
      this.$router.go(-1);
    },
    onClickRight() {
    //打开手电筒（取反）
      this.bFlash = !this.bFlash;
      scan.setFlash(this.bFlash);
    },
    //创建扫描控件
    startRecognize() {
      let that = this;
      if (!window.plus) return;
  ** scan这个全局变量我是定义在html里面的，因为点击物理按键后退的时候会用到这个变量**
      // 创建条码扫描识别控件
      scan = new plus.barcode.Barcode("container");
      // 条码识别成功
      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;
        }
        result = result.replace(/\n/g, "");
       alert(result);//弹出扫码结果
        scan.cancel(); //关闭扫描
        scan.close(); //关闭条码识别控件
      }
    },
    //开始扫描
    startScan() {
      if (!window.plus) return;
      this.startRecognize(); //创建控件
      scan.start();
    }
  }
};
</script>

3.css

<style scoped>
#publicNav .van-nav-bar{
  background: #0b0857;
  height: 90px;
  line-height: 90px;
  
}
#publicNav .van-nav-bar__title{
  color: white;
  font-size: 32px;
  letter-spacing: 5px;
}
#publicNav .van-nav-bar .van-icon {
  font-size: 40px;
  color:white;
  font-weight: bold;
  top: 5px;
}
**上面的#publicNav的css必须写在公共部分，因为我的设计稿是750的但使用vant的是375，所以我写在公共部分去修改了单位大小**
.scan {
  height: 100%;
}
.scan #container {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 90px; /*px*/
  bottom: 0;
  text-align: center;
  color: #fff;
  background: #ccc;
}
.torch {
  font-size: 30px;
  line-height: 80px;
  color: white;
}
</style>

后面发现这样有一个bug就是在点击手机的物理按键后退时扫一扫控件无法关闭解决办法vue使用hbuider监听物理后退按钮。