前端如何根据微信支付接口返回的链接生成二维码

酱賊贼

于 2024-08-21 10:51:01 发布

阅读量307

点赞数 6

文章标签：微信

本文链接：https://blog.csdn.net/weixin_43671292/article/details/141387517

版权

1.安装必要的组件库qrcode.js

npm install qrcode

2.在项目中引入库

import Qrcode from 'qrcode'

3.从后端获取微信支付二维码链接

从后端返回的数据中中获取二维码链接(链接一般是weixin://wxpay/xxxxxxxxxx）

 Qrcode.toDataURL(你的二维码链接).then((url) => {
    showCode.value = true//显示弹窗
    codeImg.value = url//显示二维码图片
  })

4.在vue中显示弹窗组件（支付二维码）

<van-dialog
      v-model:show="showCode"
      title=""
      :showConfirmButton="false"
    >
      <van-icon
        name="cross"
        class="close"
        @click="closeCode"
      />
      <div>微信支付</div>
      <img :src="codeImg" />
    </van-dialog>

5.效果显示