在开发项目的时候，我们可能会遇到需要为某些值生成一个二维码。比如想象这样一个场景，在我们的 Web 应用中，如果我们接入支付宝的当面付（也就是二维码付款）或者微信的扫码支付，其实我们就会接触到生成二维码的需求，因为支付接口可能返回的是一个支付的链接（并不是二维码），所以我们就要为这个链接生成一个二维码，供用户扫码支付。

本文也是我这几天的经验，在 Vuejs 中处理这样的二维码需求，推荐大家可以使用这个 package ： xkeshi/vue-qrcode

安装

也是很简单，一步到位：

npm install xkeshi/vue-qrcode --save

使用

安装完毕之后，可以直接使用 vue-qrcode。假设我们这里有一个 Payment.vue 的 Vuejs 的组件，我们可以在 Payment.vue 的组件中这样使用：

<div 
v-show="qrcodeUrl" 
class="response">
<qrcode :value="qrcodeUrl" 
v-if="qrcodeUrl" :options="{ size: 170 }">
</qrcode>
<p>请使用支付宝扫码支付</p>
</div>

import Qrcode from 'vue-qrcode';

// other code
components: {
  qrcode: Qrcode
},

注意上面，我们使用了 qrcode 这个组件，引用自 vue-qrcode,然后当支付接口返回我们的支付链接的时候，我们才显示这个二维码：

 makePayment() {
    axios.post('/payment', {
      }).catch(error => {
        this.errorMessage = error.data.message;
      }).then(response => {
      this.qrcodeUrl =
       response.data.credential.alipay_qr;

      })
}

这里的逻辑大概就是演示支付宝当面付返回的支付数据，其中credential.alipay_qr 就是链接地址

但是这个链接地址你是不能之间在浏览器访问的，所以我们才需要将这个地址转为二维码，再使用支付宝客户端去扫码，才能正确发起支付。

最后

所以，如果你在你的项目中也遇到这样的场景的使用，可以考虑一下 xkeshi/vue-qrcode 来完成你的当面付的需求。