github地址 https://github.com/unliar/wechat-alipay-qr ，有帮助的话可以star 一下谢谢。修改下配置直接能用。测试地址hipoor.com
相关参考文档
中文 express 简单翻译
nunjucks模板引擎
Nodejs文档

现在，二维码支付遍地开花，小摊小贩都能使用二维码进行收款，大大的便利了人们的日常生活。

但是，有没有觉得用两个二维码是一种极其不优雅的体验。

用户在支付之前还得判断一下这个二维码到底是用哪种支付工具，而且会常出现手抖打开了错误的扫一扫界面。

因此，实现二维码聚合来优化支付体验十分有必要。

下面我们就来用 Node 的web框架 express来实现一个简单的二维码聚合。

实现原理：

不同的浏览器会有不同的请求头，根据请求头的user_agent 就能对微信浏览器和支付宝浏览器进行不同的响应啦！由于微信无法直接调用支付界面，所以只能采用展示二维码界面长按进行支付。agent如下，加粗部分为用于判断客户端的特征值。

微信浏览器user-agent： "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Mobile/15A372 MicroMessenger/6.5.16 NetType/4G Language/zh_CN"

支付宝user-agent: "Mozilla/5.0 (Linux; U; Android 7.0; zh-CN; BLN-AL10 Build/HONORBLN-AL10) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.6.4.950 UWS/2.11.0.20 Mobile Safari/537.36 UCBS/2.11.0.20 Nebula AlipayDefined(nt:4G,ws:360|0|3.0) AliApp(AP/10.1.2.091816) AlipayClient/10.1.2.091816 Language/zh-Hans useStatusBar/true

开发步骤

前置工作：

1，安装nodejs。
2，安装 express-generator。
3，初始化项目。

npm install -g express-generator
express  qrcode
cd qrcode 
npm install qr-image --save    //生成二维码模块
npm install  nunjucks --save   //模板引擎模块

定义配置

1，修改 app.js ,引入nunjucks 模板引擎和配置。
2，去除默认的jade引擎。去除不需要的路由。
3，新增config/index.js,修改 www/bin 配置。
4，修改路由 routes/index.js ,新增视图 view/* 模板。

app.js 具体内容

let express = require('express');
let path = require('path');
let logger = require('morgan');
let cookieParser = require('cookie-parser');
let bodyParser = require('body-parser');
let nunjucks = require('nunjucks');
let index = require('./routes/index');


let app = express();

app.enable('trust proxy')
// view engine setup
nunjucks.configure('views', {
  autoescape: false,
  express: app,
  noCache: false
});
app.set('view engine', 'html');
app.set('views', path.join(__dirname, 'views'));

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('combined'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);


// catch 404 and forward to error handler
app.use(function (req, res, next) {
  let err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

config/index.js 具体内容

module.exports = {
  hostName: "http://hipoor.com", //可访问地址，本地开发预览时，填你的电脑局域网ip+端口。
  alipayUrl: 'HTTPS://QR.ALIPAY.COM/FKX0736735EJNZE1PEYUA6', //你的支付宝收款码识别出来的地址-->https://cli.im/deqr/
  wechatPayQR: 'img/qr.png', //你的微信收款码
  port: 2666 //端口号
}

主要的路由逻辑 routes/index.js

let express = require('express');
let router = express.Router();
let qr = require("qr-image")
let {
  hostName,
  alipayUrl,
  wechatPayQR
} = require("../config/index")

// 把你的可访问地址生成一张二维码图片作为首页入口
let qrImg = qr.image(hostName, {
  type: 'png'
})
qrImg.pipe(require("fs").createWriteStream("public/img/qrImg.png"))

// 首页路由逻辑
router.get('/', function (req, res) {
//获取浏览器agent
  const {
    'user-agent': agent
  } = req.headers

  if (agent.indexOf("MicroMessenger") !== -1) {
    //跳转微信二维码展示
    res.redirect("/wechat")
  } else if (agent.indexOf("AlipayClient") !== -1) {
    //支付宝扫描直接跳转到转账
    res.redirect(alipayUrl)
  } else {
    //否则渲染入口页
    res.render("index")
  }

});

// 微信二维码展示地址
router.get("/wechat", (req, res) => {
  res.render('wechat', {
    url: wechatPayQR //你的微信转账图片地址
  })
})
module.exports = router;

视图层

{% extends "layout.html" %} 
{% block body %}

<h1>打钱使我快乐</h1>
<h2>长按支付</h2>
![]({{url}}) 
 {% endblock%}

结语

这个案例只做到了单用户，事实上多用户也可以根据这个进行扩展。
具体需要完善以下逻辑：
1，最好实现多用户注册登录
2，前端实现二维码的展示。
3，后端对用户提交的二维码信息进行解析，存储在数据库。给每个用户信息唯一的id并渲染一个聚合二维码入口页面。