解决方案 - QQ | 微信 | 微博 二维码名片合并

请注意,作者认为这篇文章不适合作为参考,仅作存档。敬请留意。

首先,需要在文章开头感谢孟坤博客。本程序源代码修改自孟坤博客。

其次,这是一个需要服务器空间和域名运行的HMTL程序。请注意,百度网盘一类的服务不属于服务器空间。

再其次,如果你没有服务器空间和域名,你可以联系我定制。具体方案请见文末。

程序已经开源在 GayHub:https://github.com/hxco/SAY_HELLO_TO_HX


在开始之前,我想先谈一谈我修改源码的过程。

我原来准备做的是付款码三合一。在修改的过程中,发现孟坤使用了 liantu.com 的api。简单地用站长工具 ping了一下,发现国内延迟不算低,而且不支持https。

孟坤在api下面放了几个备用的,除了百度云的api以外,都不支持https,而且速度也不算一流。

简单地在Google上搜索了一下,支持https的二维码生成只有 cli.im 草料二维码,lwl12提供的api,和百度云的api。

草料二维码的api没看错的话是自带广告的,不适合使用。所以剩下就只有百度的和lwl的。

虽然lwl12是很大的dalao,服务器也很棒,但是想想应该不够百度的快,所以就放到了备用里。另外lwl12的api如果链接太长则会无法生成,然而QQ钱包的链接也很长,所以在付款二维码多合一里面无法使用。(在二维码名片多合一里面可用)。

到这里为止,我的付款二维码就已经做完了。演示可以看:https://pay.hxis.me 。源码请见 孟坤博客 https://mkblog.cn 。(因为付款二维码改动不大所以就不另外开源了。)


很快,我萌发出了一个新的想法:既然可以做付款二维码,那么可以不可以做一个个人名片呢?

当然是可以的,因为原理是一毛一样的。

但是我是完全不会Coding的,几天前才学了一点微不足道的html。其实一开始也没有指望自己能看懂孟坤的代码。

不过好在我没有放弃。看多了几次,就看懂了。

总的来说,孟坤的代码分为以下几部分。

  1. 分别定义QQ、微信、支付宝 的链接。这里需要用二维码识别提取出来。
  2. 定义api。(我已经替换成百度云的api)。
  3. 显示页面分为三部分。这里用Word里面的词汇来说,分别是页眉、主体、页脚。分别定义字体、字号以及这个部分的颜色。
  4. 孟坤真的超聪明,他使用data:image/png;base64的方式显示图片。这就意味着节省了一到两个http请求。而这意味着,能更快地打开相应页面。而在极端网络环境下,这里的优点尤为明显。比如在户外信号差的地方用流量扫码的时候。
  5. 定义输出。支付宝的支付页面直接在支付宝内打开链接即可,可以通过重定向的方式打开支付页面,故此不需要额外的扫描二维码。而微信、QQ钱包都不能直接通过重定向打开,需要用户手动扫码。
  6. 关于二维码的生成:如果换我来设计的话,我多半会在某个地方储存我的二维码,再在页面里面调用。而孟坤的方案是使用api生成二维码。这样服务器端仅仅需要传输一个网址出去,二维码由api自动生成返回,大大提高了速度。
  7. 孟坤的代码里面到处是友好的注释,非常有爱,让我这个小白能够更好地看懂代码。

 

通过适当地修改源码(真的多亏了注释),我实现了QQ、微信、微博 二维码名片的三合一。

在这个过程里我又遇到了更多的麻烦:

  1. 在测试的过程中,需要用不同的UA测试。然而如果每一次修改都分别使用微博微信QQ扫码的话太慢了,而且我是在本地的环境下调试的,这意味着我无法直接在手机上打开相应文件。解决方案是在Google Chrome里面通过审查元素模拟不同的UA。网上微信、QQ的UA搜搜就有,但是唯独就是没有微博的。于是我自己通过微博访问 What's my user agent? 得到我自己的UA,放进浏览器里面调试。

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C114 Weibo (iPhone8,4__weibo__7.12.0__iphone__os11.2)

  2. 但是有时候也确实需要在手机上试一试,比如页面放到服务器以后,或者当我需要用微博客户端访问What's my user agent? 的时候。这里的解决方案是生成二维码,通过相应的客户端访问。目前国内做的比较好的是 草料二维码 。然而我很快就觉得草料二维码太慢了,于是我找到一个 国外的、界面比草料好看的、还是实时生成的(打字的时候每输入一个字母二维码都会立即变化)的二维码生成网站,同时还支持电脑摄像头扫码,亲测 480p摄像头、iPhone5 的屏幕大小,依然能够很快识别。和草料通过Flash调用摄像头相比,这个网站不知道高到哪里去了。反正我用草料是从来没有用电脑成功扫码过的。这个网站是 QR Code Generator
  3. data:image的生成。Google了半天才找到一个貌似是台湾人做的网站,而且貌似用不了。于是我输入关键词:data:image generate ,第一个结果就很棒!还支持远程url上传图片生成。data: URI Generator

废话说完了,看正文吧。

0. Demo

demo

1. 介绍

SAY HELLO TO HX 是一个简单的HTML程序。

其作用为:实现 QQ、微信、微博 的加好友(关注)二维码的合并。

即:用户只需要扫描同样的二维码,即可在以上客户端内直接前往目标用户页面。

2. 原理

通过浏览器UserAgent判定用户所处的客户端,跳转至相关的页面。

其中微信无法实现通过URL直接到达用户页面,必须在网页内再次扫码。

3. 工作流程

用户扫码 —— 判断用户UA —— 跳转至相关页面 —— 用户进行加好友、关注等操作

如果是微信:用户扫码 —— 判断用户UA为微信 —— 利用api生成二维码 —— 跳转至相应二维码页面并提示用户长按二维码 —— 跳转至相关页面 —— 用户进行加好友、拉黑等操作

4.更多说明

实现二维码多合一 需要服务器以及站点。 如果你没有自己的站点、服务器,可以联系惶心以¥3的价格定制。

定制服务包括:

  1. 制作属于你的三合一二维码。
  2. 托管在惶心的服务器,保证访问速度。
  3. 定制好看的二维码。 4. 永久的售后服务以及技术支持。

最后交到您手上的会有:一张足够高分辨率的、漂亮的、永久可用的二维码图片。您可以在有需求的地方任意使用。 如果您是业务经理,需要借助网络聊天工具和您的客户交流,那么这项服务将会非常适合您。免去了微信号、QQ号传递的麻烦,并且不需要询问客户使用哪个软件。 “您随便用QQ或者微信扫描我的二维码,就可以和我交谈。”

您可以访问 https://pay.hxis.me 以微信、支付宝、QQ钱包 任意一项付款,付款后访问 https://add.hxis.me 找到我(虽然我有微博但是不常用,用QQ或者微信好了),我们就可以开始定制您的专属二维码了。

另外,付款二维码合并也是支持定制的。价格一样,规格一样。

如果一下子定制两个二维码,75折优惠。


  • 源码修改自孟坤博客(MKBLOG.CN)
  • 如有可能请尽量保留版权信息。版权信息以代码注释的形式存在,并不会被访客看到。
  • 保留版权信息仅仅会影响不足万分之一的访问速度,
  • 但是换来的却是中国开源环境的成长。
  • By惶心,Tech.Huangxin.CO.UK

我所作的修改:

  • 全面修改二维码api,替换了原来作者的liantu.com(联图)api,使用百度云api进行代替,在中国大陆达到最快的访问速度。
  • 备用api使用了lwl12.com的api,lwl在国内访问速度也不错(肯定没有百度好),但是可以用来备用。不过几乎不需要启用(除非百度的api失效了)。
  • 替代了孟坤博客“微信支付”一类的图片,改成了“微信”。

点赞
  1. mengkun说道:

    多合一加好友码的想法很不错!给你点个赞~

    1. Huangxin说道:

      啊哈哈哈哈哈被老大发现了,谢谢夸奖!

发表评论

电子邮件地址不会被公开。必填项已用 * 标注