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


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

    重点来了!

    思路是这样,首先取得当前网页的网址 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 访问测试,这行代码贴在网站底部以及每个产品页面详情中。

二维码.png

    

    你以为结束了吗?对!我也以为结束了。

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

    答案是:可以的。


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

« 上一篇下一篇 » 心灵天空原创文章,转载请注明出处!如侵犯您的权益,请留言删除,谢谢合作! 标签:

相关日志:

评论列表:

  • 1
     火喵  发布于 2021-12-11 14:33:00  回复该留言
  • nice,比我现在用的速度快多了!感谢
    •  标哥  发布于 2021-12-11 17:15:00  回复该留言
    • 经过几天测试,发现还是乐乎的API好用,别的几个时不时会出个破图,乐乎目前没有出现这种现象。

说两句吧:

必填 *

选填 (邮箱仅用于留言回复通知,不会在网页显示。)

选填

记住我,下次回复时不用重新输入个人信息

文章分类
搜索
最新留言
网站收藏
友情链接