微信、支付宝付款码二合一
# 写在前面
前段时间，看到有网站可以将微信和支付宝的付款码合并成一个，觉得很有意思，但是在我准备尝试的时候发现是收费的。
作为一个天天付钱不收钱的，这就没有必要了。其实之前在店里面扫码付钱的时候好像就见过这样的付款码。
今天突发奇想，作为一个码农，自己就可以写一个呀。
# 思路
二合一无非就是微信或者支付宝扫码打开的都是同一个服务请求。服务器接收到请求的时候根据如 request 中的 useragent 进行判断。根据判断结果将请求重定向到对应 app 的地址。
# 过程
这样分析之后我们就需要知道支付宝和微信的 useragent 都是什么。通过网上查询知道支付宝的 useragent 中有 Alipay，微信的 useragent 中有 micromessenger。
然后就自己动手，在之前搭建的一个 web 项目中新增加一个方法。
代码完成之后在浏览器访问发现没有反应。将请求地址（局域网地址）生成为二维码。使用手机（与电脑在同一局域网）支付宝扫码测试发现可以打开，微信扫码会提示不是域名访问。处于安全考虑不允许打开。
这么看方法应该是对的，可惜没有买域名和 vps，这个也是能自己这么玩玩了。
# 之后
因为微信要是进行服务端重定向需要域名才行，只能到此为止了。
之后突然想到，也可以通过 js 进行前端的判断，之后通过 window.location.href 进行“重定向”。
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1 id="message"></h1>
</body>
<script>
function isAlipayOrWechat() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf("alipay") != -1) {
window.location.href = "HTTPS://QR.ALIPAY.COM/FKX00483JOOAAMITN2W2C1";
} else if (userAgent.indexOf("micromessenger") != -1) {
window.location.href = "wxp://f2f0fHq8R3hDDhWV4a6sKZrb5_EF0CGMljOP";
} else {
document.getElementById("message").innerHTML =
"请使用支付宝或者微信扫码";
}
}
isAlipayOrWechat();
</script>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
用 nginx 在局域网测试发现支付宝是可以成功的。微信前面说了有限制，也就没有尝试了
这样只要一个 html 就可以，比如可以把这个 html 放到这个博客里面，这样不就不需要买域名和 vps 了。
可是当我把文件放到博客之后，还是支付宝可以成功。微信扫码打开就只是一个空白页。看来微信做了限制，不允许通过 window.location.href 来指定页面请求。
# 最后
目前这个功能也就这样了，后面有机会买了 vps 和域名，再试试吧，先记一下。