[图片] 为什么要用云函数来做这个？ 前端一条龙不求人（后端） 利用官方资源来快速解决问题，白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 看完觉得有帮助记得点个赞哦~ 你的赞是我继续分享的最大动力！^-^

Github地址 地址 安装使用安装[代码]npm[代码]包。[代码]npm i kai-ui --save-dev[代码]使用场景该版本基于微信小程序环境、[代码]wepy[代码] 框架。 [代码]wepy-cli[代码] 版本要求 [代码]^1.7.3[代码], 低于 [代码]1.7.3[代码] 版本的可以直接把 [代码]src/component[代码] [代码]src/less[代码]下的资源文件拷贝到自己项目 [代码]component[代码] [代码]less[代码] 目录下 预览小程序[图片] 组件列表[x] cell 列表 [x] button 按钮 [x] icon 图标 [x] popup 弹出层 [x] tag 标记 [x] tab 标签 [x] select 选择 [x] toptips 顶部提示 [x] toast 轻提示组件、 [x] numberpicker 数字输入框 [x] switch 开关 [x] actionsheet 操作盘 [x] dialog 对话框 [x] uploader 上传 [x] grid 宫格 [x] loadmore 更多 [x] loading 加载中 [x] panel 面板 [x] layout 布局 [x] checkbox 复选框 [x] radio 单选框 [x] noticebar 通知栏 [x] searchbar 搜索框 [x] input 输入框 [ ] step 步骤条 [ ] slider 滑块 [ ] rate 星级评分 [ ] folder 折叠面板 [ ] backtotop 返回顶部 [ ] calander 日期选择 [ ] swipeout 滑动菜单 [ ] scrollviewrefresh 下拉刷新