做项目的时候用到了微信和支付宝的扫码支付，怎么调用扫码支付的接口在他们各自的官方文档写的很清楚，这里就不多说了。有个需求是要把两者的二维码合并成一个，这样，用户只扫描一个二维码就可以进行支付了，如果用的是微信，就调用微信支付；如果用的是支付宝，就是支付宝支付。听上去很简单对不对。
无论是微信的支付还是支付宝的支付，他们的本质都是一样的，都是一个支付的链接，里面包含了一个网址和必要的信息，比如账单，金额等等。
微信的二维码是微信提供的，付款链接直接指向微信的服务器；支付宝也是这样；那么要一个二维码支持两种支付就要在中间环节进行判断一下，这里使用 userAgent 来判断用户使用的是哪种客户端。userAgent 是一个特殊字符串头，使服务器能够识别客户使用的操作系统、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。微信的浏览器的信息里包含了 MicroMessenger，支付宝则是 AlipayClient。
判断了用户使用的客户端类型，直接通过 js 就可以直接跳转了。
市场上有很多这种第三方服务的平台，比如美团、超盟金服。他们的处理思路上面是一样的，都是先判断再跳转。
下面我们来实现一个简单的 demo，扫描二维码本质上就是通过扫描得到一个网址，所以，我们要写一个页面。
支付宝的链接可以通过 js 直接跳转；微信的不能直接跳转到支付，只能通过微信的扫描接口唤起支付模块，所以变通一下，让微信的链接变成微信的支付二维码，再扫描一次。
其实，像美团的二维码是可以直接跳转到微信的支付模块的，并不用扫描第二次，笔者尝试了很多方法仍然不能直接跳转，推测是美团和微信有相关协议让他们可以直接跳转，如果有了解的读者能赐教一二将不胜感激。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<title>jasonPayTestDemo</title>
</head>
<body>
<div class="container" id="wechat" style="display: none;">
<div style="text-align: center;">
<img src="http://qr.liantu.com/api.php?text=wxp://f2f0lGxS0y-AT4xJ9IIXI_nKcp3U2b2b_W0L">
<h3>please use wechat, long presh and pay</h3>
</div>
</div>
</body>
</html>
<script language="javascript">
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
goAndPayByWechat();
} else if(ua.match(/AlipayClient/i)=="alipayclient"){
goAndPayByAli();
} else{
alert("please use wechat or alipay");
}
function goAndPayByAli(){
window.location.href="HTTPS://QR.ALIPAY.COM/FKX09508CLUZB0JA2UHC36";
}
function goAndPayByWechat(){
document.getElementById("wechat").removeAttribute("style");
}
</script>
把上面的页面部署到服务器上，然后访问之。
下面是我部署的一个很简单的 demo，有兴趣的可以扫一扫，当然，如果你请我喝杯咖啡，在下不胜荣幸。
2in1.png
ps: 此码将在半年后失效
网友评论