使用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动态设置样式实现代码(2)
Jan 25 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
小程序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获取淘宝分类id示例
2014/01/16 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
js 编写规范
2010/03/03 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python学习资料
2007/02/08 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
最新大学生自我评价
2013/09/24 职场文书
报效祖国演讲稿
2014/09/15 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
大学校园招聘会感想
2015/08/10 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
golang操作rocketmq的示例代码
2022/04/06 Golang