引言

最近有一个生成很多小程序码的需求，生成的小程序码还要嵌入在指定的图片模板上，就去找轮子，没找到合适的轮子。。无奈之下就决定去撸一个。目前已经完成并发布npm。

Github：github.com/Jon-Millent…

需求

如下图

• 生成带参数的小程序二维码
• 要指定尺寸和位置到模板图上
• 要批量生成若干张

开始干活

生成带参数的小程序二维码

通过官方文档，列出了生成小程序二维码的三种模式

• createWXAQRCode 获取小程序二维码，适用于需要的码数量较少的业务场景。通过该接口生成的小程序码，永久有效，有数量限制。官方说明

• getWXACode 获取小程序码，适用于需要的码数量较少的业务场景。通过该接口生成的小程序码，永久有效，有数量限制。 官方说明

• getWXACodeUnlimit 获取小程序码，适用于需要的码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制。 官方说明

这些接口都要通过access_token来换取。让我们造个类

let AngerWechat = require('anger-wechat') // 微信操作辅助库（自己写的）class miniQrcode {// 存放三种模式的接口constructor(config) {this.mode = {'getWXACode': 'https://api.weixin.qq.com/wxa/getwxacode','getWXACodeUnlimit': 'https://api.weixin.qq.com/wxa/getwxacodeunlimit','createWXAQRCode': 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode',}// 初始化微信辅助库this.$wx = new AngerWechat({appId: this.config.appId, // appId 必传appSecret: this.config.appSecret, // appSecret 必传})// 临时数据存放文件，用于存放access_token，因为access_token有2个小时的生存期，避免重复获取this.databasePath = path.join(__dirname, '../', 'database.json')}
}
复制代码

实现核心方法

   // 生成核心方法async getWxQrcodeInfo(concatConfig){// 获取已经存放的文件里的access_token，如果有的话并且有效的话就不用再掉接口let innerDatabase = this.getDatabase() // 如果本地的数据没有access_token 或者超过2个小时 就去请求获取if(!innerDatabase.access_token ||  ((new Date().getTime() - innerDatabase.create_time) > 7200000) ) {let accessInfo = await this.$wx.getGlobalAccessToken()// 获取access_token然后写入文件// 具体代码省略}// 获取到access_token去请求接口let qrcodeInfo  = await this.postMan(this.getApiUrl(innerDatabase.access_token, concatConfig.mode), // 根据mode来区调用接口concatConfig.config // 用户传的参数)let returnData = {}if(qrcodeInfo.type.indexOf('image') !== -1) { //类型是图片的就是获取成功了// 请求成功 保存图片returnData = {code: 200,image: qrcodeInfo.data,error: null}} else {returnData = {code: 500,error: JSON.stringify(qrcodeInfo.data.toString()),image: null}}return returnData}
复制代码

写好后让我们测试一下

    let qrocode = new miniQrcode({appId: 'xxx',appSecret: 'xxx'});let info = await qrocode.getWxQrcodeInfo({mode: 'getWXACode',config: {path: `pages/index/main?id=123456`},})fs.writeFileSync(`./output-juejin-test1.png`, info.image, 'utf8');
复制代码

效果：

如何测试参数？我在这个已经发布的小程序里面加了个彩蛋，就是长按红色圈出区域两次即可调出控制台看参数

将二维码合成到模板图片里面

这个操作依赖于sharp库

const sharp = require('sharp');class miniSharp {constructor(templateUrl){this.templateUrl = templateUrl}// 重置图片大小async resizeQrcode(imageBuffer, config){return new Promise(resolve => {sharp(imageBuffer).resize(config.width, config.width).toBuffer().then(function(outputBuffer) {resolve(outputBuffer)});})}// 合并图片async concatImage(buffer, config){return new Promise(resolve => {sharp(this.templateUrl).overlayWith(buffer, {top: config.top,left: config.left}).toBuffer().then(function(outputBuffer) {resolve(outputBuffer)});})}// 主函数async renderImage(qrcodeBuffer, config){let resizeQrcodeBuffer = await this.resizeQrcode(qrcodeBuffer, config)let concatQrocdeBuffer = await this.concatImage(resizeQrcodeBuffer, config)return concatQrocdeBuffer}}module.exports = miniSharp复制代码

测试一下

    let qrocode = new miniQrcode({appId: 'xxxx',appSecret: 'xxx'});let mySharp = new miniSharp('./template.png');let info = await qrocode.getWxQrcodeInfo({mode: 'getWXACode',config: {path: `pages/index/main?id=123456`},})let renderBuffer = await mySharp.renderImage(info.image, // 二维码图片的 buffer 数组 { width: 200, // 重新设置二维码宽度left: 362, // x轴偏移top: 53 // y轴偏移})fs.writeFileSync(`./output-juejin-test1.png`, renderBuffer, 'utf8');
复制代码

批量处理

正常情况下，批量生成100张需要62.556秒，平均每张需要0.62556秒，1万张大概需要 1.73小时。 批量示例代码

关于调试

使用微信开发者工具可以进行模拟参数调试

测试接口

这里我提供了一个测试接口，可以带参数生成线上的小程序码，用来调试

[get] http://wx.toolos.cc 参数

• mode 必传 [createWXAQRCode | getWXACode | getWXACodeUnlimit] 之一

注意

• 其他参数对应上面的文档的mode对应的参数，path 或者 page 需要 encodeURIComponent 一下
• 目前小程序只有一个路径 pages/index/main
• 线上服务器配置低

示例

http://wx.toolos.cc/?mode=createWXAQRCode&path=pages%2Findex%2Fmain
复制代码

关于参数模式

createWXAQRCode & getWXACode

这两种生成的参数，生成二维码数量有限，参数直接跟在path路径后面，例如：

let info = await qrocode.getWxQrcodeInfo({mode: 'createWXAQRCode',config: {page: `pages/index/main?sgr=521314&i=loveyou`},
})
复制代码

getWXACodeUnlimit

这个可以生成无限个，但是只能携带有局限性的参数scene，在这里推荐一种解析方式 key:value-key:value

let info = await qrocode.getWxQrcodeInfo({mode: 'getWXACodeUnlimit',config: {page: `pages/index/main`,scene: 'i:loveyou-sgr:521314'},
})
复制代码

解析示例

onLoad (query) {// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scenethis.scene = decodeURIComponent(query.scene)this.queryJson = JSON.stringify(query)// 尝试解析  scene 格式: shop:1-id:2try {let oneArr = this.scene.split('-')let twoJson = {}for(let i=0; i<oneArr.length; i++) {let target = oneArr[i].split(':')twoJson[target[0]] = target[1]}this.twoJson = JSON.stringify(twoJson)} catch(e) {this.twoJson = e}},
复制代码

在开发者工具中例如下面模拟