前端获取带参数的微信二维码并绘制在canvas上

参考博客
微信官方文档（获取小程序码）
你的小程序已经有已发布的线上版本。否则,用户扫码后,微信会提示出错
微信官方提供了三个获取小程序码的接口，这里用的是接口B

1.先获取ACCESS_TOKEN

 wx.request({
      url:
        'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET',
      method: 'GET',
      success: function (res) {
        console.log('ACCESS_TOKEN', res)
        that.getEwm(res1.access_token)
      },
    })

2.获取小程序码相关数据

async getEwm(ACCESS_TOKEN) {
    let that = this
    console.log('ACCESS_TOKEN', ACCESS_TOKEN)
    //  scene 内为需要携带参数
    const postData = {
      scene: `${that.$parent.globalData.preMemberId}`,
      page: 'pages/tabs/home',
    }
    wx.request({
      url:
        'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' +
        ACCESS_TOKEN,
      method: 'POST',
      data: JSON.stringify(postData),
      responseType: 'arraybuffer',
      success: (res) => {
        console.log('arraybuffer', res.data)
        let fs = wx.getFileSystemManager()
        console.log('fs', fs, wx.env.USER_DATA_PATH)
        fs.writeFile({
          filePath: `${wx.env.USER_DATA_PATH}/code.png`,
          data: res.data,
          encoding: 'base64',
          success(res) {
            console.log('base64', res)
            const ctx = wx.createCanvasContext('firstCanvas')
            console.log('ctx', ctx)
            // 在成功的回调函数中，定义的FilePath的值就可以直接拿去绘制到画布上了
            //drawImage  参数：路径以及数控制图片大小
            ctx.drawImage(
              `${wx.env.USER_DATA_PATH}/code.png`,
              80,
              100,
              150,
              150
            )
            // 后续各种绘制操作
            ctx.draw(false, () => {
            // 必须的有wx.canvasToTempFilePath 才能再页面显示出来小程序码
              wx.canvasToTempFilePath({
                x: 100,
                y: 100,
                width: 10,
                height: 10,
                quality: 0.9,
                canvasId: 'firstCanvas',
                success(res) {
                  console.log(res.tempFilePath)
                },
                fail(res) {
                  console.log(res)
                },
              })
            })
          },
        })
      },
      fail(res) {
        console.log(res)
      },
    })
  }