引言

最近有一個(gè)生成很多小程序碼的需求，生成的小程序碼還要嵌入在指定的圖片模板上，就去找輪子，沒(méi)找到合適的輪子。。無(wú)奈之下就決定去擼一個(gè)。目前已經(jīng)完成并發(fā)布npm。

Github：github.com/Jon-Millent…

需求

如下圖

• 生成帶參數(shù)的小程序二維碼
• 要指定尺寸和位置到模板圖上
• 要批量生成若干張

開(kāi)始干活

生成帶參數(shù)的小程序二維碼

通過(guò)官方文檔，列出了生成小程序二維碼的三種模式

• createWXAQRCode 獲取小程序二維碼，適用于需要的碼數(shù)量較少的業(yè)務(wù)場(chǎng)景。通過(guò)該接口生成的小程序碼，永久有效，有數(shù)量限制。官方說(shuō)明

• getWXACode 獲取小程序碼，適用于需要的碼數(shù)量較少的業(yè)務(wù)場(chǎng)景。通過(guò)該接口生成的小程序碼，永久有效，有數(shù)量限制。 官方說(shuō)明

• getWXACodeUnlimit 獲取小程序碼，適用于需要的碼數(shù)量極多的業(yè)務(wù)場(chǎng)景。通過(guò)該接口生成的小程序碼，永久有效，數(shù)量暫無(wú)限制。 官方說(shuō)明

這些接口都要通過(guò)access_token來(lái)?yè)Q取。讓我們?cè)靷€(gè)類

let AngerWechat = require('anger-wechat') // 微信操作輔助庫(kù)（自己寫的）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',}// 初始化微信輔助庫(kù)this.$wx = new AngerWechat({appId: this.config.appId, // appId 必傳appSecret: this.config.appSecret, // appSecret 必傳})// 臨時(shí)數(shù)據(jù)存放文件，用于存放access_token，因?yàn)閍ccess_token有2個(gè)小時(shí)的生存期，避免重復(fù)獲取this.databasePath = path.join(__dirname, '../', 'database.json')} } 復(fù)制代碼

實(shí)現(xiàn)核心方法

// 生成核心方法async getWxQrcodeInfo(concatConfig){// 獲取已經(jīng)存放的文件里的access_token，如果有的話并且有效的話就不用再掉接口let innerDatabase = this.getDatabase() // 如果本地的數(shù)據(jù)沒(méi)有access_token 或者超過(guò)2個(gè)小時(shí) 就去請(qǐng)求獲取if(!innerDatabase.access_token || ((new Date().getTime() - innerDatabase.create_time) > 7200000) ) {let accessInfo = await this.$wx.getGlobalAccessToken()// 獲取access_token然后寫入文件// 具體代碼省略}// 獲取到access_token去請(qǐng)求接口let qrcodeInfo = await this.postMan(this.getApiUrl(innerDatabase.access_token, concatConfig.mode), // 根據(jù)mode來(lái)區(qū)調(diào)用接口concatConfig.config // 用戶傳的參數(shù))let returnData = {}if(qrcodeInfo.type.indexOf('image') !== -1) { //類型是圖片的就是獲取成功了// 請(qǐng)求成功 保存圖片returnData = {code: 200,image: qrcodeInfo.data,error: null}} else {returnData = {code: 500,error: JSON.stringify(qrcodeInfo.data.toString()),image: null}}return returnData} 復(fù)制代碼

寫好后讓我們測(cè)試一下

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'); 復(fù)制代碼

效果：

如何測(cè)試參數(shù)？我在這個(gè)已經(jīng)發(fā)布的小程序里面加了個(gè)彩蛋，就是長(zhǎng)按紅色圈出區(qū)域兩次即可調(diào)出控制臺(tái)看參數(shù)

將二維碼合成到模板圖片里面

這個(gè)操作依賴于sharp庫(kù)

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)});})}// 主函數(shù)async renderImage(qrcodeBuffer, config){let resizeQrcodeBuffer = await this.resizeQrcode(qrcodeBuffer, config)let concatQrocdeBuffer = await this.concatImage(resizeQrcodeBuffer, config)return concatQrocdeBuffer}}module.exports = miniSharp復(fù)制代碼

測(cè)試一下

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 數(shù)組 { width: 200, // 重新設(shè)置二維碼寬度left: 362, // x軸偏移top: 53 // y軸偏移})fs.writeFileSync(`./output-juejin-test1.png`, renderBuffer, 'utf8'); 復(fù)制代碼

批量處理

正常情況下，批量生成100張需要62.556秒，平均每張需要0.62556秒，1萬(wàn)張大概需要 1.73小時(shí)。 批量示例代碼

關(guān)于調(diào)試

使用微信開(kāi)發(fā)者工具可以進(jìn)行模擬參數(shù)調(diào)試

測(cè)試接口

這里我提供了一個(gè)測(cè)試接口，可以帶參數(shù)生成線上的小程序碼，用來(lái)調(diào)試

[get] http://wx.toolos.cc 參數(shù)

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

注意

• 其他參數(shù)對(duì)應(yīng)上面的文檔的mode對(duì)應(yīng)的參數(shù)，path 或者 page 需要 encodeURIComponent 一下
• 目前小程序只有一個(gè)路徑 pages/index/main
• 線上服務(wù)器配置低

示例

http://wx.toolos.cc/?mode=createWXAQRCode&path=pages%2Findex%2Fmain 復(fù)制代碼

關(guān)于參數(shù)模式

createWXAQRCode & getWXACode

這兩種生成的參數(shù)，生成二維碼數(shù)量有限，參數(shù)直接跟在path路徑后面，例如：

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

getWXACodeUnlimit

這個(gè)可以生成無(wú)限個(gè)，但是只能攜帶有局限性的參數(shù)scene，在這里推薦一種解析方式 key:value-key:value

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

解析示例

onLoad (query) {// scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時(shí)傳入的 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}}, 復(fù)制代碼

在開(kāi)發(fā)者工具中例如下面模擬

總結(jié)

以上是生活随笔為你收集整理的批量生成100万张小程序码？了解一下。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。