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

还有一天考完试，先出来浪一浪~

首先，需要在文章开头感谢孟坤博客。本程序源代码修改自孟坤博客。本文首发 惶心 | 技术博客 。地址自己百度。

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

再其次，如果你没有服务器空间和域名，你可以联系我通过非常便宜的价格定制。具体方案请见文末。

（请管理、版主注意，这篇帖子主要目的是分享和探讨修改源码的过程，源码的思想以及学到的东西，并非广告。帖子长3000字，其中只有100字左右提及了定制。）

程序已经开源在 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、微信、微博 二维码名片的三合一。

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

在测试的过程中，需要用不同的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)







但是有时候也确实需要在手机上试一试，比如页面放到服务器以后，或者当我需要用微博客户端访问What’s my user agent? 的时候。这里的解决方案是生成二维码，通过相应的客户端访问。目前国内做的比较好的是 草料二维码 。然而我很快就觉得草料二维码太慢了，于是我找到一个 国外的、界面比草料好看的、还是实时生成的（打字的时候每输入一个字母二维码都会立即变化）的二维码生成网站，同时还支持电脑摄像头扫码，亲测 480p摄像头、iPhone5 的屏幕大小，依然能够很快识别。和草料通过Flash调用摄像头相比，这个网站不知道高到哪里去了。反正我用草料是从来没有用电脑成功扫码过的。这个网站是 QR Code Generator。

data:image的生成。Google了半天才找到一个貌似是台湾人做的网站，而且貌似用不了。于是我输入关键词：data:image generate   第一个结果就很棒！还支持远程url上传图片生成。data: URI Generator 。

---

废话说完了，看正文吧。

0. Demo（可以使用手机QQ、微信、微博分别扫描一下二维码）

1. 介绍

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

其作用为：实现 QQ、微信、微博 的加好友（关注）二维码的合并。

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

2. 原理

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

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

3. 工作流程

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

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

4.更多说明

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

定制服务包括：

制作属于你的三合一二维码。

托管在惶心的服务器，保证访问速度。

定制好看的二维码。 4. 永久的售后服务以及技术支持。

最后交到您手上的会有：一张足够高分辨率的、漂亮的、永久可用的二维码图片。您可以在有需求的地方任意使用。

如果您是业务经理，需要借助网络聊天工具和您的客户交流，那么这项服务将会非常适合您。

免去了微信号、QQ号传递的麻烦，并且不需要询问客户使用哪个软件。

“您随便用QQ或者微信扫描我的二维码，就可以和我交谈。”

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

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

如果一下子定制两个二维码，第二个半价。

---

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

---

我所作的修改：

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

这个不错，先收藏了，看来还是学些编程更好:lol，可否加个微信？以备只需:P

咦都没有人围观的吗qwq

惶心 发表于 2017-12-8 21:00
咦都没有人围观的吗qwq

既然你诚心诚意的发问了，那我强势围观一波吧楼主牛逼!

厉害了，之前有过第三方免费合并的，简单粗暴不用自己折腾=，=

我用了微信和微博扫你的码，结果都是404

一次性可以，加两个东西啊

馒头想变成冰棍 发表于 2018-3-21 03:36
我用了微信和微博扫你的码，结果都是404

我的主机问题 稍后恢复

加载失败

强势围观，看起来很高端

Floraqiu 发表于 2018-3-25 18:49
强势围观，看起来很高端

强势高端，就是让人围观。