评论

请求官方获取小程序二维码接口之后把二维码绘制到canvas

请求官方获取小程序二维码接口之后把二维码绘制到canvas

需求前提

  1. 前端需要直接请求官方获取二维码接口https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN获取到图片的二进制内容
  2. 把获取的图片的二进制内容绘制到canvas上面

在社区搜索了一番之后整合了一下再发出来,文笔有限,多多见谅


step1

这时候已经取得了正确的access_token,对官方接口https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token= 发起请求。(access_token我是后端返回给我的)

注意

1、请求地址为https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=xxx,access_token需要直接写到请求地址后面,其他参数请参考官方文档
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html

2、把请求的responseType的值设置成arraybuffer

3、请求参数,就是data属性的值一定要JSON对象

请求成功后会返回下图数据,需要使用的是红色圈住的data属性的值,下面用变量dataBuffer表示这个值

step2

使用官方apiwx.getFileSystemManager获取全局唯一的文件管理器,使用常量fs代表文件管理器

const fs = wx.getFileSystemManager();

wx.getFileSystemManage官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html

使用常量fswriteFile方法把dataBuffer写到文件中,代码如下:

// wx.env.USER_DATA_PATH查了下是本地用户文件夹,文件的名字可以随你定义,我这里是命名为qrcode.png
fs.writeFile({
    filePath: `${wx.env.USER_DATA_PATH}/qrcode.png`,
    data: dataBuffer,
    encoding: 'base64',
    success(res) {
    	// 在成功的回调函数中,定义的FilePath的值就可以直接拿去绘制到画布上了
       ctx.drawImage(`${wx.env.USER_DATA_PATH}/qrcode.png`, width ,height);
       
       // 后续各种绘制操作
    }
 })

到这里就结束了,

// 下面是完整代码

wx.request({
    // step1
    url: https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=xxx,
    method: 'POST',
    data: JSON.stringify({
      path: xxx/xxxx,
      width: xxx
    }),
    responseType: 'arraybuffer',
    success(res) {
        // step2
    	let fs = wx.getFileSystemManager();
        fs.writeFile({
          filePath: `${wx.env.USER_DATA_PATH}/code.png`,
          data: res.data,
          encoding: 'base64',
          success(res) {
            // 在成功的回调函数中,定义的FilePath的值就可以直接拿去绘制到画布上了
           ctx.drawImage(`${wx.env.USER_DATA_PATH}/qrcode.png`, width ,height);
           // 后续各种绘制操作
         }
    }
})

后记

1、刚完成的时候有事会碰到access_token无效或者过期的报错,不过后端的同事修复了一下之后就没碰到过了
2、暂时测试了好几下都可以正常绘制,导出,扫描,没啥问题,如果有什么不足的话请多多指教。

#谢谢观看

最后一次编辑于  09-02  
点赞 1
收藏
评论

6 个评论

  • 云龙山黄茅岗村的铁柱
    云龙山黄茅岗村的铁柱
    11-14

    大神请问,我生成的二维码放在服务器 然后调用wx.getImageInfo 接口产生临时文件,我把这个临时文件draw到海报里,海报生成的二维码模糊扫描不出来 如何解决

    11-14
    赞同
    回复 1
    • russ😈
      russ😈
      11-15
      之前也碰到过这个问题 我的解决方法是:调用canvasToTempFilePath输入图片的时候destWidth和destHeight这两个参数设置成画布宽度的2倍和画布高度的2倍。(网上说3倍都好像可以,我是设置成2倍)
      11-15
      回复
  • HugTheLion
    HugTheLion
    10-28

    生成二维码时候的page路径填完后,一直显示加载

    10-28
    赞同
    回复 2
    • russ😈
      russ😈
      11-01
      可以贴一下代码看看吗,不是很懂您的意思,不好意思
      11-01
      回复
    • HugTheLion
      HugTheLion
      11-01回复russ😈
      给后端生成了
      11-01
      回复
  • 邱一欢
    邱一欢
    10-11

    这个最好是让后台请求图片,生成以后上传到OSS或CDN缓存 返回给前端图片地址。下次生成同样路径的二维码直接用缓存的就可以。没必要每次都调用微信接口。

    10-11
    赞同
    回复 1
    • russ😈
      russ😈
      10-11
      哈哈 是的 我们最新的一版小程序就是改成了阿里云的oss!
      10-11
      回复
  • 卢霄霄
    卢霄霄
    09-02

    writeFile可以省略,request直接换成downloadFile

    09-02
    赞同
    回复 12
    • russ😈
      russ😈
      09-02
      reqeust换downloadFile??
      09-02
      回复
    • 卢霄霄
      卢霄霄
      09-02回复russ😈
      对啊
      09-02
      回复
    • 卢霄霄
      卢霄霄
      09-02回复russ😈
      wx.request 换成 wx.downloadFile
      09-02
      回复
    • russ😈
      russ😈
      09-02回复卢霄霄

      试了一下不行。官方获取二维码的接口是POST请求,downloadFile是get请求。。还有请求参数也不适合吧。

      09-02
      回复
    • 卢霄霄
      卢霄霄
      09-02回复russ😈
      你到自己服务器是get,自己服务器到微信那边是post,没毛病哦
      09-02
      回复
    查看更多(7)
  • 萱爸
    萱爸
    09-01

    注意这个坑

    所有对于“api.weixin.qq.com”域名下的接口请求请全部通过后台服务器发起,请勿直接通过小程序的前端代码发起

    09-01
    赞同
    回复 1
    • russ😈
      russ😈
      09-02
      是的这个已经说过了,但是要配合服务器负载均衡,所以要让前端做这样的处理。。。所以就这样了。
      09-02
      回复
  • "
    09-01

    step2可以省去,writeFile能直接写入buffer

    09-01
    赞同
    回复 2
    • russ😈
      russ😈
      09-02
      厉害,好的 我编辑一下!
      09-02
      回复
    • 云龙山黄茅岗村的铁柱
      云龙山黄茅岗村的铁柱
      11-14
      我现在获取到二维码了 但是绘制成海报扫不出来
      11-14
      回复