使用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 相关文章推荐
jquery multiSelect 多选下拉框
Jul 09 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
JavaScript数组方法总结分析
May 06 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
JS 实现分页打印功能
May 16 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 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长字符串定义方法
2012/07/12 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
详解php用static方法的原因
2018/09/12 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
Angular5中状态管理的实现
2018/09/03 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python切片知识解析
2016/03/06 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
社区七一党员活动方案
2014/01/25 职场文书
护理目标管理责任书
2014/07/25 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers