新建的博客主题自带了一个“支持一下”功能，扫码可以向我付款。不过原本是分成了微信和支付宝两个收款码，后来发现官方APP生成的图并不适合直接放在页面上（太大了。。），想起前两天在github上见过的一个二维码项目：Awesome-qr.js，就想着用自己头像做个三合一的收款码。

三合一制作原理及准备工作

制作一个三合一的收款码其实就是在二维码解密后跳转的页面上，根据User-Agent跳转至三个不同的地址。支付宝可以直接跳转，由于微信和QQ所用的协议特殊，无法直接跳转，采用跳转到带收款码的图片后长按识别的方式。

需要用到：

  • 已备案域名（否则微信可能出现跳转提示）
  • Nginx
  • 三个App的User-Agent

User-Agent样本

微信

Mozilla/5.0 (Linux; Android 6.0.1; ONEPLUS A3010 Build/MXB48T) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.9 TBS/036903 Safari/537.36 MicroMessenger/6.5.10.1080 NetType/WIFI Language/zh_CN

支付宝

Mozilla/5.0 (Linux; U; Android 6.0.1; zh-CN; ONEPLUS A3010 Build/MXB48T) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.3.8.909 UWS/2.10.2.5 Mobile Safari/537.36 UCBS/2.10.2.5 Nebula AlipayDefined(nt:WIFI,ws:360|0|3.0) AliApp(AP/10.0.18.062203) AlipayClient/10.0.18.062203 Language/zh-Hans useStatusBar/true

QQ

Mozilla/5.0 (Linux; Android 7.1.2; Pixel Build/NJH47F; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043409 Safari/537.36 V1_AND_SQ_7.1.8_718_YYB_D PA QQ/7.1.8.3240 NetType/4G WebP/0.3.0 Pixel/1080

配置Nginx跳转

从上述三个User-Agent中获得关键词：MicroMessenger（微信），AlipayClient（支付宝），QQ（QQ）。

在手机上获得并保存它们的官方收款码，并解密。方法有很多，比如：https://zxing.org/w/decode.jspx）

注意QQ和微信比较特殊，需上传图片并能使用已备案域名访问。

解密后参考如下代码配置跳转：

location /qr/your_name {
        if ($http_user_agent ~* "MicroMessenger") {
            rewrite ^ http://img.domain.com/qrcode/weixin.png permanent;
        }

        if ($http_user_agent ~* "AlipayClient") {
            rewrite ^ HTTPS://QR.ALIPAY.COM/XXXXXXXXXXXXXXX permanent;
        }

        if ($http_user_agent ~* "QQ") {
            rewrite ^ http://img.domain.com/qrcode/qq.png permanent;
        }

        return 404;
    }

二维码制作

avatar

使用上面的头像作为背景，https://your.domain.com/qr/your_name 作为内容，到 awesome-qr的演示页面制作二维码：

三合一收款码样张

参考

PHP实现UA跳转：https://wrdan.com/tech/one-qrcode-pay.html
QQ收款码素材来源：https://www.iwch.me/archives/651.html