Vuejs 生成二维码

JellyBool

JellyBool

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

本文由 JellyBool 创作, 转载和引用遵循 署名-非商业性使用 2.5 中国大陆 进行许可。

共有 0 条评论