Vue 扫码及生成二维码

Vue 扫码及生成二维码

最近写了一个扫码签到的小网站，主要用到了Vue的两个相关库

建议大家到官网学习使用方法

我吧我写的实例代码贴在这里了(●’◡’●)

vue-qr - npm (npmjs.com)

vue-qrcode-reader - npm (npmjs.com)

1.vue-qr

npm install vue-qr

生成二维码

<template>
<div>
  <div class="QrCode">
    <h1>{{$store.state.userInfo.userName}}</h1>
    <h2>快去找学长学姐签到吧</h2>
      <!-- 此组件可生成二维码 text为二维码对应的值 logSrc为二维码中心图片的地址 -->
    <vue-qr ref="Qrcode"
            :text="dataObj.text"
            :logoSrc="dataObj.logo"
            qid="testQrId"></vue-qr>
  </div>
</div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: "QrCodePage",
  components:{
    VueQr,
  },
  data () {
    return {
      dataObj: {
        text: JSON.stringify(this.$store.state.userInfo),
        logo: `https://v1.alapi.cn/api/avatar?email=${this.$store.state.userInfo.userQQ}`
      }
    }
  },
}
</script>

<style scoped>
.QrCode{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

2.vue-qrcode-reader

npm install vue-qrcode-reader

实现扫码功能

<template>
  <div class="scanBox">
    <p className="error">{{ error }}</p>
    <el-button @click="onInit">开启摄像头</el-button>
      <!-- 此组件为开启摄像头并识别二维码 -->
    <qrcode-stream @decode="onDecode" @init="onInit" class="scanQrCode"/>
    <div v-for="(index,item) in msgList" :key="index">
      {{item}}
    </div>
  </div>
</template>

<script>
import {QrcodeStream} from 'vue-qrcode-reader'

export default {
  name:"AdminPage",

  components: {QrcodeStream},

  data() {
    return {
      result: '',
      error: '',
      msgList: [],
    }
  },

  methods: {
    // 扫码成功后执行的函数
    onDecode(result) {
      // result为二维码扫描出的内容
      // 可在此处进行http请求 撰写业务逻辑
      console.log(result)
    },

    async onInit(promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = "你需要授予相机访问权限"
        } else if (error.name === 'NotFoundError') {
          this.error = "此设备上没有摄像头"
        } else if (error.name === 'NotSupportedError') {
          this.error = "需要安全上下文（HTTPS、localhost）"
        } else if (error.name === 'NotReadableError') {
          this.error = "相机已经在使用了吗？"
        } else if (error.name === 'OverconstrainedError') {
          this.error = "安装的摄像头不合适"
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = "此浏览器不支持流API"
        } else if (error.name === 'InsecureContextError') {
          this.error = `仅允许在安全环境中访问摄像头`;
        } else {
          this.error = `ERROR: Camera error (${error.name})`;
        }
      }
    }
  }
}
</script>

<style scoped>
.scanQrCode{
  width: 90%;
}
.scanBox{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.scanBox *{
  margin: 10px 0;
}
</style>