分析
微信掃這個,支付寶掃那個,不僅要加載多張二維碼,還要加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>