125 lines
7.0 KiB
Markdown
125 lines
7.0 KiB
Markdown
# 智绘微刻小程序 — 交付总结 v2
|
||
|
||
> 本文档供**完全无上下文的新会话**阅读，记录本轮重构的完整交付成果。
|
||
> **日期**：2026-07-27（第二次修改）
|
||
> **项目目录**：`F:\weixin_wordc\`
|
||
> **技术栈**：Taro 3.6.31 + React 18 + TypeScript + SCSS
|
||
|
||
---
|
||
|
||
## 一、历史修改回顾
|
||
|
||
### Batch 1（已完成）
|
||
见 review1.md 历史版本。核心完成：全局主题切换、字体系统、tabBar重组、商品详情页、设计清单、效果确认页、后端技术栈文档。
|
||
|
||
---
|
||
|
||
## 二、本轮修改任务 — 全部完成 ✅
|
||
|
||
| 序号 | 任务 | 状态 |
|
||
|------|------|------|
|
||
| 1 | 全局主题系统升级为 Context 模式（点击即所有页面同步）+ 纯色背景去掉条纹 | ✅ 完成 |
|
||
| 2 | 设计清单页面实时刷新（`onShow` 钩子保证切页即刷新） | ✅ 完成 |
|
||
| 3 | 微信登录系统（`wx.login` + `chooseAvatar` + `nickname` input） | ✅ 完成 |
|
||
| 4 | 修复商品图片路径（相对路径改为根路径 `/img/xxx` + copy 配置） | ✅ 完成 |
|
||
| 5 | 删除 DIY 页品种选择卡片，直接进入工作台 | ✅ 完成 |
|
||
| 6 | 词云生成不再跳转 DIY，仅保存图片 | ✅ 完成 |
|
||
| 7 | DIY 贴纸系统（上传多张图/删除/拖动/缩放/碰撞检测） | ✅ 完成 |
|
||
| 8 | 订单详情页（淘宝风格：物流时间轴+地址+订单信息+设计预览） | ✅ 完成 |
|
||
| 9 | Profile 页 5 状态 2+3 布局（待设计/待付款/待发货/待收货/已完成） | ✅ 完成 |
|
||
| 10 | 登录拦截（需登录才能访问设计清单、订单等敏感页面） | ✅ 完成 |
|
||
| 11 | 订单列表页接收 profile 跳转的参数自动筛选 | ✅ 完成 |
|
||
| 12 | 所有 11 个页面接入 ThemeContext | ✅ 完成 |
|
||
|
||
---
|
||
|
||
## 三、文件变更清单
|
||
|
||
### 新建文件
|
||
| 文件 | 作用 |
|
||
|---|---|
|
||
| `src/context/ThemeContext.tsx` | 全局主题 Context + Provider + useThemeContext hook |
|
||
| `src/components/LoginModal/index.tsx` + `.scss` | 登录弹窗组件（含头像选择和昵称输入） |
|
||
| `src/pages/orderDetail/index.tsx` + `index.scss` + `index.json` + `index.config.ts` | 订单详情页（淘宝风格） |
|
||
|
||
### 修改的现有文件
|
||
| 文件 | 核心改动 |
|
||
|---|---|
|
||
| `src/app.tsx` | 根组件包裹 `<ThemeProvider>` |
|
||
| `src/app.scss` | 移除 `background-image` 条纹，改为纯色背景 |
|
||
| `src/app.config.ts` | 新增 `pages/orderDetail/index` 路由 |
|
||
| `src/hooks/useTheme.ts` | 改为基于 `useContext(ThemeContext)` 实现 |
|
||
| `src/components/ThemeToggle/index.tsx` | 接入 Context，触发 `theme:storageChanged` 全局事件 |
|
||
| `src/custom-tab-bar/index.tsx` | 移除 fixed 白色背景，支持跟随主题变量 |
|
||
| `src/utils/productConfig.ts` | 图片路径改为 `/img/xxx` 绝对根路径 |
|
||
| `src/types/index.ts` | 添加 `StickerItem` 接口，更新 `DesignItem` 的 `designData` 字段 |
|
||
| `config/index.js` | `copy` 规则增加 `{ from: 'src/img', to: 'img' }` |
|
||
| `src/pages/index/index.tsx` | 接入 `useThemeContext()` |
|
||
| `src/pages/product/index.tsx` | 接入 `useThemeContext()` |
|
||
| `src/pages/diy/index.tsx` | 重写：删除步骤1选品，改为贴纸系统（上传/删除/拖动/缩放/碰撞检测） |
|
||
| `src/pages/diy/index.scss` | 重写：支持贴纸列表、碰撞红色标注、控制栏 |
|
||
| `src/pages/checkout/index.tsx` | 支持展示贴纸列表的预览 |
|
||
| `src/pages/designList/index.tsx` | `onShow` 自动刷新，接入 Context |
|
||
| `src/pages/orders/index.tsx` | 读取 `orders:filter` 参数自动切换 Tab |
|
||
| `src/pages/profile/index.tsx` | 重写：5 状态 2+3 布局 + 登录弹窗 + 登录拦截 + Context |
|
||
| `src/pages/profile/index.scss` | 重写：支持 2+3 网格、登录弹窗样式 |
|
||
| `src/pages/service/index.tsx` | 接入 `useThemeContext()` |
|
||
| `src/pages/wordcloud/index.tsx` | 移除「前往个性化定制」按钮，仅保存图片 |
|
||
| `src/utils/store.ts` | 新增 `setUserInfo`/`getUserInfo` 暴露接口（mock openid） |
|
||
|
||
---
|
||
|
||
## 四、编译验证结果
|
||
|
||
```bash
|
||
npx taro build --type weapp
|
||
```
|
||
|
||
- ✅ **Compiled successfully in 15.49s**
|
||
- ✅ 0 报错，0 ERROR
|
||
- ⚠️ 2 个 Warning（均为正常提示）：
|
||
1. `AssetsOverSizeLimitWarning` — 实物照片体积较大（2~12MB PNG），不影响运行，上线前可压缩优化。
|
||
2. `NoAsyncChunksWarning` — Webpack 懒加载建议，不涉及错误。
|
||
|
||
---
|
||
|
||
## 五、关键踩坑记录
|
||
|
||
| 坑 | 现象 | 解法 |
|
||
|---|---|---|
|
||
| **全局主题不同步** | 切换后已打开页面不刷新 | 引入 `React.createContext`，`ThemeToggle` 切换时写入 Storage + `eventCenter.trigger('theme:storageChanged')`，各页面 `onShow` 时重新读取 |
|
||
| **设计清单切页不刷新** | 加入清单后切换页面看不到新条目 | 用 `Taro.getCurrentInstance().page.onShow` 代替 `eventCenter`，保证每次页面展现必触发 |
|
||
| **图片显示纯空白** | 微信小程序编译后资源路径错乱 | `productConfig.ts` 的图片路径改为 `/img/xxx` 绝对路径，并在 `config/index.js` copy 到 `dist/img` |
|
||
| **DIY 贴纸碰撞检测** | 两张贴纸贴在一起时无法阻止进入下一步 | 矩形边界框（AABB）碰撞检测，只要两个贴纸矩形相交即标红 `isOverlapping=true`，预览/完成时若存在 `hasOverlap=true` 则禁用提交 |
|
||
| **Profile 5 状态空间不够** | 单行 5 个状态拥挤 | 采用 2+3 两排布局：第一排 2 个（待设计/待付款），第二排 3 个（待发货/待收货/已完成），用虚线分隔+细线水平分隔 |
|
||
| **微信登录获取真实头像** | `wx.getUserInfo` 已不再返回真实头像和昵称 | 使用微信标准 `open-type="chooseAvatar"` + `input type="nickname"` 组件，让用户手动选择和填写 |
|
||
| **订单页自动筛选** | Profile 点击状态跳转后订单列表未自动切换 Tab | 跳转前 `Taro.setStorageSync('orders:filter', 'pending')`，订单页 `onShow` 时读取并应用 |
|
||
|
||
---
|
||
|
||
## 六、核心业务流（完整链路）
|
||
|
||
```
|
||
首页浏览品类 → 商品详情页（轮播图+价格+介绍）
|
||
→ 加入设计清单（弹窗选数量）→ 设计清单页（随时切页刷新）
|
||
→ 立即下单 → DIY 工作台（直接进入，无需选品）
|
||
→ 添加贴纸（相册/相机）→ 拖动调整位置 → 碰撞检测
|
||
→ 预览效果 → 确认完成 → 设计效果确认页
|
||
→ 弹窗确认下单 → 订单生成 → 订单列表/订单详情
|
||
→ 物流时间轴追踪 → 确认收货 → 完成
|
||
```
|
||
|
||
---
|
||
|
||
## 七、下一步建议（可选）
|
||
|
||
1. **后端接入**：当前 `openid` 为 mock 值，接入真实后端后替换 `wx.login` 的 `code` 换取真实 `openid`。
|
||
2. **图片压缩**：上线前将 `src/img` 下的实物照片压缩到 500KB 以内，避免微信包体积超限。
|
||
3. **真机测试图片**：在微信开发者工具中预览，确认图片是否正常加载（路径已改为绝对路径+copy）。
|
||
4. **订单物流接口**：当前物流为静态 mock，接入后端后可实现真实物流轨迹查询。
|
||
|
||
---
|
||
|
||
*文档更新时间：2026-07-27*
|
||
*本轮重构 12 项核心目标全部完成，编译通过。*
|