基于 Taro + React + TypeScript 开发的跨端学习应用。本项目旨在提供一个通过问答引导式学习的平台,支持微信小程序和 H5 端。
- 核心框架: Taro v4
- UI 库: React v18
- 语言: TypeScript
- 样式: Sass (SCSS)
- 构建工具: Webpack 5 (H5), Taro CLI
- 包管理: npm
- 版本要求: Node 版本 ≥20
study-hero-taro/
├── config/ # Taro 项目配置
│ ├── index.ts # 全局配置 (Webpack, 路由模式等)
│ ├── dev.ts # 开发环境配置
│ └── prod.ts # 生产环境配置
├── src/
│ ├── pages/ # 页面文件
│ │ ├── index/ # 首页 (题库选择)
│ │ ├── topic-set/ # 题目配置页
│ │ ├── quiz/ # 答题页
│ │ ├── result/ # 结果页
│ │ ├── record/ # 学习记录页
│ │ ├── profile/ # 个人中心
│ │ └── review/ # 错题回顾
│ ├── app.config.ts # 全局配置 (路由, TabBar, Window)
│ ├── app.scss # 全局样式
│ ├── app.tsx # 入口组件
│ └── index.html # H5 入口模版
├── babel.config.js # Babel 配置
├── package.json # 项目依赖与脚本
└── tsconfig.json # TypeScript 配置
npm installH5 端:
npm run dev:h5启动后访问: http://localhost:10088 (端口可能根据占用情况自动调整,请查看终端输出)
微信小程序端:
npm run dev:weapp启动后需使用微信开发者工具导入 dist/ 目录进行预览。
# 构建 H5
npm run build:h5
# 构建微信小程序
npm run build:weapp- 题库选择: 支持多种编程语言和技术栈的题库选择。
- 智能出题: 根据用户选择的题目数量和难度生成试卷。
- 互动答题: 沉浸式答题体验,实时反馈。
- 学习记录: 本地持久化存储学习历史和成绩。
- 错题回顾: 针对答错的题目进行专门复习。
- 个人中心: 展示用户概况和系统设置。
- H5 路由: 项目使用
hash路由模式,避免刷新页面 404 问题。 - 跨端兼容: 代码中尽量使用了 Taro 的跨端 API,但在涉及特定平台能力(如登录、支付等)时可能需要适配。
- 样式适配: 使用
rpx单位,Taro 会自动适配不同屏幕尺寸。
MIT