折腾微信扫码解锁笔记
发布于 分类 WEB技术
23天前 有1个用户阅读过
背景:
为了给博客增加一个稍微炫酷的动画,已完成。 实际应用场景可点击侧边栏的联系我进行体验。
主要过程:
1. 侧边栏增加一个按钮
2. 点击按钮后,出现上下关门的动画效果,并弹出我的微信二维码。
3. 点击关闭按钮后,动画回滚。
4. 针对关闭按钮,尝试搞一个更有逼格的扫描二维码后自动关闭的动画。
5. 二维码监听,采用AJAX轮询。详情如下:
二维码图片根据用户唯一ID(uuid)生成动态二维码,二维码内容为包含uuid标识的URL,当微信扫码后,打开此URL,URL中生成uuid的标识写入缓存。
当弹出具有uuid的二维码图片时,ajax轮询uuid是否因为二维码被扫描后存在缓存中,如果存在,轮询结束并且自动执行关闭动画。
因为实现的是添加微信好友的功能,所以在扫描二维码的时候结果页面html调用原来的添加微信好友的二维码图片,通过识图完成最终的添加微信好友操作!
为了避免不必要的资源浪费。轮询大致设置在1分钟内才有效。现在想来,是否可以将1分钟后的轮询不直接结束,而是将频率调低一点。这样貌似可以稍微补强一下1分钟后轮询停止扫码完成也无法自动关闭的情况。
结果:
一切比较顺利,几乎比较完美的实现了我想要的效果了。
如果你有更合适的方案,欢迎留言告诉我改进!
-- The End --