Vue使用二维码生成微信支付

小鑫学习笔录

于 2022-07-06 19:00:03 发布

阅读量1.1k

点赞数 2

文章标签： vue.js 微信前端

本文链接：https://blog.youkuaiyun.com/weixin_51619945/article/details/125645939

版权

本文介绍了如何在Vue项目中利用第三方插件进行微信支付二维码的生成，通过ES6/ES7的Promise或Async/Await处理异步操作，并展示了在Element UI的MessageBox中的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装第三方插件

npm install --save qrcode

使用时 ES6/ES7:Promises 和 Async/Await 可以用来代替回调函数。

import QRCode from 'qrcode'

// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

示例:生成及使用elementUI中的MessageBox中的使用

// 弹出框
    async open () {
      // 生成二维码
      let url = await QRCode.toDataURL(this.payInfo.codeUrl)
      this.$alert(`<img src=${url} />`, '请你微信支付', {
        dangerouslyUseHTMLString: true,
        // 中间布局
        center: true,
        // 是否显示取消按钮
        showCancelButton: true,
        // 取消按钮文本内容
        cancelButtonText: '支付遇见问题',
        // 确定按钮的文本内容
        confirmButtonText: '已支