vue+hbuilderX 实现扫一扫功能_hbuilderx vue 扫一扫

最近项目上有个扫一扫功能，用了很多方法，最终在网上扒到这个最容易、最方便的方法和大家分享一下喽~

感谢  https://blog.csdn.net/qq_35844177/article/details/78951825

<template>
 <div class="scan">
 <div id="bcid">
  <div style="height:40%"></div>
  <p class="tip">...载入中...</p>
 </div>
 <footer>
  <button @click="startRecognize">1.创建控件</button>
  <button @click="startScan">2.开始扫描</button>
  <button @click="cancelScan">3.结束扫描</button>
  <button @click="closeScan">4.关闭控件</button>
 </footer>
 </div>
</template>
<script type='text/ecmascript-6'>
let scan = null
 
export default {
  data() {
    return {
      codeUrl: ''
    }
  },
  mounted () {
    this.startRecognize()
    setTimeout(() => {
      this.startScan()
    }, 500)
  },
  methods: {
    // 创建扫描控件
    startRecognize () {
      let that = this
      if (!window.plus) return
      scan = new plus.barcode.Barcode('bcid')
      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, '')
        that.codeUrl = result
        alert(result)
        that.closeScan()
      }
    },
    // 开始扫描
    startScan () {
      if (!window.plus) return
      scan.start()
    },
    // 关闭扫描
    cancelScan () {
      if (!window.plus) return
      scan.cancel()
    },
    // 关闭条码识别控件
    closeScan () {
      if (!window.plus) return
      scan.close()
    }
  },
  destroyed () {
    this.cancelScan()
    this.closeScan()
  }
}
</script>
<style lang="scss">
 .scan {
  height: 100%;
  #bcid {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:3rem;
    text-align: center;
    color: #fff;
    background: #ccc;
  }
  footer {
    position: absolute;
    left: 0;
    bottom: 1rem;
    height: 2rem;
    line-height: 2rem;
    z-index: 2;
  }
 }
</style>

当把上面代码copy到自己的项目中的时候终端上会有如下报错

这个plus是一个自定义当行组件，可以不用管它，然后将项目进行打包生成dist文件

打开HbuilderX

文件 -> 新建-> 项目

输入项目名称后，点击创建，生成一个新的项目，

然后把项目打包生成的dist中的文件拷到此项目下，覆盖掉项目中已有的文件

打包：

打开此项目下的manifest.json文件

进行自己需要的一些配置，也可以默认配置

发行 -> 原生App-云打包

选择打包等着他打包成apk文件就可以了！