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