虹韵乐谱 — 微信小程序

从 500 错误到完整上线

接手时项目处于"完全无法运行"状态：5 个 WXML 页面中有 3 个引用了不存在的 JPG 图片资源（sheet1-3.jpg、lesson1-2.jpg），分享功能依赖不存在的 share.png——用户端直接 500 白屏。

排查方法：逐页面扫描 image 标签 src 属性与 static/images/ 目录做交叉比对，定位全部 5 处断裂引用。修复策略：用现有 PNG 图标库替换缺失的 JPG 资源（保持视觉一致性），分享功能降级为微信默认截图 API（wx.previewImage）。从接手到修复上线仅一次会话，体现了快速定位和务实降级的能力。

微信小程序云开发全栈链路

独立完成了 5 个功能页面的全栈实现，覆盖微信小程序开发的完整技术栈：

• 前端层：WXML 模板 + WXSS 样式（含 rpx 响应式适配不同屏幕）+ JS 逻辑处理（页面路由 / 数据绑定 / 事件监听）
• 后端层：微信云函数（Node.js 运行时）处理搜索 / 收藏 / 播放记录等业务逻辑，无需自建服务器
• 数据层：云数据库（类似 MongoDB 文档型）存储乐谱元数据（曲名/调性/BPM/难度等级）、用户进度、播放统计
• 音频播放：实现播放器组件，支持后台持续播放 + 进度条拖拽 + 播放模式切换

架构设计与关键决策

• 选型理由：选择云开发而非传统服务器方案——免域名备案 / SSL 证书 / 服务器运维，适合个人项目快速迭代
• 页面结构：首页（推荐 + 分类导航）→ 学习页（乐谱详情 + 音频同步）→ 详情页（作曲家背景 / 乐理知识）→ 练习页（节拍器 + 跟练模式）→ 个人中心（进度 / 收藏）
• 数据设计：乐谱数据 JSON 预置在云数据库中（非实时请求外部 API），保证加载速度和离线可用性；用户数据用 OpenID 做隔离确保隐私安全

技术栈