slake-school-wx/README.md

# S-lake高校雷达网 · 微信小程序

基于 **UniApp + Vue3 + TypeScript + Pinia + uview-plus** 搭建，UI 对齐 `slake-school-service/public/slake/frontend/mobile-html` 原型。

## 开发

```bash
cd code/slake-school-wx
npm install
npm run dev:mp-weixin   # 微信小程序
npm run dev:h5          # H5 浏览器调试（推荐本地联调）
```

微信开发者工具导入目录：`code/slake-school-wx/dist/dev/mp-weixin`

## 本地 H5 浏览器调试（调用真实 API）

后端需先启动：

```bash
cd code/slake-school-service
php artisan serve   # http://127.0.0.1:8000
```

确保 `.env` 中 `APP_ENV=local`（启用开发登录），并已配置 `WX_APPID` / `WX_SECRET`（小程序端用）。

前端：

```bash
cd code/slake-school-wx
npm run dev:h5   # 默认 http://127.0.0.1:5174
```

- H5 请求走 Vite 代理：`/api` → `http://127.0.0.1:8000`（见 `.env.development` 的 `VITE_API_PROXY_TARGET`）
- API 前缀：`/api/miniapp/v1`（见 `.env.development` 的 `VITE_API_BASE`）
- 本地想用线上 API：复制 `.env.development.local.example` 为 `.env.development.local` 并取消注释
- **登录**：H5 下登录页使用 `POST /auth/dev-login`（无需微信 code）；微信小程序使用 `POST /auth/wechat-login`
- Token 存储键：`slake_miniapp_token`，后续请求自动带 `Authorization: Bearer`

## 微信小程序联调

1. `npm run dev:mp-weixin`
2. 微信开发者工具导入 `dist/dev/mp-weixin`
3. 勾选「不校验合法域名、web-view、TLS 版本」
4. 开发包 API 直连 `VITE_MP_API_BASE`（默认 `http://127.0.0.1:8000/api/miniapp/v1`）
5. 正式包（`npm run build:mp-weixin`）使用线上 `https://slake.ali251.langye.net/api/miniapp/v1`（见 `.env.production`）
6. 发布前在微信公众平台配置 request 合法域名：`slake.ali251.langye.net`（须 HTTPS；开发阶段可勾选「不校验合法域名」）
7. **高校雷达网 web-view** 还须配置 **业务域名**（与 request 域名分开配置）：
   - 登录 [微信公众平台](https://mp.weixin.qq.com/) → 开发 → 开发管理 → 开发设置 → **业务域名**
   - 添加 `https://slake.ali251.langye.net` 并下载校验文件
   - 将校验文件名与内容写入后端 `.env`：`WECHAT_MP_WEBVIEW_VERIFY_FILE`、`WECHAT_MP_WEBVIEW_VERIFY_CONTENT`（见 `slake-school-service/.env.example`），或把校验文件放到 `slake-school-service/public/` 根目录
   - 真机/正式版未配置业务域名时，web-view 会提示「请在反馈与投诉中联系开发者」
8. 可选：在 `.env.production` 设置 `VITE_MP_RADAR_PAGE_BASE=https://slake.ali251.langye.net` 显式指定雷达 H5 域名

## API 环境说明

| 场景 | 配置文件 | API 地址 |
|------|----------|----------|
| 本地 H5 开发 | `.env.development` | `/api/miniapp/v1` → 代理到 `127.0.0.1:8000` |
| 本地微信开发 | `.env.development` | `http://127.0.0.1:8000/api/miniapp/v1` |
| 本地调试线上 | `.env.development.local` | `https://slake.ali251.langye.net/api/miniapp/v1` |
| 生产构建 | `.env.production` | `https://slake.ali251.langye.net/api/miniapp/v1` |

## 当前阶段

- ✅ TabBar 五页与子页面 UI 已还原
- ✅ 已接入后端 `/api/miniapp/v1` 真实接口（列表、详情、报名、我的、日历、需求、签到等）
- ✅ TabBar 图标、首页快捷入口 SVG、课程列表样式已按原型适配
- `src/mock/data.ts` 保留作参考，页面已不再引用

## 目录说明

| 路径 | 说明 |
| --- | --- |
| `src/pages/` | TabBar 主包页面 |
| `src/subpkg/` | 详情、日历、登录、资料、需求等分包 |
| `src/components/` | 公共组件（字典 Tab、报名弹窗等） |
| `src/api/` | 后端 API 封装 |
| `src/utils/request.ts` | 请求层（Bearer Token） |
| `src/utils/adapters.ts` | API 数据 → UI 模型适配 |
| `src/styles/` | 公共样式 |

## 视觉规范

- 主色：`#b11e23`
- 未开始：`#1d64d8` · 进行中：`#16834a` · 已结束：`#9aa3b2`
- 字号/间距按 `mobile-html` 原型（430px 宽）换算：`src/styles/tokens.scss` 中 `pr(px)` → rpx

详细方案见 `slake-school-service/docs/小程序UniApp开发方案.md`。  
本地环境见 `slake-school-service/docs/本地环境说明.md` §9。