guoyu/frontend-uniapp

国语教育平台 - 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）
• ✅ 基础页面结构
• ⏳ 课程学习功能（待完善）
• ⏳ 视频播放（待实现）
• ⏳ 学习进度上报（待实现）
• ⏳ 截图上传（待实现）

开发说明

安装依赖

# 如果遇到依赖冲突，使用以下命令
npm install --legacy-peer-deps

# 或者清理缓存后安装
npm cache clean --force
npm install --legacy-peer-deps

运行项目

# 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目录后重启