使用express获取微信小程序二维码小记


Posted in Javascript onMay 21, 2019

前言

遇到了一个需求,想要扫码后,进入微信小程序的某一个页面,这就要求二维码携带参数。

微信小程序开发文档很简单,但不太具体。

经百度和折腾,在express中成功获得了带参数的二维码。

总结以下几步,供参考。

1.express项目中引入http请求工具

为什么要在服务端引入这个工具?因为还需要用这个工具去找微信服务端拿access_token接口凭证,来保证安全。

笔者用的是axios。cmd进入根目录,npm安装。

# npm i axios --save

肯定需要写一个获得二维码的接口。在写这个接口的文件中引入axios即可,接口路由的写法不具体展开介绍。

import express from 'express';
import axios from 'axios'; //引入axios库
let qrcode= express.Router();
qrcode.post('/getQrode',async (req,res)=>{
  try {
    ...
    //待写接口内容区域
  } catch (error) {
    throw error;
  }
})
export default qrcode;

引入了库,定义了路由,也定义了一个post接口。第一步准备完毕。

2.获取access_token

找微信服务端拿access_token,需要用上刚刚引入的axios工具了。

通过官方文档介绍,获取access_token需要三个参数,一个常量grant_type,两个变量分别是appid和secret(注册小程序的时候就会获得)

修改接口即可获得access_token

import express from 'express';
import axios from 'axios';
let qrcode= express.Router();
qrcode.post('/share',async (req,res)=>{
  try {
    let appid = 'wxc********b7a';
    let secret = '2bfa**************e8682';
    let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
    axios.get(url).then(res2=>{
      //access_token就在res2中
      let access_token = res2.data.access_token;
      //待继续补充区域
    });
  } catch (error) {
    console.log(error)
  }
})
export default qrcode;

拿到了access_token接口凭证了,继续下一步。

3.获取二维码的二进制数据

阅读文档,得知需要进一步传参,请求微信服务端获取二维码的buffer数据。

需要携带的参数可以写在scene中。其他参数文档中介绍的已经很具体。

然而,这里有两个坑要注意!

第一个坑:access_token参数要写在url中,不然请求后会报未传access_token的错。

第二个坑:要设置响应格式,否则请求回来的buffer数据总是被编译成String字符串,造成文件损坏,就无法转化为正常图片(这个折磨了我好久)

import express from 'express';
import axios from 'axios';
let qrcode = express.Router();
qrcode.post('/share',async (req,res)=>{
  try {
    let appid = 'wxc********b7a';
    let secret = '2bfa**************e8682';
    let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
    axios.get(url).then(res2=>{
      let scene = req.body._id;//开发者自己自定义的参数
      axios(
        {
          headers:{"Content-type":"application/json"},
          method: 'post',
          responseType: 'arraybuffer',
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+access_token+'',
          data:{
            scene:scene,
            page:'pages/infor/main',
            width: 280
          }
        }
      ).then(res3=>{
        //请求到的二维码buffer就在res3中
        //待完善区域
      })
    });
  } catch (error) {
    console.log(error)
  }
})
export default qrcode;

第二次axios请求,用option配置的方式,设置了responseType,避开了第二个坑。二维码的buffer数据就在res3中。

4.用buffer生成图片

只要buffer数据是完整的,就能正确生成二维码。

因为需要生成图片,所以需要引用fs模块和path模块。

import express from 'express';
import axios from 'axios';
import path from 'path';
import fs from 'fs';
let qrcode= express.Router();
qrcode.post('/share',async (req,res)=>{
  try {
    let appid = 'wxc********b7a';
    let secret = '2bfa**************e8682';
    let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
    axios.get(url).then(res2=>{
      let access_token = res2.data.access_token;
      let scene = req.body._id;
      axios(
        {
          headers:{"Content-type":"application/json"},
          method: 'post',
          responseType: 'arraybuffer',
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+access_token+'',
          data:{
            scene:scene,
            page:'pages/infor/main',
            width: 280
          }
        }
      ).then(res3=>{
        let src = path.dirname(__dirname).replace(/\\/g,'/')+`/public/photo/${req.body._id}.png`;
        fs.writeFile(src, res3.data, function(err) {
          if(err) {console.log(err);}
          res.json({msg:ok});
        });
      })
    });
  } catch (error) {
    console.log(error);
    res.json({error})
  }
})

export default qrcode;

就会在根目录下的public/photo文件夹中生成制定名称的二维码图片。供小程序访问调用。

后记

获取二维码后,可以在前端利用canvas进行图片绘制,也可以在后端生成图片。可根据业务需求自行选择。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
详解vue表单——小白速看
Apr 08 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
详解React 元素渲染
Jul 07 Javascript
小程序server请求微信服务器超时的解决方法
May 21 #Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 #Javascript
用node.js写一个jenkins发版脚本
May 21 #Javascript
vue-router源码之history类的浅析
May 21 #Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 #Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 #Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 #Javascript
You might like
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
动态控制Table的js代码
2007/03/07 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
详解Python中的array数组模块相关使用
2016/07/05 Python
Python列表切片用法示例
2017/04/19 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python 实现dict转json并保存文件
2019/12/05 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
家长评语怎么写
2014/12/30 职场文书
八达岭长城导游词
2015/01/30 职场文书
保研推荐信格式
2015/03/25 职场文书
奖励通知
2015/04/22 职场文书
十二生肖观后感
2015/06/12 职场文书
红楼梦读书笔记
2015/06/25 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
win10下go mod配置方式
2021/04/25 Golang
JavaScript实现优先级队列
2021/12/06 Javascript
Python中request的基本使用解决乱码问题
2022/04/12 Python
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS