小程序生成分享二维码

记录下我在做小程序分享保存发朋友圈的二维码踩过的坑

主要是通过getAccessToken和getUnlimited获取二维码，然后通过canvas画出来保存。

首先获取凭证（getAccessToken）

这个是获取二维码的凭证，必须先获取，这里只需要传三个参数，第一个是固定写法，后面的是secret和appid，这些也是固定的。获取到的数据是有过期时间的。一般是7200s，到期需要重新获取。

  async getAccessToken() {
    const result = await client.get('https://api.weixin.qq.com/cgi-bin/token').query({
      grant_type: "client_credential",
      secret: this.options.secret,
      appid: this.options.appid
    });
    const data = JSON.parse(result.text);
    return data;
  }

拿到凭证之后可以获取二维码了

这里我还是想吐槽一下，哪个坑货设计的接口，同一个接口使用两种传参方式，卡了我两小时。
上面的access_token是query传参，也就是拼在url后面的，后面的formdata。
access_token就是上面拿到的，scene是参数信息。也就是你分享的时候要带的参数，写成字符串，例如 “id=aaaaaa”。
page就是分享的页面路径，如 “pages/home/index”

  async getUnionid2(access_token,scene,page) {
    const result = await client.post('https://api.weixin.qq.com/wxa/getwxacodeunlimit').query({
      access_token: access_token
    }).send({
      scene: scene,
      page: page
    });
    return result.body;
  }

经过上面两步就拿到了二维码的buffer。没错不能直接使用。

上面是后的写的接口，下面小程序端发个请求。

const codeImg = await getUnlimited({scene:`id=${id}`,page:"pagesA/vote/candidate"});
const buffer = codeImg.data.data;
const bufferImg = await this.setAndGetSysImage(buffer);

下面呢是setAndGetSysImage处理方法，因为处理逻辑很多，就不写在上面了。
我的移动端是用的uni-app所以会有uni的语法。
代码就这下面，这里只说下处理思路。为啥这么麻烦呢，因为小程序各种坑，最开始直接用base64画在画布上，在模拟器好好的，但是到了手机端就不好使了，这里也卡了好久。原因大概就是canvas不支持画base64。（模拟器为什么可以…）。所以先将buffer流转为base64，再调用文件系统将base64保存在本地（图片），再拿到本地地址，画到画布上。

setAndGetSysImage(buffer){
  const fsm = wx.getFileSystemManager();
  const fileName = Date.now() + ".png";
  return new Promise((req,rej)=>{
    const filePath = wx.env.USER_DATA_PATH + "/" +fileName;
    fsm.writeFile({
      filePath,
      data: uni.arrayBufferToBase64(buffer),
      encoding: 'base64',
      success:(res)=>{
        req(filePath);
      },
      fail(err) {
        req(err);
      }
    });
  });
}

至此从生成图片到转换，到画到canvas上就完成了。至于canvas相关就换篇文章。