vue h5页面如何实现扫一扫功能，扫条形码获取编码

Question

如图这是我在网上找的一个方法，使用h5的Barcode实现扫码的功能，但代码报错 'plus' is not defined ，是什么原因呢？，现在在手机上真机测试点击扫描也没反应，没调取摄像头，有老师知道什么原因吗？需求是前端实现扫一扫，扫条形码获取条形码的编码，大佬们有没有做过这种的？

<template>
    <div class="scan">
        <div id="codeId">
            <div style="height:40%"></div>
            <p class="tip" style="text-align: center">...载入中...</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>
export default {
  name: 'scan',
  data () {
    return {
      codeUrl: ''
    }
  },
  created () {

  },
  mounted () {
    this.startRecognize()
  },
  methods: {
    // 创建扫描控件
    startRecognize () {
      let that = this
      if (!window.plus) return
      that.scan = new plus.barcode.Barcode('codeId')
      that.scan.onmarked = onmarked
      function onmarked (type, result, file) {
        console.log('remarked')
        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
        console.log(result)
        that.closeScan()
      }
      that.startScan()
    },
    // 开始扫描
    startScan () {
      const _ts = this
      if (!window.plus) return
      _ts.scan.start()
    },
    // 关闭扫描
    cancelScan () {
      const _ts = this
      if (!window.plus) return
      _ts.scan.cancel()
    },
    // 关闭条码识别控件
    closeScan () {
      const _ts = this
      if (!window.plus) return
      _ts.scan.close()
    }
  }
}
</script>

<style xml:lang="less">
    .scan {
        height: 100%;
    }
    #codeId {
        height: 100%;
        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>

Answer 1

如果只是在编译是报错,可以加一句

const plus = window.plus

Answer 2

1.这里要涉及一个知识点h5 plus，不知道是什么的只能自己去了解
2.这段代码如果想要正确使用，可能你还需要打包成app
3.如果只是单纯实现扫码功能，又是在html环境之中，那么有两种简单的方式
eg:

1.是调用第三方开放的接口（自己后端实现同理）；
2.如果是在微信环境使用，调微信的api

Answer 3

我推荐你使用这个库html5-qrcode,支持二维码和条形码
demo

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 4

你看下你的依赖项有没有引入，看起来像是没有 import 依赖， 唤起相机的话，好像现在的都有点问题，如果内嵌app的话，可以考虑和移动端开发小伙伴商量一下调用app的唤起摄像头

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。