微信小程序推广二维码海报Node.js实现版

栏目: Node.js · 发布时间: 5年前

内容简介:最近公司的微信小程序项目由于业务需求需要实现二维码推广海报,而小程序的服务端代码是用node.js实现的,由于是第一次使用node.js作为服务端来实现图片的相关处理,不免走了一些坑。所以为了避免大家也像我一样花费不必要的时间爬坑,就将我再开发过程中遇到的一些过程记录下来,供大家参考,水平有限,请相关大神多多指教。在开始之前,希望你对下面两个工具的知识有一定的了解准备海报背景图一张

最近公司的微信小程序项目由于业务需求需要实现二维码推广海报,而小程序的服务端代码是用node.js实现的,由于是第一次使用node.js作为服务端来实现图片的相关处理,不免走了一些坑。所以为了避免大家也像我一样花费不必要的时间爬坑,就将我再开发过程中遇到的一些过程记录下来,供大家参考,水平有限,请相关大神多多指教。

基础知识及准备工作

在开始之前,希望你对下面两个 工具 的知识有一定的了解

request
images

准备海报背景图一张

获取微信小程序二维码

获取微信小程序二维码的方式主要有三个,具体详情请参考微信小程序官方文档;这里我们选用 getWXACodeUnlimit 接口: https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

关于微信二维码的获取有几点需要特别注意:

  1. POST 参数需要转成 JSON 字符串,不支持 form 表单提交;
  2. 只能生成已发布的小程序的二维码。

获取ACCESS_TOKEN

由于该接口请求需携带 ACCESS_TOKEN 参数,所以第一步得先获取它, 代码如下:

const request = require('request');

/**
 * [获取ACCESS_TOKEN]
 * @param  {[String]} appid         [你的小程序appid]
 * @param  {[String]} secret        [你的小程序secretKey]   
 * @return {[Object]}               [Promise]
 */
function getAccessToken(appid,secret){
    const url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' +  appid + '&secret=' + secret
    return new Promise((resolve,reject)=>{
        request(url, function(error, res, body) {
            if (!error && res.statusCode === 200) {
                resolve(JSON.parse(body));
            } else {
                reject(error, body)
            }
        })
    })
}
复制代码

获取小程序二维码

获取小程序二维码的注意事项:

如果调用成功,会直接返回图片二进制内容,如果请求失败,会返回 JSON 格式的数据。

由于二维码获取成功后返回的是图片二进制数据,可能了解node.js都会第一时间想到是用node.js的Buffer来处理二进制数据。没错,确实是用Buffer,我最初的代码如下:

const images = require("images")

/**
 * [获取二维码]
 * @param  {[String]} access_token  [ACCESS_TOKEN]  
 * @return {[Object]}               [Promise]
 */
function getQR(access_token) {
    return new Promise((resolve,reject)=>{
        const params = {
            url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token,
            method: "POST",
            json: true,
            headers: {
                "content-type": "application/json",
            },
            body: {
                scene: 'uid=123',
                width: 280
            }
        }
        request(params, function(error, res, body) {
            if (!error && res.statusCode == 200) {
                //测试: 从Buffer数据中解码图像  正式运行请删除
                images(new Buffer(body))
                
                resolve(new Buffer(body))
            } else {
                reject(error, body)
            }
        })
    })
}
复制代码

但运行发现,返回报错信息 Unknow format .于是网上各种找资料,花费了大量时间找到的都是些关于buffer如何读本地文件的资料文档。后来在论坛里发现了一位好心人发来一篇文档给我。 Node.js 不深也不浅得了解下编码 . 阅读后发现原来是因为编码的问题。具体原因可以看看那篇文章。其主要就是需要在request参数里设置: encoding: null , 所以修改后的代码如下:

const images = require("images")

/**
 * [获取二维码]
 * @param  {[String]} access_token  [ACCESS_TOKEN]  
 * @return {[Object]}               [Promise]
 */
function getQR(access_token) {
    return new Promise((resolve,reject)=>{
        const params = {
            url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token,
            method: "POST",
            json: true,
            encoding: null,
            headers: {
                "content-type": "application/json",
            },
            body: {
                scene: 'uid=123',
                width: 280
            }
        }
        request(params, function(error, res, body) {
            if (!error && res.statusCode == 200) {
                //测试: 从Buffer数据中解码图像, 正式运行请删除
                images(new Buffer(body))
                
                resolve(new Buffer(body))
            } else {
                reject(error, body)
            }
        })
    })
}
复制代码

结果运行成功!

使用 images 工具合成海报

获取二维码数据后,接下来就是需要将其更我们的海报背景图合成并保存或者上传到第三方存储服务器上。关于images库的使用请参考images官方文档, 下面直接上代码:

const images = require("images")

/**
 * [二维码海报合成]
 * @param  {[Buffer]} buf  [二维码图片Buffer数据]
 */
function composite(buf) {
    images("./public/bg.png") //加载海报背景图像文件
        .draw(images(buf), 60, 600) // 在(60,600)处绘制Logo
        .save("./public/output.jpg", { //保存图片到本地,图片质量为50
            quality : 50
        });
}
复制代码

至此,所有功能已全部完成! 下面是简单的完整运行代码:

getAccessToken(appid, secret)
        .then(res => {
            return getQR(res.access_token)
        })
        .then(buf => {
            composite(buf)
        })
复制代码

总结

  1. 小程序必修发布后才能获取二维码
  2. 获取二维码二进制数据时,一定要注意编码问题, encoding: nullencoding: nullencoding: null ,重要的事说三遍。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

互联网创业核心技术:构建可伸缩的web应用

互联网创业核心技术:构建可伸缩的web应用

【美】Artur Ejsmont / 李智慧、何坤 / 电子工业出版社 / 2016-12 / 89

可伸缩架构技术是所有互联网技术中最重要,也是最引人入胜的技术。《互联网创业核心技术:构建可伸缩的web应用》针对互联网创业需求快速迭代,业务快速发展,短时间内用户、数据、访问量激增的特点,提纲挈领地描述了伸缩性架构的基本原理与设计原则,详细阐述了Web应用前端层、服务层、数据层的可伸缩架构,并花大量篇幅讲述了缓存技术和异步处理技术的可伸缩设计及其在Web系统中的具体应用。 《互联网创业核心技......一起来看看 《互联网创业核心技术:构建可伸缩的web应用》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具