制作打赏三合一链接

Author： ADMIN
发布时间：March 24, 2018
6006 views
No comments
2125 words
Categories：技术文档

最近在逛博客时，发现很多博客都带了打赏功能，虽说打赏的人可能很少，但始终是一份心意，能让博主知道自己写的文章有用，能够帮助到人。所以，我也想加一个打赏功能~

但在github逛了一圈之后发现，打赏插件基本上千篇一律的：QQ扫码/微信扫码/支付宝扫码。

有的则是每个收款码全部展现出来

微信扫这个，支付宝扫那个，不仅要加载多张二维码，还要加css/js让它变的好看，作为一个又懒又不想写这些东西的程序猿来说，这可不行。

那能不能把QQ微信支付宝三合一，只需要扫一个收款码就行呢？
这里涉及到一个知识点，则是User-Agent，大厂的webview都会携带自家的UA信息，比如说：

QQ：

MQQBrowser/6.2TBS/043221Safari/537.36QQ/7.0.0.3135
微信：

MQQBrowser/6.2 TBS 043220 Safari/537.36 MicroMessenger/6.5.8.1060NetType/4GLanguage/zh_CN
支付宝：

UCBrowser/11.5.0.939UCBS/2.10.1.6Mobile Safari/537.36AliApp(AP/10.0.15.051805)AlipayClient/10.0.15.051805 Language/zh-Hans

这样就很轻松区分是QQ还是微信还是支付宝扫码了：

以上是分析啦下面动工

<span style="color: #313131; font-family: -apple-system, 'SF UI Text', Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif; line-height: 25.2px;">User-Agent 含有 </span>`QQ/`<span style="color: #313131; font-family: -apple-system, 'SF UI Text', Arial, 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif; line-height: 25.2px;"> 为QQ</span>

User-Agent 含有 `MicroMessenger` 为微信
User-Agent 含有 `AlipayClient` 为支付宝

既然能够区分每个软件，那就可以通过自建一个网址，通过二维码生成扫描这个网址后，判断浏览器的UA，来分发不同的收款码

大致的流程则为：
客户端扫码 -> 服务端根据 User-Agent 判断客户端类型 -> 分别返回不同的处理

首先解码，可以去这里[解码](http://tool.oschina.net/qr?type=2)啦

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
<?php
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if (strpos($ua, 'MicroMessenger')) {
    $type = 'wepay';
    $name = '微信支付';    
    //你的微信支付链接
    $url = 'wxp://f2f09zG5DQPSOuUPNNMrMyxwFPagCJUzo30v';
    $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrwgr20oj303k03kglg.jpg" width="48px" height="48px" alt="'.$name.'"style="">';
}elseif (strpos($ua, 'AlipayClient')) {   
    //你的支付宝链接
    $url = 'HTTPS://QR.ALIPAY.COM/FKX05405VRFBWPNF4WJ98E';
    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=1242251966&ac=EBF630D218693B4D2D518335739288674D54816FED8990141085439E9F9715B4&n=%E6%80%BB%E5%88%86%E4%B8%8D%E4%B8%8A600%E4%B8%8D%E6%94%B9%E5%90%8D&f=wallet';
    $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrvmp427j303k03kjrb.jpg" width="48px" height="48px" alt="'.$name.'"style="">';
}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.'"style="">';
}
$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>
```
顺便打赏下作者，嘿嘿（滑稽
展示页面：[demo](https://xsiy.top/pay/)

Last modification：April 4, 2019