|
|
|
|
移动端

制作QQ微信支付宝三合一收款码

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

作者:SangSir来源:segmentfault|2018-02-25 17:15

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

前言

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

分析

但在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与微信的二维码,然后长按扫码实现支付。

代码如下:

  1. <?php  
  2. $ua = $_SERVER['HTTP_USER_AGENT'];  
  3. if (strpos($ua, 'MicroMessenger')) {  
  4.     $type = 'wepay' 
  5.     $name = '微信支付' 
  6.     //微信支付链接  
  7.     $url = 'wxp://f2f09hjzo72AAYEITIBaolV-3cvGrDjE0q7k' 
  8.     $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrwgr20oj303k03kglg.jpg" width="48px" height="48px" alt="'.$name.'">' 
  9.  
  10. elseif (strpos($ua, 'AlipayClient')) {  
  11.     //支付宝链接  
  12.     $url = 'HTTPS://QR.ALIPAY.COM/FKX03479QJ0RVOS3UJLQAE' 
  13.     header('location: ' . $url);  
  14.  
  15. elseif (strpos($ua, 'QQ/')) {  
  16.     $type = 'qq' 
  17.     $name = 'QQ钱包支付' 
  18.     //QQ钱包支付链接  
  19.     $url = 'https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=17878127&ac=E04BE442991E7FFED28B3B5C3E187148F063DC3C6DACAD2983C87B482FC9E7AD&n=薛定谔的猫&f=wallet' 
  20.     $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrvmp427j303k03kjrb.jpg" width="48px" height="48px" alt="'.$name.'">' 
  21.  
  22. else {  
  23.     $type = 'other' 
  24.     $name = '打赏作者' 
  25.     $url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];  
  26.     $icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojs089x6tj303k03kjr6.jpg" width="48px" height="48px" alt="'.$name.'">' 
  27.  
  28. $qr_img = '<img src="http://qr.liantu.com/api.php?text='.urlencode($url).'">' 
  29. ?>  
  30. <!DOCTYPE html>  
  31. <html>  
  32. <head>  
  33.     <meta charset="utf-8" 
  34.     <meta name="renderer" content="webkit" 
  35.     <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" 
  36.     <meta name="viewport" content="width=device-width, initial-scale=1.0" 
  37.     <title><?=$name?></title>  
  38.     <style type="text/css" 
  39.         * {margin: auto;padding: 0;border: 0;}  
  40.         html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%}  
  41.         body {font-family: -apple-system, SF UI Text, Arial, Microsoft YaHei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;color: #333;}  
  42.         img {max-width: 100%;}  
  43.         h3 {padding: 10px;}  
  44.         .container {text-align: center;}  
  45.         .title {padding: 2em 0;background-color: #fff;}  
  46.         .content {padding: 2em 1em;color: #fff;}  
  47.         .wepay {background-color: #23ac38;}  
  48.         .qq {background-color: #4c97d5;}  
  49.         .other {background-color: #ff7055;}  
  50.     </style>  
  51. </head>  
  52. <body class="<?=$type?>" 
  53.     <div class="container" 
  54.         <div class="title"><?=$icon_img?><h1><?=$name?></h1></div>  
  55.         <div class="content"><?=$type=='other'?$qr_img.'<h3>请使用支付宝、微信、QQ客户端扫码付款</h3>':$qr_img.'<h3>扫描或长按识别二维码,向TA付款</h3>'?></div>  
  56.     </div>  
  57. </body>  
  58. </html> 

Demo演示

可以通过扫描文章底部的二维码进行测试,或点击下面的演示地址:

http://lab.sangsir.com/api/do... 

【编辑推荐】

  1. 开源!js实现微信/QQ直接跳转到支付宝APP打开口令领红包!附:demo
  2. PHP 霸主地位被动摇,JIT 是穷途末路后的绝地反击?
  3. PHP霸主地位被动摇,JIT是穷途末路后的绝地反击?
  4. 你的PHP/Laravel网站是否足够安全?
  5. PHP漏洞|一张GIF图片就能让服务器宕机的PHP漏洞
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

XML案例解析教程

本书对开发XML应用程序给予了详细指导,其中一些应用程序甚至对于您来说是完全陌生的。这些应用程序包括XML 1.0,以及与XSLT、XQuery和XPat...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊