API接口自动生成当前网址二维码

标哥 2021-12-10 22:48:0 技术收藏 次阅读　查看评论

    最近在升级和优化公司官网，重做了官网的移动端，使其更为美观，功能上也更为强大，在修改的过程中突然想到可以在PC段网页上加上本页的二维码，以便不方便长时间PC浏览或者需要保存分享的用户扫码使用。

    市面上很多二维码在线生成器，但是都需要手工一个一个或者小批量生成，最终都离不开手工，如果整个网站每个页面去生成一次，那工作量是相当巨大，并且网站随时在更新，不可能手工去做这件事。

    于是想到了曾经谷歌的自动二维码API，测试了一下效果非常完美，但是因为众所周知的原因，谷歌在国内访问始终是一个难以逾越的障碍。所以就搜集了很多国内的自动二维码在线生成器API，分享给大家。

    1.QR Server 二维码接口https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=https://www.chitapack.cn 

    2.INSO 二维码接口https://api.isoyu.com/qr/?m=0&e=L&p=10&url=https://www.chitapack.cn 

    3.搜藏共享二维码接口https://wenhairu.com/static/api/qr/?size=100&text=https://www.chitapack.cn

    4.品味二维码接口https://api.pwmqr.com/qrcode/create/?url=https://www.chitapack.cn 

    5.乐乎二维码接口https://www.lofter.com/genBitmaxImage?url=https://www.chitapack.cn  2022年8月下旬，发现失效。

    以上接口最后的网址修改成自己的网站即可，网上搜集的很多都已经停止服务，这几个API亲测可用，不过使用效果要看人品。

    经过几天反复测试，以上这几个API最好用的还是乐乎的，用了几天都没出现破图的现象。2021-12-12

    2022年8月24日，发现乐乎的API失效，太遗憾了。目前自己改用QR Server的API，暂时还好，记得之前测试过，一段时间之后重新打开网站会出现破图现象，希望现在稳定一点了吧。。 2022-8-26

    增加一个谷歌的，https://chart.googleapis.com/chart?cht=qr&chld=H&chs=400x400&chl=https://www.chitapack.cn 这个需要在境外才可以正常打开。

    那么如何让整个网站所有的网页都有一个单独的二维码呢？

    重点来了！

    思路是这样，首先取得当前网页的网址 thisURL = document.URL; 然后再把取得的网址 “thisURL”放到API接口相应的位置，设置好高度宽度，以下是以谷歌API为例

<script type="text/javascript"> 
thisURL = document.URL; 
strwrite = "<img src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + "' alt='网址URL 二维码生成' />";
document.write( strwrite ); 
</script>

    弄好代码，然后放到想要展示二维码的位置即可。

    看到这里，小伙伴们是否已经开始跃跃欲试了？

    但！一向以完美主义著称，做事都尽量考虑到所有层面的标帅并不满足于此！需要担心的事情和可能出现的问题都必须要想到和考虑到。

    如果一旦那些API接口出问题或者失效了，那么你在网页上插入这个代码的地方就出现一个空洞，这是完美主义者绝对不能接受的！

    所以，又一个思路诞生了，使用DIV溢出的方式，在一个DIV层里重叠两个甚至多个二维码，限定DIV的高度和宽度与二维码的高宽一致，平时所有二维码正常的时候，就显示第一个，其他的超出DIV大小就自动消失隐藏不见，当第一个二维码失效，第二个会自动替补失效的位置，以此类推。（溢出只适用于代码层面的问题，实际测试中，出现破图现象的话溢出功能无效，因为破图也占用了位置，以后研究出来更好的方法再分享）

    实际是怎么做的呢？看标哥的代码：

<div>
  <ul>
    <li style="overflow:hidden;width:160px;height:160px;">
	  <script type="text/javascript">
        thisURL = document.URL; 
        strwrite = "<img width='160' height='160' src=https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=" + thisURL + ">";
        document.write( strwrite ); 
      </script>
      <img src='../images/QRCode.png' width=160 height=160> 
     </li>
  </ul>
</div>

    如果感兴趣的小伙伴，可以通过传送门 https://www.chitapack.cn 访问测试，这行代码贴在网站底部以及每个产品页面详情中。

    你以为结束了吗？对！我也以为结束了。

    但！完美主义的标哥！是永远不会满足的！你网站做个二维码引导访客用手机访问，那你网站的移动端能访问每个不同网页所对应的位置吗？

    答案是：可以的。

    虽然网站不是PC移动自适应，而是区分了PC端和移动端，但是每个页面都加入了跳转代码，别人分享或者扫描PC端的网址，在移动端打开的时候，跳转代码会自动运行，自动引导到移动端与PC端对应的页面，也就是说，你在某个产品上扫码，手机打开的也是相同的产品页面。这又是另一段代码了，下次分享。