微信小程序实现连续扫码的方案

一、使用微信小程序API里面的扫码，递归调用（此方法用户体验不好）

1.api如下

2.代码示例

2.1 index.wxml文件代码

<view class="page-body">
  <button bindtap='getScancode'>扫一扫</button>
</view>

2.2 index.ts文件代码（根据自己业务处理什么时候退出递归）

Page({
  getScancode() {
    wx.scanCode({
      success: (res) => {
        var result = res.result;
        wx.showToast({
          title:'扫码结果：'+result,
          icon:'none'
        })
        this.getScancode()
      }
    })
  }
})

二、使用微信小程序组件里面的camera（此方法识别率略差）

1.api如下

2.代码示例

2.1 index.wxml文件代码

<view class="page-body">
  <camera
      mode="scanCode"
      device-position="back"
      flash="off"
      bindscancode="onScanCode"
      binderror="binderror"
      style="width: 100%; height: calc(100vh)"
    ></camera>
</view>

2.2 index.ts文件代码

Page({
  onScanCode(e) {  
    console.log('扫码结果', e.detail.result);  
    wx.showToast({
      title:'扫码结果：'+e.detail.result,
      icon:'none'
    })
  }, 
  error(e) {
    console.log("e", e.detail);
  },
  // 用户不允许使用摄像头时触发
  binderror() {
    wx.showToast({
      icon: "none",
      title: "请授权摄像头",
    });
  }