nuxt + vue2 + vantui + html5-qrcode 实现H5扫码功能

重要的事情说三遍，使用https协议，使用https协议，使用https协议

打开 nuxt.config.js 文件

export default {
  // 此处省略 n 行
  proxyTable: {
    '/zbmymalus': {
      target: 'https://172.18.2.73:10001',
      pathRewrite: {
        '^/zbmymalus': ''
      },
      changeOrigin: true,
      secure: false // 不验证证书（测试环境这个一定要写，否则无法访问网页）
    },
  },
  build: {
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }
  },
  router: {
    base: process.env.NODE_ENV === 'production' ? '/zbmywms/' : '/'
  },
  server: {
    host: '0.0.0.0',
    port: 3015,
    // 生产环境必须有 密钥 和 证书 （暂时不知道怎么申请，前端不关注，问后端），测试环境无所谓，因为不验证证书
    https: {
      key: fs.readFileSync('./key/key.pem'), // 密钥
      cert: fs.readFileSync('./key/cert.pem') // 证书
    }
  }
};

创建文件夹 key 存放 证书 和 秘钥

创建扫码组件 ydhtmlsacn.vue

<template>
  <div>
    <div class="qrcode">
      <div id="reader"></div>
    </div>
  </div>
</template>

<script>
import { Html5Qrcode } from 'html5-qrcode';
export default {
  name: 'ydHtmlsacn',
  created() {
    this.getCameras();
  },
  beforeDestroy() {
    this.stop();
  },
  methods: {
    getCameras() {
      Html5Qrcode.getCameras()
        .then(devices => {
          if (devices && devices.length) {
            this.html5QrCode = new Html5Qrcode('reader');
            this.start(); //扫码
          }
        })
        .catch(err => {
          // handle err
          this.html5QrCode = new Html5Qrcode('reader');
          this.error = 'ERROR: 您需要授予相机访问权限';
          this.$emit('err', this.error);
        });
    },
    start() {
      //environment后置 user前置
      this.html5QrCode
        .start(
          {
            facingMode: 'environment'
          },
          {
            fps: 2,
            qrbox: { width: 300, height: 300 }
          },
          (decodedText, decodedResult) => {
            this.$emit('ok', decodedText);
          }
        )
        .catch(err => {
          this.$emit('err', err);
        });
    },
    stop() {
      this.html5QrCode
        .stop()
        .then(ignore => {
          // QR Code scanning is stopped.
          console.log('QR Code scanning stopped.');
        })
        .catch(err => {
          // Stop failed, handle it.
          console.log('Unable to stop scanning.');
        });
    }
  }
};
</script>

<style scoped>
.qrcode {
  position: relative;
  height: 80vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.48);
}

#reader {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 999;
}
</style>

组件中使用

<template>
    <div v-if="isShow">
        <yd-htmlsacn ref="qrcode" @ok="getResult" @err="geterror" v-if="isShow"></yd-htmlsacn>
    </div>
    <div v-else>
        <van-field v-model="FStockId.text" label="托盘码" placeholder="请扫描托盘码" right-icon="scan" @click="isShow = true" />
        其他页面逻辑...
    </div>
</template>

<script>
import api from '@/plugins/axios';
import Yd_htmlsacn from '../components/yd_htmlsacn.vue';
export default {
  name: 'productinstock',
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    // 扫码完成
    getResult(value) {
      this.isShow = false;
    },
    // 扫码失败
    geterror(e) {
      this.$toast(`${e},扫码失败，请重试!`);
    },
  }
};
</script>