Vuejs 生成二维码

Posted 2021-05-01 编程新一

在开发项目的时候，我们可能会遇到需要为某些值生成一个二维码。比如想象这样一个场景，在我们的 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>

// script 代码
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;
      })
}

最后

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