github地址 https://github.com/unliar/wechat-alipay-qr 又厉，有幫助的話可以star 一下謝謝。修改下配置直接能用椎瘟。測試地址hipoor.com
相關(guān)參考文檔
中文 express 簡單翻譯
nunjucks模板引擎
Nodejs文檔
現(xiàn)在覆致，二維碼支付遍地開花，小攤小販都能使用二維碼進(jìn)行收款肺蔚，大大的便利了人們的日常生活煌妈。
但是，有沒有覺得用兩個(gè)二維碼是一種極其不優(yōu)雅的體驗(yàn)宣羊。
用戶在支付之前還得判斷一下這個(gè)二維碼到底是用哪種支付工具璧诵，而且會(huì)常出現(xiàn)手抖打開了錯(cuò)誤的掃一掃界面。
因此仇冯，實(shí)現(xiàn)二維碼聚合來優(yōu)化支付體驗(yàn)十分有必要之宿。
下面我們就來用 Node 的web框架 express來實(shí)現(xiàn)一個(gè)簡單的二維碼聚合。
實(shí)現(xiàn)原理：
不同的瀏覽器會(huì)有不同的請求頭苛坚，根據(jù)請求頭的user_agent 就能對微信瀏覽器和支付寶瀏覽器進(jìn)行不同的響應(yīng)啦比被！由于微信無法直接調(diào)用支付界面，所以只能采用展示二維碼界面長按進(jìn)行支付泼舱。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
開發(fā)步驟
前置工作：
1娇昙，安裝nodejs尺迂。
2，安裝 express-generator冒掌。
3噪裕，初始化項(xiàng)目。
npm install -g express-generator
express qrcode
cd qrcode
npm install qr-image --save //生成二維碼模塊
npm install nunjucks --save //模板引擎模塊
定義配置
1股毫，修改 app.js ,引入nunjucks 模板引擎和配置州疾。
2，去除默認(rèn)的jade引擎皇拣。去除不需要的路由。
3，新增config/index.js,修改 www/bin 配置氧急。
4颗胡，修改路由 routes/index.js ,新增視圖 view/* 模板。
app.js 具體內(nèi)容
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 具體內(nèi)容
module.exports = {
hostName: "http://hipoor.com", //可訪問地址吩坝，本地開發(fā)預(yù)覽時(shí)毒姨，填你的電腦局域網(wǎng)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) {
//跳轉(zhuǎn)微信二維碼展示
res.redirect("/wechat")
} else if (agent.indexOf("AlipayClient") !== -1) {
//支付寶掃描直接跳轉(zhuǎn)到轉(zhuǎn)賬
res.redirect(alipayUrl)
} else {
//否則渲染入口頁
res.render("index")
}
});
// 微信二維碼展示地址
router.get("/wechat", (req, res) => {
res.render('wechat', {
url: wechatPayQR //你的微信轉(zhuǎn)賬圖片地址
})
})
module.exports = router;
視圖層
{% extends "layout.html" %}
{% block body %}
<h1>打錢使我快樂</h1>
<h2>長按支付</h2>
{% endblock%}
結(jié)語
這個(gè)案例只做到了單用戶钉寝，事實(shí)上多用戶也可以根據(jù)這個(gè)進(jìn)行擴(kuò)展弧呐。
具體需要完善以下邏輯：
1，最好實(shí)現(xiàn)多用戶注冊登錄
2嵌纲，前端實(shí)現(xiàn)二維碼的展示俘枫。
3，后端對用戶提交的二維碼信息進(jìn)行解析逮走，存儲(chǔ)在數(shù)據(jù)庫鸠蚪。給每個(gè)用戶信息唯一的id并渲染一個(gè)聚合二維碼入口頁面。
