73 lines
2.4 KiB
Markdown
73 lines
2.4 KiB
Markdown
# @dukang/mini-user
|
||
|
||
杜康好客 C 端微信小程序（Taro 4 + React）。UI 对齐 `apps/h5-user`。
|
||
|
||
## 启动
|
||
|
||
```bash
|
||
# H5 预览（联调 API）
|
||
pnpm --filter @dukang/mini-user dev
|
||
# → http://localhost:5177
|
||
|
||
# 微信小程序（本地联调，development）
|
||
pnpm --filter @dukang/mini-user dev:weapp
|
||
|
||
# 微信小程序（生产构建 → API: https://api.dukanghaoke.com）
|
||
pnpm build:mini-user:weapp
|
||
# 用微信开发者工具打开 apps/mini-user（miniprogramRoot = dist/）
|
||
```
|
||
|
||
## API 地址
|
||
|
||
| 环节 | 文件 | 说明 |
|
||
|------|------|------|
|
||
| **编译注入** | `config/index.ts` → `defineConstants.TARO_APP_API_ORIGIN` | `dev:weapp` / watch → `localhost:3010`；`build:weapp`（`--mode production`）→ `https://api.dukanghaoke.com`；可用 `VITE_API_TARGET` 覆盖 |
|
||
| **运行时拼装** | `src/lib/api.ts` → `resolveApiBase()` | `{origin}/api/v1` |
|
||
|
||
### 微信登录 `invalid code`
|
||
|
||
`wx.login` 的 code 只能由**与小程序 appid 匹配**的后端 `jscode2session` 兑换。
|
||
|
||
| 项 | 当前值 |
|
||
|----|--------|
|
||
| 小程序 appid | `project.config.json` → `wxda31c8e8e85051e7` |
|
||
| 后端须配置 | `WX_MINI_APP_ID` / `WX_MINI_APP_SECRET`（与上表一致） |
|
||
|
||
**本地联调（不接真实微信）**：保持默认即可（API → `localhost:3010`），并开启 Mock：
|
||
|
||
```bash
|
||
# 终端 1
|
||
pnpm dev:api # server/.env 保持 MOCK_SMS=true / MOCK_WECHAT=true
|
||
|
||
# 终端 2
|
||
pnpm dev:mini-user # H5 预览 :5177
|
||
# 或
|
||
pnpm --filter @dukang/mini-user dev:weapp
|
||
```
|
||
|
||
**连远程 API**：
|
||
|
||
```bash
|
||
$env:VITE_API_TARGET="https://api.dukanghaoke.com"; pnpm --filter @dukang/mini-user dev
|
||
```
|
||
|
||
并在 `api.dukanghaoke.com` 所在服务器配置 `WX_MINI_APP_ID=wxda31c8e8e85051e7` 及对应 AppSecret。
|
||
|
||
## 页面结构（18 页）
|
||
|
||
**Tab**：首页 / 门店 / 好客权益 / 我的
|
||
|
||
**栈页**：商品详情、门店详情、确认订单、收银台、订单列表/详情、地址列表/编辑、客服、权益明细、核销/核销码/成功、登录
|
||
|
||
## 布局约定
|
||
|
||
- 统一 `PageShell`（`tab` / `scroll` / `sub` / `plain`）注入刘海屏 CSS 变量
|
||
- Tab 顶栏：`TabMainHeader`；详情滚动顶栏：`PageNavBar`；子页：`SubPageHeader`
|
||
- 样式：`src/styles/*.css` 按业务域拆分，入口 `app.css`
|
||
|
||
## 约定
|
||
|
||
- `X-Client-App: USER_MINI`
|
||
- 底栏原生 `tabBar` + PNG（weapp）；H5 内嵌 `UserTabBar`
|
||
- 交易/核销页面以 UI 壳为主，部分 API 可后续加深
|