138 lines
7.4 KiB
Markdown
138 lines
7.4 KiB
Markdown
# 智绘微刻小程序 — 交付总结 v3
|
||
|
||
> 本文档供**完全无上下文的新会话**阅读，记录各轮重构的完整交付成果。
|
||
> **日期**：2026-07-27（第三次修改，16:15 批次）
|
||
> **项目目录**：`F:\weixin_wordc\`
|
||
> **技术栈**：Taro 3.6.31 + React 18 + TypeScript + SCSS
|
||
|
||
---
|
||
|
||
## 一、历史修改回顾
|
||
|
||
### Batch 1（已完成）
|
||
全局主题切换、字体系统、tabBar重组、商品详情页、设计清单、效果确认页、后端技术栈文档。
|
||
|
||
### Batch 2（已完成，见下方二～七）
|
||
全局Context主题同步、登录系统、贴纸DIY、订单详情、Profile 5状态、自动筛选、图片路径修复。
|
||
|
||
---
|
||
|
||
## 二、本轮（Batch 3）修改任务 — 全部完成 ✅
|
||
|
||
| 序号 | 任务 | 状态 |
|
||
|------|------|------|
|
||
| 1 | 完善个人主页功能：我的设计→设计清单；收货地址（京东风格+增删改复+默认地址+省市区选择器）；设置页（修改信息/退出登录/协议占位） | ✅ 完成 |
|
||
| 2 | 修复个人首页 ThemeToggle 点击无反应、主题不切换 | ✅ 完成 |
|
||
| 3 | 修复商品列表/详情页图片纯空白 | ✅ 完成 |
|
||
| 4 | 修复 Profile 状态条目点击无跳转 / 待设计未自动筛选 | ✅ 完成 |
|
||
| 5 | 未登录时空状态+登录按钮：设计清单/订单页包裹 `LoginGuard` | ✅ 完成 |
|
||
| 6 | 用户数据按 `openid` 隔离：store.ts 重构为 DA 层，支持多账号本地切换 | ✅ 完成 |
|
||
|
||
---
|
||
|
||
## 三、文件变更清单
|
||
|
||
### 本轮新建文件（Batch 3）
|
||
| 文件 | 作用 |
|
||
|---|---|
|
||
| `src/components/LoginGuard/index.tsx` + `.scss` | 登录守卫组件：未登录时显示空状态+去登录按钮 |
|
||
| `src/pages/address/index.tsx` + `.scss` + `index.config.ts` | 收货地址页（京东风格卡片、省市区Picker、增删改复、默认地址） |
|
||
| `src/pages/settings/index.tsx` + `.scss` + `index.config.ts` | 设置页（修改头像昵称、退出登录、定制协议入口、关于我们） |
|
||
| `src/pages/agreement/index.tsx` + `.scss` + `index.config.ts` | 定制协议页（权责/隐私/售后/流程占位文本） |
|
||
|
||
### 本轮修改的现有文件
|
||
| 文件 | 核心改动 |
|
||
|---|---|
|
||
| `config/index.js` | `copy.to` 从 `'img'` 修正为 `'dist/img'`，确保图片正确输出到小程序根目录 |
|
||
| `src/components/ThemeToggle/index.tsx` | 移除 `require('@tarojs/taro').default` 动态加载，改为顶层 `import Taro`，修复点击无反应；事件名统一为 `theme:change` |
|
||
| `src/utils/store.ts` | **重构为 DA 层**：所有 design/order/address 的 Storage key 增加 `openid` 前缀隔离，后端替换时只需改此文件 |
|
||
| `src/types/index.ts` | 新增 `AddressItem` 接口（name/phone/region/detail/isDefault） |
|
||
| `src/app.config.ts` | 注册新页面 `address`、`settings`、`agreement` |
|
||
| `src/pages/profile/index.tsx` | 补全 6 个菜单入口路径（收货地址→address、使用帮助→agreement、设置→settings） |
|
||
| `src/pages/designList/index.tsx` | 新增 `toDesign` Tab（聚合"未设计+设计中"）；支持读取 `designList:filter` 参数自动筛选；外层包裹 `LoginGuard` |
|
||
| `src/pages/orders/index.tsx` | 外层包裹 `LoginGuard` |
|
||
|
||
### Batch 2 已完成的文件（供追溯，不再重复）
|
||
`ThemeContext.tsx`、`LoginModal`、`orderDetail`、全局主题同步、贴纸系统、`profile` 2+3 布局等。
|
||
|
||
---
|
||
|
||
## 四、编译验证结果
|
||
|
||
```bash
|
||
npx taro build --type weapp
|
||
```
|
||
|
||
- ✅ **webpack 5.91.0 compiled with 2 warnings in ~20s**
|
||
- ✅ 0 报错，0 ERROR
|
||
- ⚠️ 2 个 Warning（均为正常提示）：
|
||
1. `AssetsOverSizeLimitWarning` — 实物照片体积较大（2~12MB PNG），不影响运行，上线前可压缩优化。
|
||
2. `NoAsyncChunksWarning` — Webpack 懒加载建议，不涉及错误。
|
||
|
||
---
|
||
|
||
## 五、关键踩坑记录（含本轮新增）
|
||
|
||
| 坑 | 现象 | 解法 |
|
||
|---|---|---|
|
||
| **全局主题不同步** | 切换后已打开页面不刷新 | `React.createContext` + `eventCenter`，各页面 `onShow` 时重新读取 Storage |
|
||
| **设计清单切页不刷新** | 加入清单后切换页面看不到新条目 | 用 `Taro.getCurrentInstance().page.onShow` 重写，保证每次页面展现必触发 |
|
||
| **图片显示纯空白** | 微信小程序编译后资源路径错乱 | `productConfig.ts` 的图片路径改为 `/img/xxx` 绝对路径；`config/index.js` copy 规则写为 `to: 'dist/img'` |
|
||
| **ThemeToggle 点击无反应** | 在个人页点击主题按钮没有任何效果 | `require('@tarojs/taro').default` 在某些构建下不返回真实 Taro 对象，改为顶层 `import Taro from '@tarojs/taro'` |
|
||
| **Profile 待设计未筛选** | 点击”待设计“跳到设计清单但显示全部条目 | 增加 `designList:filter` Storage 参数，设计清单 `onShow` 时读取并切换到 `toDesign` Tab（聚合未设计+设计中） |
|
||
| **用户数据未隔离** | 换账号登录后还能看到上一个用户的设计清单 | store.ts 重构为 DA 层，Storage key 按 `openid` 前缀隔离：`design_list_${openid}` |
|
||
| **收货地址省市区** | 不知如何实现三级联动 | 直接用微信原生组件 `<Picker mode='region'>`，无需自建数据 |
|
||
|
||
---
|
||
|
||
## 六、核心业务流（完整链路）
|
||
|
||
```
|
||
首页浏览品类 → 商品详情页（轮播图+价格+介绍）
|
||
→ 加入设计清单（弹窗选数量）→ 设计清单页（需登录，支持自动筛选）
|
||
→ 立即下单 → DIY 工作台（直接进入，无需选品）
|
||
→ 添加贴纸（相册/相机）→ 拖动调整位置 → 碰撞检测
|
||
→ 预览效果 → 确认完成 → 设计效果确认页
|
||
→ 弹窗确认下单 → 订单生成（需登录）→ 订单列表/订单详情
|
||
→ 物流时间轴追踪 → 确认收货 → 完成
|
||
|
||
个人主页
|
||
→ 待设计 / 待付款 / 待发货 / 待收货 / 已完成 → 自动跳转对应页面并筛选
|
||
→ 收货地址 → 增删改复 + 省市区选择 + 默认地址
|
||
→ 设置 → 修改信息 / 退出登录 / 定制协议
|
||
```
|
||
|
||
---
|
||
|
||
## 七、架构说明：前端 DA 层设计
|
||
|
||
为了方便后续接入后端，所有数据操作已通过 `src/utils/store.ts` 抽象为 **Data Access 层**：
|
||
|
||
```
|
||
pages/
|
||
└─ 调用 store.getDesignList() / addDesign() / designToOrder() 等业务接口
|
||
└─ store.ts 内封装 Taro.getStorageSync / setStorageSync
|
||
└─ key = `${scope}_${openid}` 实现多用户隔离
|
||
```
|
||
|
||
**后端替换方案**：上线时只需重写 `store.ts` 中的以下函数为 `wx.request` HTTP 调用，页面层零改动：
|
||
- `getDesignList()` / `setDesignList()`
|
||
- `getOrderList()` / `setOrderList()`
|
||
- `getAddressList()` / `addAddress()` / `updateAddress()` / `deleteAddress()`
|
||
- `getUserInfo()` / `setUserInfo()` / `clearUserInfo()`
|
||
|
||
---
|
||
|
||
## 八、下一步建议（可选）
|
||
|
||
1. **后端接入**：当前 `openid` 为 mock 值，接入真实后端后替换 `wx.login` 的 `code` 换取真实 `openid`，再将 `store.ts` 切换为 HTTP 请求。
|
||
2. **图片压缩**：上线前将 `src/img` 下的实物照片压缩到 500KB 以内，避免微信包体积超限。
|
||
3. **真机测试**：在微信开发者工具中预览，确认 `/img/xxx` 绝对路径图片是否正常加载。
|
||
4. **订单物流接口**：当前物流为静态 mock，接入 backend 后可实现真实物流轨迹查询。
|
||
|
||
---
|
||
|
||
*文档更新时间：2026-07-27*
|
||
*Batch 3（16:15 批次）6 项优化目标全部完成，编译通过。*
|
||
*累计完成：Batch 1 + Batch 2（12 项）+ Batch 3（6 项）= 18 项核心目标全部 ✅*
|