多合一收款二维码原理及实现(源码)

mengkun 38,066 75

最近芝麻二维码的“收款码合并”火了,它能将微信收款码和支付宝收款码合并为一个二维码!听上去感觉很神奇,其实原理非常简单!

无论是支付宝还是微信的收款码,其本质上是一个包含了收款链接的二维码。所以我们的思路是:检测如果是支付宝浏览页面,就给出支付宝的付款链接、如果是微信,就给出微信链接……

那么问题来了,如何进行判定呢?

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

这部分的代码如下:

  1. if(navigator.userAgent.match(/Alipay/i)) {
  2.     // 支付宝
  3. else if(navigator.userAgent.match(/MicroMessenger\//i)) {
  4.     // 微信
  5. else if(navigator.userAgent.match(/QQ\//i)) {
  6.     // QQ
  7. else {
  8.     // 其它
  9. }

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

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

最终完成的效果如下:

多合一收款二维码原理及实现(源码)

你可以用 QQ 或是微信或是支付宝中的任意一个扫描这个二维码进行测试(当然如果还打个款就再好不过了,哈哈哈哈…… [憨笑] )

成品源码下载(单文件纯 html 实现,需上传至网站空间使用):

Github 直链下载

注:请将代码中的收款链接按以下教程修改为自己的。

请用专门的 Html 编辑器(如 notepad++)进行编辑,切勿直接用记事本编辑,否则可能出现中文乱码!

收款链接获取方法

以下以微信为例,QQ、支付宝的获取方法类似。

打开微信,点击右上角>收付款

多合一收款二维码原理及实现(源码)

找到“二维码收款”

多合一收款二维码原理及实现(源码)

将得到的收款二维码保存(截图)

多合一收款二维码原理及实现(源码)

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

多合一收款二维码原理及实现(源码)

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

多合一收款二维码原理及实现(源码)

发表评论 取消回复
表情 图片 链接 代码

  1. 啊哈
    啊哈 Lv 1

    QQ扫码出现非官方链接 没办法支付

  2. 徐
    Lv 1

    二维码链接替换后,手机扫描二维码闪退,怎么回事啊?帮忙解决一下

    • 徐
      Lv 1

      @徐我是用notepad++替换链接保存后,直接打开扫的!

    • 徐
      Lv 1

      @徐无法跳转到支付页面,直接闪退!

    • 徐
      Lv 1

      @徐试了好久,实在是跳转不过去啊!

  3. 叶惜
    叶惜 Lv 1

    为什么微信会跳转到一个新的窗口再次扫描,怎么解决?

  4. 王小亮
    王小亮 Lv 1

    NORKSOFT官网 友链打不开 哥··

  5. 王小亮
    王小亮 Lv 1

    坤哥,默默地能不能教教我,小白也是很懵逼啊,但是看着这操作6的飞起

  6. 追忆
    追忆 Lv 1

    我按你的教程搞的 可是出来是个白页面 查看图片

    • mengkun
      mengkun 站长

      @追忆QQ 的收款链接里面换行了。双引号中的内容不要有换行

  7. x240
    x240 Lv 1

    微信的失效了,显示的是网址

  8. 佳程网络

    QQ的失效了

  9. 小吾
    小吾 Lv 1

    二维码保存到手机相册,再扫一扫里打开相册找不到二维码,或者弹出提示未发现二维码

  10. 小眼瓜
    小眼瓜 Lv 1

    按您的教程。全部替换了。最终生成的二维码,微信,QQ都正常有效。但是支付宝的却没有替换,跳转的还是您的支付宝。问题可能出在哪?

    • mengkun
      mengkun 站长

      @小眼瓜可能是你的网站用了 CDN,缓存没更新
      也可能是你的浏览器缓存没更新
      还可能是你的支付宝收款链接贴错了

      • 小眼瓜
        小眼瓜 Lv 1

        @mengkun刷新后,解决了。感谢。

  11. 迷弟
    迷弟 Lv 1

    微信扫码后提示非官方网页咋整 大佬?

  12. 洲
    Lv 1

    用不了啊,怎么办

  13. 展展
    展展 Lv 1

    有了网站空间之后该怎么整[aru_3]

  14. 兰染
    兰染 Lv 1

    get新技能[aru_1]

  15. Virgo
    Virgo Lv 1

    多写分享,用hexo本地运行的时候竟然不行,我还以为失效了[aru_1],部署好就可以了

  16. ACG资源
    ACG资源 Lv 1

    相当不粗哦的哈。。

  17. java
    java Lv 1

    你好,有了支付宝付款码链接,如下脚本直接可以调转到支付宝支付页面?本地试了不行,

    if(navigator.userAgent.match(/Alipay/i)) {
    // 支付宝
    window.location.href = setting.aliUrl;
    }

    • mengkun
      mengkun 站长

      @java只有在支付宝客户端内该代码才有效。作用是唤出付款界面。在支付宝外无效

      • java
        java Lv 1

        @mengkun是指通过支付宝扫描(客户端)的聚合码(链接)跳转到有该代码aliUrl才起作用,是这样理解吧?

分享