|
|
# 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；开发阶段可勾选「不校验合法域名」）
|
|
|
|
|
|
## 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。
|
