Vuejs 生成二维码

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

你最宝贵的财富是什么?

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

安装

也是很简单,一步到位:

npm install xkeshi/vue-qrcode --save

使用

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

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

<script>
    import Qrcode from 'vue-qrcode';
    
    // other code
    components: {
      qrcode: Qrcode
    },
</script>

注意上面,我们使用了 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 来完成你的当面付的需求。

相关文章

感觉本篇文章不错,对你有收获?

¥我要小额赞助,鼓励作者写出更好的教程
80 160 120

作者:

  • 出处: https://www.mi360.cn/articles/108
  • 本文版权归作者,欢迎转载,但未经作者同意必须保留 此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

评论区

最新评论

扫码关注