Vue实现二维码，让你的数据轻松传递

前言

在我们生活中，二维码的应用越来越广泛，特别是在移动互联网的时代，二维码成为了快速传达信息的一种利器。在这篇文章中，我们将会介绍如何在Vue框架下，实现一个具备扫描和查看数据的二维码。

在这一篇文章中，我们将会使用到以下两个库：

1. qrcode.js：一个简单易用的JavaScript库，可以用于生成QRCode（二维码），支持多种场景和格式设置。

2. qrcodelib：一个非常轻量级的二维码解码库，用于解码QRCode中的信息。

我们需要先安装这两个库：

npm install qrcode.js qrcodelib --save

接下来，我们将会着手构建这个二维码应用。

首先，让我们创建一个Vue组件来放置我们的二维码。我们可以使用标签来绘制QRCode。下面是一个简单的例子：

<template>
  <div>
    <canvas ref="qrcodeCanvas" :width="qrcodeWidth" :height="qrcodeHeight"></canvas>
  </div>
</template>

<script>
import QRCode from 'qrcode.js'

export default {
  name: 'QRCode',
  props: {
    qrcodeData: {
      type: String,
      required: true
    },
    qrcodeWidth: {
      type: [Number, String],
      default: 200
    },
    qrcodeHeight: {
      type: [Number, String],
      default: 200
    }
  },
  mounted () {
    // 在组件挂载后，我们会调用 qrcode.js 的 API，来实现生成二维码，并将其绘制在 canvas 上。
    const qrcode = new QRCode(this.$refs.qrcodeCanvas, {
      text: this.qrcodeData,
      width: this.qrcodeWidth,
      height: this.qrcodeHeight
    })
  }
}
</script>

在这个组件中，我们引入了qrcode.js库，接着，我们通过props来接收二维码的数据、宽度和高度。在组件挂载之后，我们通过实例化QRCode来生成二维码，最后将其绘制在标签中。

现在让我们测试一下我们的二维码是否生效。在我们的组件中添加以下代码：

mounted () {
  const qrcode = new QRCode(this.$refs.qrcodeCanvas, {
    text: this.qrcodeData,
    width: this.qrcodeWidth,
    height: this.qrcodeHeight
  })
  
  // 为二维码添加一个点击事件，当我们点击二维码时，会弹出一个对话框，显示QRCode中的信息
  this.$refs.qrcodeCanvas.onclick = () => {
    const result = qr_decode(qrcode)
    if (result) {
      alert(result)
    }
  }
}

在上述代码中，我们首先为标签添加了一个点击事件，当我们点击二维码时，会调用qr_decode函数，来解码二维码中的信息。qr_decode来自于我们前面引入的qrcodelib库。

接下来，我们需要定义qr_decode函数：

import qrcode from 'qrcodelib'

function qr_decode (qrcode) {
  // 从 canvas 标签获取 QRCode 的像素矩阵
  const imageData = qrcode._el.getContext('2d').getImageData(0, 0, qrcode._htOption.width, qrcode._htOption.height).data

  try {
    // 解码二维码中的信息
    const result = qrcode.decode(imageData)
    return result.text
  } catch (e) {
    alert('QRCode 解码失败')
    return false
  }
}

在上面的代码中，我们首先获取了标签中的像素矩阵。接着，我们调用qrcode.decode函数来解码二维码中的信息。如果二维码解码成功，将会返回QRCode中嵌入的文本信息。

如果二维码解码失败，则会弹出一个对话框，提示用户QRCode解码失败。

现在，我们已经完成了二维码扫描和信息查看的主要逻辑，接下来，我们需要通过传递一些行程数据来使用这个二维码。

<template>
  <div>
    <canvas ref="qrcodeCanvas" :width="qrcodeWidth" :height="qrcodeHeight"></canvas>
  </div>
</template>

<script>
import QRCode from 'qrcode.js'
import qrcode from 'qrcodelib'

export default {
  name: 'QRCode',
  props: {
    qrcodeData: {
      type: Object,
      required: true
    },
    qrcodeWidth: {
      type: [Number, String],
      default: 200
    },
    qrcodeHeight: {
      type: [Number, String],
      default: 200
    }
  },
  mounted () {
    // 将 this.qrcodeData 转换成字符串格式，用于生成 QRCode
    const qrcodeString = JSON.stringify(this.qrcodeData)

    // 使用 qrcode.js 生成 QRCode
    const qrcode = new QRCode(this.$refs.qrcodeCanvas, {
      text: qrcodeString,
      width: this.qrcodeWidth,
      height: this.qrcodeHeight
    })

    // 为二维码添加点击事件，当用户点击二维码时，显示出行程数据
    this.$refs.qrcodeCanvas.onclick = () => {
      const result = this.$data.qrcode.decode(qrcode)
      if (result) {
        alert(JSON.parse(result))
      }
    }
  },
  data () {
    return {
      qrcode: qrcode
    }
  }
}
</script>

总结

在上面的代码中，我们修改了props的数据类型，使用了Object来代替之前的String。在组件的mounted生命周期钩子中，我们将这个对象转换成字符串，并将其用于生成QRCode。

当用户点击QRCode时，我们通过之前定义的qr_decode函数，来解码QRCode中的信息，并将其转换成JSON对象，最后弹出一个对话框显示行程数据。

在最后一步中，我们通过data选项将二维码解码库qrcodelib引入组件中，并赋值给组件实例的data属性。这里的目的是为了组件重复使用时，避免重复引入和加载qrcodelib库。

好了，现在我们已经完成了Vue框架下的二维码实现，现在我们可以快乐的将行程数据分享给别人了。