Skip to content

jackywq/study-hero-taro

Repository files navigation

学习英雄 (Study Hero)

基于 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 配置

🚀 快速开始

1. 安装依赖

npm install

2. 启动开发环境

H5 端:

npm run dev:h5

启动后访问: http://localhost:10088 (端口可能根据占用情况自动调整,请查看终端输出)

微信小程序端:

npm run dev:weapp

启动后需使用微信开发者工具导入 dist/ 目录进行预览。

3. 构建生产版本

# 构建 H5
npm run build:h5

# 构建微信小程序
npm run build:weapp

✨ 功能特性

  • 题库选择: 支持多种编程语言和技术栈的题库选择。
  • 智能出题: 根据用户选择的题目数量和难度生成试卷。
  • 互动答题: 沉浸式答题体验,实时反馈。
  • 学习记录: 本地持久化存储学习历史和成绩。
  • 错题回顾: 针对答错的题目进行专门复习。
  • 个人中心: 展示用户概况和系统设置。

📝 注意事项

  • H5 路由: 项目使用 hash 路由模式,避免刷新页面 404 问题。
  • 跨端兼容: 代码中尽量使用了 Taro 的跨端 API,但在涉及特定平台能力(如登录、支付等)时可能需要适配。
  • 样式适配: 使用 rpx 单位,Taro 会自动适配不同屏幕尺寸。

📄 许可证

MIT

About

基于 Taro + React + TypeScript 开发的跨端学习应用。本项目旨在提供一个通过问答引导式学习的平台,支持微信小程序和 H5 端。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors