104 lines
3.4 KiB
Markdown
104 lines
3.4 KiB
Markdown
|
# 国语教育平台 - UniApp客户端
|
|||
|
|
|
|||
|
|
## 项目简介
|
|||
|
|
国语教育平台移动端APP，基于UniApp开发，支持iOS和Android平台。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
- UniApp
|
|||
|
|
- Vue 3
|
|||
|
|
- Vuex（状态管理）
|
|||
|
|
- uView Plus（UI组件库，Vue 3版本）
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
```
|
|||
|
|
frontend-uniapp/
|
|||
|
|
├── src/ # 源代码目录（UniApp要求）
|
|||
|
|
│ ├── pages/ # 页面
|
|||
|
|
│ │ ├── login/ # 登录页
|
|||
|
|
│ │ ├── index/ # 首页
|
|||
|
|
│ │ ├── course/ # 课程相关页面
|
|||
|
|
│ │ └── profile/ # 个人中心
|
|||
|
|
│ ├── components/ # 组件（待创建）
|
|||
|
|
│ ├── utils/ # 工具类
|
|||
|
|
│ │ ├── config.js # 配置文件
|
|||
|
|
│ │ ├── request.js # 网络请求封装
|
|||
|
|
│ │ └── auth.js # 认证相关
|
|||
|
|
│ ├── store/ # 状态管理
|
|||
|
|
│ │ ├── index.js # Store入口
|
|||
|
|
│ │ └── modules/ # Store模块
|
|||
|
|
│ │ ├── auth.js # 认证模块
|
|||
|
|
│ │ └── course.js # 课程模块
|
|||
|
|
│ ├── static/ # 静态资源
|
|||
|
|
│ ├── manifest.json # 应用配置
|
|||
|
|
│ ├── pages.json # 页面配置
|
|||
|
|
│ ├── App.vue # 应用入口
|
|||
|
|
│ └── main.js # 入口文件
|
|||
|
|
├── package.json # 依赖配置
|
|||
|
|
└── README.md # 说明文档
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
- ✅ 用户登录/登出
|
|||
|
|
- ✅ Token自动管理
|
|||
|
|
- ✅ 网络请求封装
|
|||
|
|
- ✅ 状态管理（Vuex）
|
|||
|
|
- ✅ 基础页面结构
|
|||
|
|
- ⏳ 课程学习功能（待完善）
|
|||
|
|
- ⏳ 视频播放（待实现）
|
|||
|
|
- ⏳ 学习进度上报（待实现）
|
|||
|
|
- ⏳ 截图上传（待实现）
|
|||
|
|
|
|||
|
|
## 开发说明
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
```bash
|
|||
|
|
# 如果遇到依赖冲突，使用以下命令
|
|||
|
|
npm install --legacy-peer-deps
|
|||
|
|
|
|||
|
|
# 或者清理缓存后安装
|
|||
|
|
npm cache clean --force
|
|||
|
|
npm install --legacy-peer-deps
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 运行项目
|
|||
|
|
```bash
|
|||
|
|
# H5（开发服务器会运行在 http://localhost:5173）
|
|||
|
|
npm run dev:h5
|
|||
|
|
|
|||
|
|
# 微信小程序
|
|||
|
|
npm run dev:mp-weixin
|
|||
|
|
|
|||
|
|
# APP
|
|||
|
|
npm run dev:app
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**重要提示**：
|
|||
|
|
- UniApp H5使用hash路由模式，访问时需要使用带hash的路径
|
|||
|
|
- 根路径会自动重定向到第一个页面（登录页），但也可以直接访问：
|
|||
|
|
- `http://localhost:5173/#/pages/login/login` - 登录页
|
|||
|
|
- `http://localhost:5173/#/pages/index/index` - 首页
|
|||
|
|
|
|||
|
|
**如果浏览器无法访问，请检查**：
|
|||
|
|
1. 确保`vite.config.js`文件存在且配置正确
|
|||
|
|
2. 确保`src/manifest.json`中的`devServer`端口与Vite配置一致（默认5173）
|
|||
|
|
3. 尝试访问带hash的路径（如 `http://localhost:5173/#/pages/login/login`）
|
|||
|
|
4. 检查开发服务器是否正常启动（查看终端输出）
|
|||
|
|
5. 尝试清除浏览器缓存或使用无痕模式
|
|||
|
|
6. 检查防火墙是否阻止了端口访问
|
|||
|
|
7. 检查是否有其他进程占用5173端口
|
|||
|
|
|
|||
|
|
### 配置说明
|
|||
|
|
1. 修改 `src/utils/config.js` 中的 `API_BASE_URL` 为实际的后端地址
|
|||
|
|
2. 根据实际部署环境修改文件访问地址
|
|||
|
|
|
|||
|
|
### 项目结构说明
|
|||
|
|
- **重要**：UniApp CLI要求所有源文件必须在`src`目录下
|
|||
|
|
- `manifest.json`、`pages.json`、`App.vue`、`main.js`必须在`src`目录
|
|||
|
|
- `pages`、`store`、`utils`等目录也必须在`src`目录下
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
- 需要配置后端API地址
|
|||
|
|
- 使用uView Plus组件库（Vue 3版本）
|
|||
|
|
- 横屏支持需要在manifest.json中配置
|
|||
|
|
- 如果遇到组件导入错误，请清除Vite缓存：删除`node_modules/.vite`目录后重启
|