[开盖即食]利用“云函数”生成小程序码和将buffer流转化图片
[图片]
为什么要用云函数来做这个？
前端一条龙不求人（后端）
利用官方资源来快速解决问题，白piao不香吗？
之前也有不少人分享过云函数生成小程序码的方法，这里我为大家总结下不同方法的区别和优缺点~
[图片]
开盖食用思路：
小程序端请求 --> 云函数API小程序 --> 返回图片的buffer --> 把buffer转化成图片
1、云函数部分
[代码]// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.wxacode.get({
path: event.url, //传入需要配置的url，但是新版本不能传参param
width: 300
})
console.log(result)
return result
} catch (err) {
console.log(err)
return err
}
}
[代码]
新建一个云函数名字为getWxacode，示例是openapi.wxacode.get的方法，这个参数可以直接跳转小程序内部对应的page。
注意：
与 wxacode.createQRCode 总共生成的码数量限制为 100,000，如果你需要大量生成码，请谨慎调用。且新版本只能传path，不能传参param~
2、页面部分
[代码]Page({
data: {
imgUrl: "" //图片地址
},
getWxacode() {
wx.cloud.init();
let self = this;
wx.showLoading({
title: '请求云函数'
})
// 调用云函数 获取 内容
wx.cloud.callFunction({
name: 'getWxacode',
data: {
url: "pages/home/index"
},
success: res => {
console.log('云函数调用成功', res);
let bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(res.result.buffer);
self.setData({
//imgUrl: res.result.fileID
imgUrl: bufferImg
});
wx.hideLoading();
},
fail: err => {
console.error('云函数调用失败', err)
}
})
}
})
[代码]
[图片]
可以获得一个返回值，里面有个图片的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、最终方案
经过综合考虑，这里使用的是不限次数的 openapi.wxacode.getUnlimited方法。
云函数部分：
[代码]const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.wxacode.getUnlimited({
scene: event.scene
});
console.log(result)
return await cloud.uploadFile({
cloudPath: 'test/' + event.userInfo.openId + '.jpg',
fileContent: result.buffer, //处理buffer 二进制数据
success: res => {
// 文件地址
console.log(res.fileID)
},
fail: console.error
})
} catch (err) {
console.log(err)
return err
}
}
[代码]
页面代码：
[代码]Page({
data: {
imgUrl: "" //图片地址
},
getWxacode() {
wx.cloud.init();
let self = this;
wx.showLoading({
title: '请求云函数'
})
// 调用云函数 获取 内容
wx.cloud.callFunction({
name: 'getWxacode',
data: {
scene: "goTo:pages/home/index"
},
success: res => {
console.log('云函数调用成功', res);
self.setData({
imgUrl: res.result.fileID
});
wx.hideLoading();
},
fail: err => {
console.error('云函数调用失败', err)
}
})
},
})
[代码]
5、注意事项
5.1 生成码一共有三种方法：
openapi.wxacode.get 小程序码，可以直接生成path，但不能传参，有次数限制
openapi.wxacode.createQRCode 二维码，有次数限制
openapi.wxacode.getUnlimited 特定scene传参，无次数限制 （推荐使用）
1和2方法累积10w次限制
5.2 代码报错，跑不了等
[图片]
记得初始化 wx.cloud.init();
[图片]
记得部署云函数~ ctrl+s 是没用的~~~
[图片]
记得先本地调试好，再上传~~~
官方文档地址：
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.get.html
看完觉得有帮助记得点个赞哦~
你的赞是我继续分享的最大动力！^-^
