最近在做毕设，有一个获取小程序码绘制分享海报的需求，因为需要小程序码的数量较多的业务场景，所以只能采用后端生成返回给前端调用或者云开发调用。

---

生成小程序码的两种方式

HTTPS调用

---

需要后端生成返回给前端，这个方法在本文不做赘述

云函数调用

---

思路：

小程序端请求 --> 云函数API --> 返回图片的buffer --> 把buffer转化成图片

1.新建云函数

---

在 cloudfunction目录右键新建Node.js云函数 getQRCode

生成小程序码需要单独指定权限。在 getQRCode目录新建 config.json ，里面写以下内容： 

{
  "permissions": {
    "openapi": [
      "wxacode.getUnlimited"
    ]
  }
}

 小程序码的获取方式有三种，这里只用到了接口 getUnlimited

2.云函数getQRCode的js部分

---

直接贴代码

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.wxacode.getUnlimited({
      scene: event.scene, //但是新版本不能使用path传参param
      width: 300
    })
    console.log(result)
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}

直接调用，比服务端调用少了 access_token 参数

返回值是二进制的buffer流，将buffer转化即可展示图片内容

3.转化buffer流成图片的三种方法

3.1 直接将buffer转化Base64

---

console.log('云函数调用成功返回值：', res);
let bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(res.result.buffer);
self.setData({
    imgUrl: bufferImg
});

这里用到的方法是 wx.arrayBufferToBase64(buffer)转化，加好base64头，即可使用

• 优点: 方便简单
• 确定: 阅后即焚，无法保存，个别场景可能需要缓存或者拼接canvas海报

3.2 在云函数直接将Buffer上传到云存储

---

await cloud.uploadFile({
    cloudPath: 'test/' + event.userInfo.openId  + '.jpg', //这里如果可以重复就用openId，如果不可能重复就用 
    fileContent: result.buffer, //处理buffer 二进制数据
    success: res => {
        // 文件地址
        console.log(res.fileID)
    },
    fail: err =>{
        console.log(err)
    }
})

将生成的小程序码上传到自带的云存储上，可以长期永久保存

• 优点: 长期保存，合适只要生成一次反复使用的场景
• 缺点: 生成量大的话，比较占用有限云存储资源

3.3 将图片转化保存在手机本地

---

let { buffer } = res.result;
const wxFile = wx.getFileSystemManager();
const filePath = wx.env.USER_DATA_PATH + '/test.jpg';
//把图片写在本地
wxFile.writeFile({
    filePath,
    encoding: "binary",
    data: buffer,
    success: res => {
        console.log(res);  //writeFile:ok
        self.setData({
            imgUrl: filePath
        });
    }
})

这里用到的是wx.getFileSystemManager()的方法，将图片buffer转化后保存一个本地地址~

• 优点: 生成实体地址，有时候图片太大，base64会出现一些诡异的BUG
• 缺点: 耗时

 4.具体页面部分

---

Page({
    data: {
        imgUrl: "" //图片地址
    },
    getWxacode() {
        wx.cloud.init();
        let self = this;
        wx.showLoading({
            title: '请求云函数'
        })
        // 调用云函数 获取内容
        wx.cloud.callFunction({
            name: 'getQRCode',
            data: {
                scene: "id=666"
            },
            success: res => {
                console.log('云函数调用成功', res);
                self.setData({
                    imgUrl: res.result.fileID
                });
            },
            fail: err => {
                console.error('云函数调用失败', err)
            }
        })
    },
})

最后采用的是将buffer上传到云存储的方案