生成小程序码的两种方式

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上传到云存储的方案