健身房新手指南-小程序完整设计方案

以下为完整的小程序设计方案，采用更稳定的格式呈现：

---

### **小程序完整设计方案**
**一、导航架构优化**  
1. **底部标签栏配置**（符合微信4项限制）
   - 首页（ICON：home）：展示附近器械+扫码入口
   - 器械库（ICON：album）：按部位分类检索
   - 训练计划（ICON：calendar）：周计划时间轴
   - 个人中心（ICON：people）：收藏/历史记录

2. **全局快捷入口**
   - 首页右上角固定悬浮扫码按钮（直径96rpx）
   - 详情页底部常驻「收藏/分享」组合按钮

**二、核心页面交互细节**

| 页面 | 交互方案 | 技术实现 |
|----|---|-----|
| **扫码页** | 全屏覆盖式布局，支持闪光灯切换 10秒未识别自动弹出手动输入框 | `wx.scanCode`+`<camera>`组件 配合`wx.showModal`弹窗 |
| **视频页** | 双击暂停/单击显示控制条 滑动右侧1/3区域调节进度 | `<video>`组件+`bindtimeupdate`监听 使用`touchstart/touchend`事件处理 |
| **计划页** | 左右滑动切换周视图 长按训练项目弹出替换菜单 | `<swiper>`组件实现滑动 `bindlongpress`触发操作菜单 |

**三、视觉规范实施**
1. **间距系统**（基于750rpx设计稿）
 ```css
 --space-sm: 20rpx; /* 元素间距 */
 --space-md: 40rpx; /* 模块间距 */
 --space-lg: 60rpx; /* 页面边距 */
 ```
2. **动效规范** 
 - 页面切换：右进左出，持续300ms
 - 加载动画：使用微信原生`<loading>`组件
 - 按钮点击：缩放动画（scale 0.95）

**四、性能保障方案**  
1. **启动速度优化**  
   - 首屏数据预加载：App onLaunch时请求附近器械列表
   - 分包策略：
     ```js
     // app.json
     "subPackages": [{
       "root": "equipmentDetail",
       "pages": ["shoulder","chest","leg"]
     }]
     ```
2. **资源加载策略**
   - 视频文件：全部托管微信CDN
   - 图标：使用微信原生icon（节省90%图标资源）
   - 图片：WebP格式+懒加载

**五、异常处理机制**
1. 扫码失败时引导流程：
   ```mermaid
   graph LR
   A[扫码失败] --> B{是否重试?}
   B -->|是| C[保持摄像头开启]
   B -->|否| D[显示手动输入框]
   D --> E{输入验证}
   E -->|有效| F[跳转详情页]
   E -->|无效| G[提示错误并返回]
   ```
2. 网络中断处理：
   - 视频自动缓存最近播放的2个教程
   - 展示离线提示页（含设备基础图文说明）

---

如需具体开发排期或组件代码示例，我可继续展开说明。建议首期先实现扫码识别、视频播放、收藏功能这三个核心模块。