开发微信小程序踩坑之路--前端获取带参数的微信二维码并绘制在canvas上

1.通过微信官方提供的api，请求二维码之前要先获取access_token

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

 

grant_type参数是固定的，拼上自己的APPID和APPSECRET，通过wx.request请求就可以了

2.然后通过access_token获取到二维码

POST https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

3.这一步是关键 

在第二步的wx.request中一定要加上

responseType:'arraybuffer'

代码如下：

wx.request({

url:"https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+ACCESS_TOKEN,

method:"POST",

contentType:"application/json",

responseType:'arraybuffer',

header:{

"Content-Type":"application/json;charset=utf-8"

},

data:post_data,

success:function (res) {}

})

post_data是你要带的参数

4.这样拿到的就是一个arraybuffer数据，然后将其存储在临时文件里,我是以二进制格式存储的

const fsm = wx.getFileSystemManager()
let name = 'tmp.bin'
let filePath = `${wx.env.USER_DATA_PATH}/${name}`
fsm.writeFile({
  filePath,
  data: bs, // bs就是拿到的arraybuffer
  encoding:'binary',
  success(res){
          
  },
  fail(e){
    console.log(e)   
  }
})

5.这样我们在本地文件里就有了二维码的图片文件，最后就是把数据读取出来给canvas画即可

路径就是上一步定义的filePath

let ctx = wx.createCanvasContext('shareCanvas'); // shareCanvas是canvas的Id
wx.getImageInfo({
  src:filePath,
  success:function (res) {
    ctx.drawImage(res.path, 0,0,90,90);
    ctx.stroke();
    ctx.draw();
  },
  fail:function(e){
    console.log(e)
  }
})

6.注意：微信给的请求二维码的api其实是给后端请求的，毕竟传的参数包含了APPID和APPSECRET，放在前端请求，参数暴露，存在安全隐患，所以最好是后端去请求，然后给前端一个地址，前端请求二维码图片地址再绘制canvas