开发日记

日期：2026年03月03日
开发主题：博客侧边栏社交图标二维码弹窗功能开发

一、开发背景

博客侧边栏原有一组社交图标（微信、QQ、GitHub、微博、知乎），仅支持简单的链接跳转，其中微信、QQ图标无实际功能。为提升用户交互体验，需实现：点击微信/QQ图标时，在页面弹出对应的二维码弹窗（供用户扫码添加），GitHub、微博、知乎保持原有跳转逻辑不变。

二、开发过程

1. 需求梳理与方案确定

核心需求：仅改造微信/QQ图标，不影响其他图标功能；弹窗需支持“点击关闭按钮/点击空白处/按ESC键”三种关闭方式；样式轻量化，避免与原有页面样式冲突。
最终确定方案：基于原生HTML/CSS/JS实现模态弹窗，通过data-target属性绑定图标与对应二维码，使用独立类名隔离样式。

2. 代码改造与实现

• 原有结构适配：保留社交图标列表整体结构，仅修改微信/QQ图标的<a>标签——将href="#"改为href="javascript:void(0)"阻止默认跳转，新增class="social-icon"和data-target属性（用于关联二维码弹窗）；
• 弹窗容器开发：新增二维码弹窗DOM结构，包含微信/QQ二维码展示区、关闭按钮，默认隐藏；
• 样式编写：采用独立类名（如.qrcode-modal），设置固定定位、半透明背景，确保弹窗层级最高且样式不冲突；
• 交互逻辑：
  • 监听微信/QQ图标点击事件，根据data-target显示对应二维码；
  • 实现关闭按钮、空白处、ESC键三种关闭弹窗的逻辑；
  • 每次点击图标时，先隐藏所有二维码，再显示目标二维码，避免多二维码同时展示。

3. 测试与优化

• 测试弹窗显示/关闭功能，确认无卡顿、无样式错乱；
• 优化二维码图片尺寸（200×200），添加文字提示（如“微信扫一扫加我”），提升用户体验；
• 验证GitHub、微博、知乎图标跳转功能不受影响。

三、遇到的问题与解决

1. 样式冲突问题：初期直接编写样式导致与原有博客样式冲突，解决方式：使用独立类名+局部样式，仅作用于弹窗区域，不修改原有图标样式；
2. 默认跳转问题：微信/QQ图标点击后会触发页面锚点跳转，解决方式：将href改为javascript:void(0)，阻止默认跳转行为；
3. 多二维码展示问题：连续点击微信、QQ图标时，两个二维码同时显示，解决方式：每次点击前先移除所有二维码的active类，再给目标二维码添加。

四、开发总结

本次开发以最小改动实现核心需求，保留原有功能的同时新增二维码弹窗交互，整体代码轻量化、易维护。后续可扩展方向：支持自定义二维码尺寸、添加弹窗动画、新增更多社交平台的二维码弹窗。