评论

[开盖即食]利用“云函数”生成小程序码和将buffer流转化图片

云函数生成小程序码和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 生成码一共有三种方法:

  1. openapi.wxacode.get 小程序码,可以直接生成path,但不能传参,有次数限制
  2. openapi.wxacode.createQRCode 二维码,有次数限制
  3. 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

看完觉得有帮助记得点个赞哦~

你的赞是我继续分享的最大动力!^-^

最后一次编辑于  05-15  
点赞 8
收藏
评论
登录 后发表内容