小程序生成分享二维码

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

主要是通过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相关就换篇文章

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值