关于nginx:支付二维码整合-三码合一支持支付宝QQ微信

2次阅读

共计 2299 个字符，预计需要花费 6 分钟才能阅读完成。

在写代码前，咱们须要先获取不同领取形式的二维码内容。很简略，只须要关上各个领取码，截图，而后轻易找个能够扫码的工具把各个码的内容给扫出来，失去文本内容即可。上面是我的内容：

支付宝：

https://qr.alipay.com/tsx108134acakckixsivtd4

微信：

wxp://f2f0kIl6qSrlWNFuIo8t8rXCU7Si7CC7ucQs

QQ：

https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQi5uqmQMY8Y-T_wU%3D_xxx_sign&u=QQ 号 &n= 昵称

能够看到各个领取形式都是甚于带参跳转协定，所以咱们能够用一个固定的网址，让它去检测不同的网站进而跳转不同的链接。
这一步能够用后台程序跳转，也能够用 Nginx 这样的服务器去做，因为只须要能对申请的内容做辨别就能够了。

用 Nginx 能够这样写：

location /pay {if ( $http_user_agent ~* "AlipayClient") {return 302 "https://qr.alipay.com/tsx108134acakckixsivtd4";}
    if ($http_user_agent ~* "MicroMessenger") {return 302 "wxp://f2f0kIl6qSrlWNFuIo8t8rXCU7Si7CC7ucQs";}
    if ($http_user_agent ~* "QQ") {return 302 "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQi5uqmQMY8Y-T_wU%3D_xxx_sign&u=QQ 号 &n= 昵称";}
    return 400 "不反对的类型";
}

经测试，发现 QQ, 微信不能够用😢 可能是腾讯为了平安躲避了由跳转过来的调用吧。

因为不能应用跳转去齐全反对三种领取形式了。这里咱们小改一下，首先用二维码生成工具生成款式对立的二维码，因为原生那个三家的码都长得不太一样会影响好看。

QQ:

微信：

而后小改一下下面的 Nginx 配置，改成如果是这两个的话跳转到对应的页面。

下面这个页面，如果你是从微信浏览器关上的应该会看到微信的领取码，如果是 QQ 浏览器中关上应该会看到 QQ 的领取码。如果是从其余浏览器或者 PC 则什么码都看不到。

此时的 Nginx 的配置：

location /donate {
    root /www/pages/build/donate;

    if ($http_user_agent ~* "AlipayClient") {return 302 "https://qr.alipay.com/tsx108134acakckixsivtd4";}
    if ($http_user_agent ~* "MicroMessenger") {rewrite ^/(.*) /wechat.html break; }
    if ($http_user_agent ~* "QQ") {rewrite ^/(.*) /qq.html break; }
    return 302 "https://www.pulsgarney.com/";
}

做到这里了根本能实现性能了。

但如果用户是间接从手机的客户端里关上那其实那个体验还是不太好。因为那样他们就等于是得扫码，关上对应的页面，而后再长按一次扫码能力看到收银台。这个步骤体验也很蹩脚。能够怎么优化一下呢？咱们把前端页面的代码批改一下：如果是在手机客户端中关上的那咱们就间接显示对应的领取码就好了，不要再显示那个直达页面的二维码了。

这部分的改变就看你用的是什么前端程序了，应答改就行了。上面是我这个博客的局部代码：

const [qrCode, setQrCode] = React.useState('');

React.useEffect(() => {
  const ua = window.navigator.userAgent || '';

  if (ua.includes('AlipayClient')) {setQrCode(process.env['REACT_APP_DONATE_ALIPAY'] || '');
  } else if (ua.includes('MicroMessenger')) {setQrCode(process.env['REACT_APP_DONATE_WECHAT'] || '');
  } else if (ua.includes('QQ')) {setQrCode(process.env['REACT_APP_DONATE_QQ'] || '');
  } else {setQrCode(process.env['REACT_APP_DONATE_INDEX'] || '');
  }
}, []);

因为我的博客应用了同构的 SSR. 所以须要将浏览器的代码用 React.useEffect 给包起来，否则在服务器渲染时会报错。另外各个不同的二维码内容用环境变量加载起来，这样如果须要替换内容能够不动这部分代码。

经测试，微信失常，但支付宝内如同不让加载 JS 文件？页面是加载了，但 JS 的性能全废了。。QQ 的二维码如同太简单没辨认进去…… 😭😭

折腾的过程很有意思，但没有和他们单干的能力靠 Hack 的形式实现最终的实用性还是槽点满满的，所以，要真有刚需的还是接第三方的服务吧~

正文完