万能收款码(QQ,微信,支付宝)的实现原理

作者:QD    发布于6个月前 (2018-02-26)    阅读:  1,622  次
1

最近,二维码的玩法特别多,不论你在大街还是小巷都能看到各种二维码的身影,但是他们都是分开的,这样其实很麻烦。有没有什么办法将他们合并在一起呢?有一次,看到一个“收款码合并”的网站,他能将微信、支付宝和QQ钱包的二维码进行合并,并实现支付的功能。听上去挺神奇的,其实实现起来并不是那么难!

如果你有在IOS平台玩过WorkFlow或者是JSBOX,你会发现不论是支付宝还是微信还是QQ钱包,他们其实是一个包含了收款链接的二维码,那么我们的思路是:检测如果是支付宝浏览页面,就给出支付宝的付款链接、如果是微信,就给出微信链接
那么问题来了,如何进行判定呢?

很好办,根据 UA 就能进行判定了!不懂什么是 UA?请参照 浏览器野史 – UserAgent列传 这篇博文。

这部分的代码如下:

if(navigator.userAgent.match(/Alipay/i)) {
// 支付宝
} else if(navigator.userAgent.match(/MicroMessenger\//i)) {
// 微信
} else if(navigator.userAgent.match(/QQ\//i)) {
// QQ
} else {
// 其它
}

理论上来说,进行判定后直接给跳转到对应的收款页面就行了,然而实际测试发现在QQ和微信中并不能直接调用付款功能,只有支付宝能直接进行付款。

这里就只能用一个折中的办法:如果是QQ或微信扫的码,就再放出一个二维码的界面,让用户通过长按识别二维码进入支付流程。

最终完成的效果可以打开这个网址看看效果:http://sk.52tpw.cn/

注意:此复合收款码,只能在带有域名的浏览器中打开,本地测试的将会失效!!!

二维码收款链接获取方法

用二维码识别工具(如 https://cli.im/deqr/) 上传二维码图片并获取到二维码中的收款链接。

将获取到的收款链接粘贴并替换源码中的链接即可。

 

链接获取教程

万能收款码(QQ,微信,支付宝)的实现原理-TP

扫描出的URL地址,如上图所示,替换代码中的链接即可

效果

万能收款码(QQ,微信,支付宝)的实现原理-TP

演示网站:点击进入
开源代码(可替换其中的收款链接后运行测试)

提示:你可以先修改部分代码再运行。

1

添加新评论

已有 2 条评论

  1. sfiaer sfiaer

    可以使用,不过代码需要上传到网站上才行

    回复
  2. QD QD

    测试

    回复