实现方案

• 1.使用 html5-qrcode(对二维码的精度要求较高，胜在使用比较方便，公司用的是 vue2，因此最终采用此方案)
• 2.使用 vue-qrcode-reader(对 vue 版本和 node 有一定要求，推荐 vue3 使用，这里就不展开说了)

使用方式

设置isScanning属性为true,即可打开扫码功能

<!-- html结构 -->
<view class="reader-box" v-if="isScaning">
 <view class="reader" id="reader"></view>
</view>

import { Html5Qrcode } from 'html5-qrcode';
openQrcode() {
  this.isScaning = true;
  Html5Qrcode.getCameras().then((devices) => {
  if (devices && devices.length) {
  this.html5Qrcode = new Html5Qrcode('reader');
  this.html5Qrcode.start(
      {
      facingMode: 'environment'
      },
      {
      focusMode: 'continuous', //设置连续聚焦模式
      fps: 5,       //设置扫码识别速度
      qrbox: 280   //设置二维码扫描框大小
      },
      (decodeText, decodeResult) => {
        if (decodeText) { //这里decodeText就是通过扫描二维码得到的内容
          console.log(decodeText)  //对二维码逻辑处理
          this.stopScan(); //关闭扫码功能
      }
    },
    (err) => {
        // console.log(err);  //错误信息
      }
     );
    }
  });
},

stopScan() {
 console.log('停止扫码')
 this.isScaning = false;
 if(this.html5Qrcode){
    this.html5Qrcode.stop();
 }
}