小程序点击支付按钮生成二维码

先引入相关js文件

const QRCode = require('../../utils/weapp-qrcode.js')      // 文件可自行百度

数据定义

data:{
  code_url:'',     // 显示的二维码url
}

js页面触发的事件方法

  pay(){
    var that = this
    wx.ajax({
      url:'test/pay',       // 仅为示例，并非真实的接口地址
      data: {}
    }).then(res => {
      if (res.data.resultCode == '0') {
        that.setData({
          code_url: res.data.content.code_url
        })
        that.createCode(res.data.content.code_url)
      } else {
        wx.showToast({
          title:res.data.message,
          icon: 'none'
        })
      }
    })
  },
  createCode(url){
    qrcode = new QRCode('canvas', {   //'canvas'为html中定义的canvas-id
      text: url,
      width: 150,       // 二维码宽度
      height: 150,        // 二维码高度
      colorDark: "#000000",    //设置二维码双色
      colorLight: "#ffffff",    //设置二维码双色
      correctLevel: QRCode.CorrectLevel.H,    //容错级别
    });
  },

wxml页面

<button bindtap="pay">支付</button>
<canvas canvas-id='canvas' wx:if="{{code_url!=''}}" class="canvas_style"></canvas>

以上即可实现点击支付展示二维码啦～～