栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > PHP

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

PHP 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

作者: SangSir,原文地址

前言

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

分析

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

代码如下:





    
    
    
    
    <?=$name?>
    
 * {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;}
    


    
 
 
    

Demo演示

可以通过扫描文章底部的二维码进行测试,或点击下面的演示地址:
http://lab.sangsir.com/api/do...

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/227485.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号