经常见到各种微信支付宝QQ收款码三合一的二维码，这其中的原理其实很简单。首先扫码后客户端请求一个网址，该网站根据请求的ua判断是哪种浏览器请求，然后再重定向到另一个网址或显示另一个扫码二维码。
首先，对3种平台的收款二维码进行解码后(如可使用草料解码(https://cli.im/deqr))，会发现其实都是一个链接。
微信： wxp://f2f0P9Hh3qi-Fd0tuIpu4WrxjL0wbhEQjV29
QQ： https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQkOa33gUYpN6Y7AU%3D_xxx_sign&u=1540223760&n=sky%E7%84%A1%E8%99%95%E4%B8%8D%E5%9C%A8%F0%9F%85%A5
支付宝： https://qr.alipay.com/fkx05544jtsjcjvifwxeo5f
因此，可以直接用php实现一个网页，通过判断ua进行不同的重定向和显示即可。为什么不能全部直接重定向？因为QQ和微信只有通过扫那个链接的二维码才能打开付款界面，只有支付宝的可以直接打开那个链接就可以跳转到付款界面。废话不多说，直接上代码：
<?php
function isWxClient()
{
return strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false;
}
function isAliClient()
{
return strpos($_SERVER['HTTP_USER_AGENT'], 'Alipay') !== false;
}
function isQQClient()
{
return strpos($_SERVER['HTTP_USER_AGENT'], 'QQ/') !== false;
}
$payurl = 'http://pay.qianxiao.fun';
$title = "浅笑的收款码";
$tipcolor = "#347cc2";
if(isWxClient()){
$payurl = 'wxp://f2f0P9Hh3qi-Fd0tuIpu4WrxjL0wbhEQjV29';
$title = "WeChat";
$tipcolor = "#46a638";
}elseif (isAliClient()) {
$payurl = 'https://qr.alipay.com/fkx05544jtsjcjvifwxeo5f';
header('Location: '.$payurl."'"); #支付宝访问直接重定向
exit();
}elseif (isQQClient()) {
$payurl = 'https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQkOa33gUYpN6Y7AU%3D_xxx_sign&u=1540223760&n=sky%E7%84%A1%E8%99%95%E4%B8%8D%E5%9C%A8%F0%9F%85%A5';
$title = "QQ";
$tipcolor = "#347cc2";
}
?>
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php echo $title; ?></title>
<style>
body, html {
height: 100%;
margin: 0;
font-size: 16px;
touch-action: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif
}
.code-item {
width: 100%
}
.ui-flex-pack-center {
-webkit-box-pack: center
}
.ui-flex-ver {
-webkit-box-orient: vertical
}
.ui-flex-align-center {
-webkit-box-align: center
}
h1, h2, h3, h4, h5 {
margin: 0
}
.ui-panel {
display: -webkit-box;
width: 100%;
-webkit-box-sizing: border-box
}
h1 {
font-size: 25px
}
#ui-head {
background-color: #fff;
padding: 10px 0
}
h2 {
font-size: 16px;
font-weight: 400
}
.ui-tips {
background-color: #fff;
color: <?php echo $tipcolor; ?>;
font-size: 20px;
text-align: center;
padding: 5px 0;
margin: 25px auto;
width: 240px;
border-radius: 20px
}
.ui-qrcode {
background-color: #fff;
border-radius: 15px;
width: 230px;
height: 230px;
margin: 0 auto;
text-align: center;
padding: 10px;
}
.ui-qrcode img {
width: 210px;
height: 210px;
margin-top: 10px;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
.ui-paytext {
border-bottom: 1px dotted #fff;
margin: 0 auto;
width: 210px;
height: 25px
}
#ui-setps {
color: #fff;
text-align: center;
font-size: 14px
}
#ui-setps i {
font-size: 30px
}
.ui-circle {
background-color: #fff;
border-radius: 50%;
color: #46a638;
text-align: center;
font-size: 11px;
width: 16px;
height: 16px;
line-height: 16px;
margin: 0 auto;
margin-bottom: 10px
}
#ui-setps > div {
padding: 15px 10px 0 10px
}
.ui-box {
-webkit-box-flex: 1
}
.ui-padtop10 {
padding-top: 8px
}
#color {
background-color: #049fda;
}
.ui-weixinlogo {
width: 55px;
height: 55px;
background: url('static/images/user.jpg');
background-size: 100% 100%;
margin: 5px;
border-radius: 30px
}
@font-face {
font-family: iconfont;
src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff')
}
.iconfont {
font-family: iconfont, serif !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-icon-check-solid:before {
content: "\e672"
}
.icon-changan:before {
content: "\e83e"
}
.icon-erweima:before {
content: "\e607"
}
</style>
</head>
<body id="color">
<script>
window.msg = false;
switch (document.title) {
case "QQ":
document.getElementById('color').style.background = "#049fda";
break;
case "WeChat":
document.getElementById('color').style.background = "#54bc6e";
break;
case "Alipay":
document.getElementById('color').style.background = "#1477ff";
break;
default:
document.getElementById('color').style.background = "#049fda";
window.msg = true;
break;
}
</script>
<div class="code-item" id="code-all">
<div id="ui-head" class="ui-panel ui-flex-pack-center ui-flex-align-center">
<div class="ui-weixinlogo">
<i class="logo">
</i>
</div>
<div>
<h1>
扫码支付
</h1>
<h2>
浅笑的收款码
</h2>
</div>
</div>
<br>
<div class="ui-box ui-panel ui-flex-align-center">
<div id="ui-content" class="ui-panel ui-flex-ver ui-flex-pack-center">
<div class="ui-tips">
<script>
if (msg) {
document.write("请扫描二维码支付")
} else {
document.write("请长按二维码支付")
}
</script>
</div>
<br>
<div class="ui-qrcode">
<div id="qrcode"></div>
<div class="erweima" hidden></div>
</div>
<div class="ui-paytext">
</div>
<div id="ui-setps" class="ui-panel ui-flex-pack-center">
<div>
<div class="ui-circle">
1
</div>
<i class="icon iconfont icon-changan">
</i>
<div class="ui-padtop10">
<script>
if (msg) {
document.write("QQ微信<br/>支付宝")
} else {
document.write("长按二维码")
}
</script>
</div>
</div>
<div>
<div class="ui-circle">
2
</div>
<i class="icon iconfont icon-erweima">
</i>
<div class="ui-padtop10">
<script>
if (msg) {
document.write("选择扫描<br/>二维码")
} else if(document.title == 'WeChat'){
document.write("识别图中的二维码")
} else {
document.write("选择扫描二维码")
}
</script>
</div>
</div>
<div>
<div class="ui-circle">
3
</div>
<i class="icon iconfont icon-icon-check-solid">
</i>
<div class="ui-padtop10">
<script>
if (msg) {
document.write("输入金额<br/>完成支付")
} else {
document.write("输入金额支付")
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/jquery.qrcode.min.js"></script>
<script>
$(() => {
$('.erweima').qrcode({
render: "canvas",
width: 500,
height: 500,
foreground: "#1C1C1C",
background: "#FFFFFF",
correctLevel: 2,
text: "<?php echo $payurl; ?>"
});
function canvasToImage(canvas) {
const image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
$('#qrcode').append(canvasToImage(document.getElementsByTagName('canvas')[0]));
});
</script>
</body>
</html>代码简单易懂，直接通过php判断后显示html，其中根据不同ua，显示不同的链接二维码、背景颜色、提示文本等。
具体效果大家可以参考我的三合一收款码：http://pay.qianxiao.fun。
另外，如果大家懒的自己写，推荐可以直接使用教书先生的三合一收款码系统（https://qrpay.oioweb.cn）。
发表评论