重庆SEO, 关注并探索SEO与WEB技术。

折腾微信扫码解锁笔记

发布于 作者 [重庆SEO]

Markdown版本

背景:

为了给博客增加一个稍微炫酷的动画,已完成。 实际应用场景可点击侧边栏的联系我进行体验。

主要过程:

1. 侧边栏增加一个按钮
2. 点击按钮后,出现上下关门的动画效果,并弹出我的微信二维码。
3. 点击关闭按钮后,动画回滚。
4. 针对关闭按钮,尝试搞一个更有逼格的扫描二维码后自动关闭的动画。
5. 二维码监听,采用AJAX轮询。详情如下:

二维码图片根据用户唯一ID(uuid)生成动态二维码,二维码内容为包含uuid标识的URL,当微信扫码后,打开此URL,URL中生成uuid的标识写入缓存。

当弹出具有uuid的二维码图片时,ajax轮询uuid是否因为二维码被扫描后存在缓存中,如果存在,轮询结束并且自动执行关闭动画。

因为实现的是添加微信好友的功能,所以在扫描二维码的时候结果页面html调用原来的添加微信好友的二维码图片,通过识图完成最终的添加微信好友操作!

为了避免不必要的资源浪费。轮询大致设置在1分钟内才有效。现在想来,是否可以将1分钟后的轮询不直接结束,而是将频率调低一点。这样貌似可以稍微补强一下1分钟后轮询停止扫码完成也无法自动关闭的情况。

结果:

一切比较顺利,几乎比较完美的实现了我想要的效果了。

如果你有更合适的方案,欢迎留言告诉我改进!

分类:WEB技术

Tags: 折腾, 笔记,

本文标题: 折腾微信扫码解锁笔记

本文地址: https://seonoco.com/blog/scan-qr-auto-close

版权说明: 本站遵循 CC BY-NC-SA 4.0 协议, 未表明转载信息均为原创或整理,转载或引用请注明出处,以便溯本求源。

补充说明: 本文在本站发布于2020-01-11,文中部分内容可能存在过时或不正确,请知晓!如果可以请留言告知。

本文是否有所帮助?
点赞
说一说
打赏