在线考试小程序

项目简介

这是一个在线考试测评的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了用户登录注册、考试列表浏览、在线答题、成绩查看、错题本管理、考试记录查询等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	v2 (最新稳定版)
开发语言	JavaScript (ES6+)
样式语言	WXSS (微信小程序样式)
模板语言	WXML (微信小程序模板)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)
组件框架	glass-easel

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：用户信息、考试记录、错题本数据使用 wx.setStorageSync 本地存储，关闭小程序后数据不丢失
• 完整考试流程：涵盖登录注册、考试列表、在线答题、成绩查看、错题回顾等完整考试流程
• 多题型支持：支持单选题、多选题、判断题等多种题型
• UI设计清新：界面风格简洁大方，绿色主题配色，符合教育类应用调性
• 错题本功能：自动收集答错题目，支持错题回顾和解析查看

功能模块

1. 登录注册模块 (pages/auth/login)

• 用户登录功能
• 用户注册功能
• 表单验证
• 登录状态持久化
• 测试账号：用户名 test，密码 123456

2. 考试列表模块 (pages/index/list)

• 考试列表展示
• 考试标题、描述、时长、总分
• 考试状态标识（进行中/即将开始/已结束）
• 考试分类展示
• 题目数量展示
• 点击进入考试详情

3. 考试详情模块 (pages/examDetail/detail)

• 考试完整信息展示
• 考试标题、描述
• 考试时长、总分、题目数量
• 考试状态判断
• 开始考试入口
• 考试须知说明

4. 在线答题模块 (pages/examTaking/taking)

• 题目逐题展示
• 单选题答题界面
• 多选题答题界面
• 判断题答题界面
• 答题进度显示
• 倒计时功能
• 上一题/下一题切换
• 答题卡快速跳转
• 提交试卷功能
• 答题状态实时保存

5. 考试结果模块 (pages/examResult/result)

• 考试成绩展示
• 得分/总分显示
• 正确率统计
• 答对/答错题目数量
• 考试用时统计
• 及格/不及格状态
• 查看答案解析
• 返回首页

6. 错题本模块 (pages/wrongBook/wrongBook)

• 错题列表展示
• 题目类型标识
• 题干内容展示
• 用户答案 vs 正确答案对比
• 答错次数统计
• 题目解析查看
• 来源考试信息
• 空状态提示

7. 考试记录模块 (pages/examRecords/examRecords)

• 历史考试记录列表
• 考试名称、得分、提交时间
• 考试用时统计
• 按时间倒序排列
• 空状态提示

8. 我的模块 (pages/my/profile)

• 用户头像、昵称展示
• 功能菜单入口
  • 考试记录
  • 错题本
  • 个人信息
  • 关于我们
• 退出登录功能

9. 个人信息模块 (pages/userInfo/userInfo)

• 头像展示
• 昵称修改
• 手机号修改
• 邮箱修改
• 性别选择
• 个人简介编辑
• 保存信息功能

项目结构

online-exam-pure-mini-program/
├── app.js                    # 小程序入口文件，初始化Mock数据
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── .prettierrc               # 代码格式化配置
├── images/                   # 图片资源目录
│   ├── tabbar/               # TabBar图标
│   │   ├── exam.png          # 考试图标
│   │   ├── exam_selected.png # 考试选中图标
│   │   ├── my.png            # 我的图标
│   │   └── my_selected.png   # 我的选中图标
│   ├── icons/                # 功能图标
│   │   ├── records.png       # 考试记录图标
│   │   ├── wrong.png         # 错题本图标
│   │   ├── update.png        # 个人信息图标
│   │   └── about.png         # 关于图标
│   ├── default_avatar.png    # 默认头像
│   ├── logo.png              # 应用Logo
│   ├── success_icon.png      # 成功图标
│   ├── fail_icon.png         # 失败图标
│   ├── empty_wrong_book.png  # 错题本空状态图
│   └── no_records.png        # 无记录空状态图
├── pages/                    # 页面目录
│   ├── auth/                 # 认证模块
│   │   └── login/            # 登录页
│   │       ├── login.js
│   │       ├── login.json
│   │       ├── login.wxml
│   │       └── login.wxss
│   ├── index/                # 首页模块
│   │   └── list.js/json/wxml/wxss  # 考试列表页
│   ├── examDetail/           # 考试详情页
│   │   └── detail.js/json/wxml/wxss
│   ├── examTaking/           # 答题页
│   │   └── taking.js/json/wxml/wxss
│   ├── examResult/           # 考试结果页
│   │   └── result.js/json/wxml/wxss
│   ├── wrongBook/            # 错题本页
│   │   └── wrongBook.js/json/wxml/wxss
│   ├── examRecords/          # 考试记录页
│   │   └── examRecords.js/json/wxml/wxss
│   ├── my/                   # 我的页面
│   │   └── profile.js/json/wxml/wxss
│   └── userInfo/             # 个人信息页
│       └── userInfo.js/json/wxml/wxss
└── utils/                    # 工具类目录
    ├── mockData.js           # Mock数据和API封装
    ├── util.js               # 工具函数
    └── wxsUtils.wxs          # WXS工具函数

数据模型

用户数据 (user)

{
  isLoggedIn: true,                    // 是否已登录
  username: 'test',                    // 用户名
  nickname: '测试用户',                // 昵称
  avatarUrl: '/images/default_avatar.png', // 头像
  userId: 'user_001',                  // 用户ID
  phone: '13812345678',                // 手机号
  email: 'test@example.com',           // 邮箱
  gender: '男',                        // 性别：'未知'/'男'/'女'
  bio: '个人简介...'                   // 个人简介
}

考试数据 (exam)

{
  id: 'exam_001',                      // 考试ID
  title: '计算机基础知识测试',         // 考试标题
  description: '考试描述...',          // 考试描述
  duration: 60,                        // 时长（分钟）
  totalScore: 100,                     // 总分
  questionCount: 10,                   // 题目数量
  status: 'ongoing',                   // 状态：'ongoing'/'upcoming'/'ended'
  category: '计算机',                  // 考试分类
  questions: [...]                     // 题目列表
}

题目数据 (question)

{
  id: 'q001',                          // 题目ID
  type: 'single',                      // 题型：'single'/'multiple'/'judgment'
  stem: '题干内容...',                 // 题干
  options: {                           // 选项
    A: '选项A内容',
    B: '选项B内容',
    C: '选项C内容',
    D: '选项D内容'
  },
  answer: 'C',                         // 正确答案（单选/判断为字符串，多选为数组）
  analysis: '题目解析...'              // 解析
}

考试记录数据 (examRecord)

{
  id: 'record_1716883200000',          // 记录ID
  userId: 'user_001',                  // 用户ID
  examId: 'exam_001',                  // 考试ID
  examTitle: '计算机基础知识测试',     // 考试标题
  totalScore: 100,                     // 考试总分
  userScore: 70,                       // 用户得分
  correctCount: 7,                     // 答对题目数
  wrongQuestions: [                    // 答错题目列表
    { questionId: 'q002', userAnswer: ['A', 'B'] }
  ],
  userAnswers: {                       // 用户所有答案
    q001: 'C',
    q002: ['A', 'B'],
    // ...
  },
  submitTime: 1716883200000,           // 提交时间戳
  timeSpent: 2100                      // 考试耗时（秒）
}

错题数据 (wrongQuestion)

{
  questionId: 'q002',                  // 题目ID
  examId: 'exam_001',                  // 来源考试ID
  examTitle: '计算机基础知识测试',     // 来源考试标题
  questionType: 'multiple',            // 题型
  stem: '题干内容...',                 // 题干
  options: {...},                      // 选项
  correctAnswer: ['A', 'B', 'C'],      // 正确答案
  userAnswer: ['A', 'B'],              // 用户答案
  analysis: '题目解析...',             // 解析
  incorrectCount: 2,                   // 答错次数
  lastIncorrectTime: 1716883200000     // 最后答错时间
}

核心业务逻辑

1. 用户登录

// mockData.js
function login(username, password) {
  if (username === 'test' && password === '123456') {
    const user = {
      isLoggedIn: true,
      username: username,
      nickname: '测试用户',
      // ...
    };
    wx.setStorageSync(USER_KEY, user);
    return { success: true, message: '登录成功', user: user };
  }
  return { success: false, message: '用户名或密码错误' };
}

2. 获取考试列表

function getAllExams() {
  return wx.getStorageSync(EXAM_LIST_KEY) || [];
}

function getExamById(id) {
  const exams = getAllExams();
  return exams.find((exam) => exam.id === id);
}

3. 保存考试记录

function saveUserExamRecord(record) {
  let records = wx.getStorageSync(USER_EXAM_RECORDS_KEY) || [];
  records.unshift(record); // 新记录添加到开头
  wx.setStorageSync(USER_EXAM_RECORDS_KEY, records);
}

4. 获取错题列表

function getUserWrongQuestions(userId) {
  const userRecords = getUserExamRecords(userId);
  const allExams = getAllExams();
  const wrongQuestionsMap = new Map();

  userRecords.forEach((record) => {
    const exam = allExams.find((e) => e.id === record.examId);
    record.wrongQuestions.forEach((wq) => {
      const question = exam.questions.find((q) => q.id === wq.questionId);
      // 去重并统计答错次数
      if (!wrongQuestionsMap.has(question.id)) {
        wrongQuestionsMap.set(question.id, { ...question, incorrectCount: 1 });
      } else {
        wrongQuestionsMap.get(question.id).incorrectCount++;
      }
    });
  });

  return Array.from(wrongQuestionsMap.values());
}

5. 时间格式化

const formatTime = (inputDate) => {
  const date = typeof inputDate === 'number' ? new Date(inputDate) : inputDate;
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  // ...
  return `${year}/${month}/${day} ${hour}:${minute}:${second}`;
};

页面路由配置

{
  "pages": [
    "pages/auth/login/login", // 登录页（默认启动页）
    "pages/index/list", // 考试列表
    "pages/my/profile", // 我的
    "pages/examDetail/detail", // 考试详情
    "pages/examTaking/taking", // 答题页
    "pages/examResult/result", // 考试结果
    "pages/wrongBook/wrongBook", // 错题本
    "pages/userInfo/userInfo", // 个人信息
    "pages/examRecords/examRecords" // 考试记录
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#4CAF50",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/list",
        "text": "考试"
      },
      {
        "pagePath": "pages/my/profile",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 online-exam-pure-mini-program
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

3. 运行项目

导入成功后，项目会自动编译运行，可在模拟器中预览效果

4. 测试账号

• 用户名：test
• 密码：123456

5. 真机调试

点击工具栏"预览"按钮，扫码在手机上体验

预置测试数据

考试列表

考试名称	分类	时长	总分	题目数	状态
计算机基础知识测试	计算机	60分钟	100分	10题	进行中
历史常识测试	历史	45分钟	80分	8题	即将开始

题型分布

题型	说明
单选题	四选一，选择唯一正确答案
多选题	四选多，选择所有正确答案
判断题	判断正确或错误

示例题目

题目	类型	正确答案
计算机网络中，用于解析域名的服务是？	单选	C (DNS)
以下属于操作系统功能的是？	多选	A,B,C
CPU的全称是Central Processing Unit。	判断	正确

界面预览

项目包含演示视频文件 效果演示.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 更多题型：添加填空题、问答题、编程题等
4. 题目收藏：支持收藏重要题目
5. 练习模式：添加随机练习、专项练习功能
6. 排行榜：添加成绩排行榜功能
7. 考试倒计时提醒：考试即将开始时推送通知
8. 答题分析：详细的答题数据分析和统计
9. 题目搜索：支持按关键词搜索题目
10. 导出功能：支持导出错题本为PDF

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 登录功能为模拟实现，测试账号：test/123456
3. 考试记录和错题本数据存储在本地，清除小程序缓存会丢失数据
4. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

本项目仅供学习交流使用，请勿用于商业用途。