折腾微信扫码解锁笔记

发布于 分类 WEB技术

背景:

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

主要过程:

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

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

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

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

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

结果:

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

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

-- The End --

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

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

本页面显示内容已针对移动端进行优化,点击查看完整版本