评论

请求官方获取小程序二维码接口之后把二维码绘制到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、暂时测试了好几下都可以正常绘制,导出,扫描,没啥问题,如果有什么不足的话请多多指教。

#谢谢观看

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

10 个评论

  • Skye Yuan
    Skye Yuan
    06-02

    开发工具调试时,png图片保存后,根本无法打开,直接赋值到image组件的src中也并不能正常显示,这是什么原因呢?求指教

    06-02
    赞同
    回复
  • Da
    Da
    04-13

    canvas 2d drawImage 不能用临时路径,这个有解决方案吗?

    04-13
    赞同
    回复 1
    • russ😈
      russ😈
      04-19
      好像可以使用临时路径吧?官方的drawImage api的DEMO好像都是用chooseImage返回临时路径
      04-19
      回复
  • 江
    04-03

    MARK,则好需要:)

    04-03
    赞同
    回复
  • 江
    04-03

    path 可以带参数吗?

    04-03
    赞同
    回复 1
    • russ😈
      russ😈
      04-19
      不清楚呢,没试过
      04-19
      回复
  • 普洛鑫信息科技有限公司
    普洛鑫信息科技有限公司
    2019-11-14

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

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

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

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

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

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

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

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

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

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

    注意这个坑

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

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

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

    2019-09-01
    赞同
    回复 2
登录 后发表内容