前言
最近在逛博客时, 发现很多博客都带了打赏功能, 虽说打赏的人可能很少, 但始终是一份心意, 能让博主知道自己写的文章有用, 能够帮助到人所以, 我也想加一个打赏功能~
分析
但在 github 逛了一圈之后发现, 打赏插件基本上千篇一律的: QQ 扫码 / 微信扫码 / 支付宝扫码
有的是点击每个按钮出现每个收款码
有的则是每个收款码全部展现出来
微信扫这个, 支付宝扫那个, 不仅要加载多张二维码, 还要加 CSS/js 让它变的好看, 作为一个又懒又不想写这些东西的程序猿来说, 这可不行
那能不能把 QQ 微信支付宝三合一, 只需要扫一个收款码就行呢?
这里涉及到一个知识点, 则是 User-Agent, 大厂的 webview 都会携带自家的 UA 信息, 比如说:
- QQ:
- MQQBrowser / 6.2 TBS / 043221 Safari / 537.36 QQ / 7.0.0.3135
微信:
MQQBrowser / 6.2 TBS 043220 Safari / 537.36 MicroMessenger / 6.5.8.1060 NetType / 4G Language / zh_CN
支付宝:
UCBrowser / 11.5.0.939 UCBS / 2.10.1.6 Mobile Safari / 537.36 AliApp(AP / 10.0.15.051805) AlipayClient / 10.0.15.051805 Language / zh - Hans
这样就很轻松区分是 QQ 还是微信还是支付宝扫码了:
User-Agent 含有 QQ/ 为 QQ
User-Agent 含有 MicroMessenger 为微信
User-Agent 含有 AlipayClient 为支付宝
既然能够区分每个软件, 那就可以通过自建一个网址, 通过二维码生成扫描这个网址后, 判断浏览器的 UA, 来分发不同的收款码
大致的流程则为:
客户端扫码 -> 服务端根据 User-Agent 判断客户端类型 -> 分别返回不同的处理
开始折腾
首先解码 QQ 微信和支付宝生成的付款码, 可以去这里在线解码
QQ:
https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=17878127&ac=E04BE442991E7FFED28B3B5C3E187148F063DC3C6DACAD2983C87B482FC9E7AD&n = 薛定谔的猫 & f=wallet
(https 协议, 无法唤醒 QQ)
支付宝:
HTTPS://QR.ALIPAY.COM/FKX03549OW666ME7BXWF7A
(https 协议, 可直接唤醒支付宝 APP)
微信:
wxp://f2f09hjzo72AAYEITIBaolV-3cvGrDjE0q7k
(微信自己的支付协议, 无法唤醒微信)
下面就可以直接写代码了, 判断 User-Agent 如果是支付宝直接跳转支付宝链接, 如果是 QQ 和微信则跳转 QQ 和微信的链接
但由于 QQ 与微信无法直接唤醒 APP, 所以直接输出一个 QQ 与微信的二维码, 然后长按扫码实现支付
代码如下:
- <?php
- $ua = $_SERVER['HTTP_USER_AGENT'];
- if (strpos($ua, 'MicroMessenger')) {
- $type = 'wepay';
- $name = '微信支付';
- // 微信支付链接
- $url = 'wxp://f2f09hjzo72AAYEITIBaolV-3cvGrDjE0q7k';
- $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrwgr20oj303k03kglg.jpg"width="48px"height="48px"alt="'.$name.'">';
- }
- elseif (strpos($ua, 'AlipayClient')) {
- // 支付宝链接
- $url = 'HTTPS://QR.ALIPAY.COM/FKX03479QJ0RVOS3UJLQAE';
- header('location:' . $url);
- }
- elseif (strpos($ua, 'QQ/')) {
- $type = 'qq';
- $name = 'QQ 钱包支付';
- //QQ 钱包支付链接
- $url = 'https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=17878127&ac=E04BE442991E7FFED28B3B5C3E187148F063DC3C6DACAD2983C87B482FC9E7AD&n = 薛定谔的猫 & f=wallet';
- $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrvmp427j303k03kjrb.jpg"width="48px"height="48px"alt="'.$name.'">';
- }
- else {
- $type = 'other';
- $name = '打赏作者';
- $url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
- $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojs089x6tj303k03kjr6.jpg"width="48px"height="48px"alt="'.$name.'">';
- }
- $qr_img = '<img src="http://qr.liantu.com/api.php?text='.urlencode($url).'">';
- ?>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="renderer" content="webkit">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title><?=$name?></title>
- <style type="text/css">
- * {margin: auto;padding: 0;border: 0;}
- html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%}
- body {font-family: -apple-system, SF UI Text, Arial, Microsoft YaHei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;color: #333;}
- img {max-width: 100%;}
- h3 {padding: 10px;}
- .container {text-align: center;}
- .title {padding: 2em 0;background-color: #fff;}
- .content {padding: 2em 1em;color: #fff;}
- .wepay {background-color: #23ac38;}
- .qq {background-color: #4c97d5;}
- .other {background-color: #ff7055;}
- </style>
- </head>
- <body class="<?=$type?>">
- <div class="container">
- <div class="title"><?=$icon_img?><h1><?=$name?></h1></div>
- <div class="content"><?=$type=='other'?$qr_img.'<h3 > 请使用支付宝微信 QQ 客户端扫码付款 </h3>':$qr_img.'<h3 > 扫描或长按识别二维码, 向 TA 付款 </h3>'?></div>
- </div>
- </body>
- </html>
来源: https://segmentfault.com/a/1190000013301132