uniApp二维码文档地址:https://www.html5plus.org/doc/zh_cn/barcode.html

步骤:

  1. 组件中创建div容纳扫码控件
  2. 创建扫描控件
  3. 开始扫描
  4. 关闭扫描
  5. 关闭条码识别控件

tips:

在代码中,我是在mounted函数中就调用了startRecognize()函数,创建了扫码识别控件,为了便于演示,大家可以在页面上加几个按钮,绑定不同的函数调用创建,开始,关闭扫描控件函数

其中startRecognize()函数中的result值就是扫码的结果,可以对这个值进行操作。

其中startRecognize()函数中的type对应的是二维码的类型,可以在上面的文档中获取不同的条码对应的数值。

<template>
   <div class="scan">
    <div id="bcid">
      <div style="90%"></div>
    </div>
  </div>
</template>
<script>
 let scan = null;
export default {
 mounted() {
   this.startRecognize()
   this.startScan()
 },
 methods: {
      //创建扫描控件
      startRecognize() {
        let that = this;
        if (!window.plus) return;
        scan = new plus.barcode.Barcode('bcid');
       scan.setStyle({background:"green"})

      var 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, '');
         
          console.log(result)//这里的result就是扫码获取到的值    
          
          that.closeScan();
        }
         scan.onmarked = onmarked;
      },
      //开始扫描
      startScan() {
        if (!window.plus) return;
        scan.start();
      },
      //关闭扫描
      cancelScan() {
        if (!window.plus) return;
        scan.cancel();
      },
      //关闭条码识别控件
      closeScan() {
        if (!window.plus) return;
        scan.close();
      }
 },

}
</script>

以上代码仅供个人记录以及复习使用,欢迎大家评论指正

Logo

前往低代码交流专区

更多推荐