当前位置：首页 > news >正文

用AI帮忙，开发刷题小程序：微信小程序在线答题系统架构解析

news 2025/10/7 5:10:13

我的第一个开源项目：微信小程序在线答题系统开发之旅

引言

每一个开发者都有属于自己的"开源初体验"。那是凌晨三点时颤抖的双手，是看到第一个Star时的心跳加速，也是被Issue追着改bug时的深夜emo。今天，我想分享我的第一个开源项目——一个基于微信小程序的在线答题系统的完整开发历程。

项目起源与背景

在AI技术日益发展的今天，后端工程师也能轻松涉足前端开发。我给自己定下了一个小目标：开发一个微信小程序在线答题系统。这个想法源于对在线教育和知识测试工具的需求洞察。经过几个月的努力，这个项目基本完成，并且我已经将小程序端代码开源。

项目源码地址：https://gitee.com/alioo/ruankao

想要体验小程序的朋友可以通过以下二维码进行访问：

小程序二维码

小程序界面效果展示（页面配色、布局全靠AI帮忙）：

小程序截图

项目架构设计

整体架构概述

这个在线答题系统采用了清晰的分层架构设计，主要包括以下几个层次：

页面层：负责UI展示和用户交互
组件层：可复用的业务组件
工具层：通用工具函数和类型定义
数据层：数据处理和状态管理

页面结构组织

项目的页面结构按照功能模块进行了清晰的划分：

pages/ 
├── exam-index/ # 首页，分类导航页面 
├── exam-start/ # 答题页面，核心答题功能 
├── exam-beiti/ # 背题页面，学习模式 
└── exam-detail/ # 答题记录详情页面

数据流设计

项目采用单向数据流设计模式，确保数据流转的清晰性和可维护性：

页面间通过 wx.navigateTo 等API传递参数
组件通过 properties 接收数据，triggerEvent 触发事件
工具函数处理业务逻辑和数据转换

核心功能模块详解

首页模块（exam-index）

首页作为用户进入系统的第一个界面，承担着分类导航和入口引导的重要职责。主要功能包括：

展示答题分类列表
提供清晰的导航入口
加载和展示分类数据

答题模块（exam-start）

这是系统的核心模块，负责完整的答题流程控制和交互。关键特性包括：

题目展示和选项选择
答题状态管理和进度控制
实时答案验证和反馈

学习模块（exam-beiti）

学习模块提供背题模式，让用户可以在只读模式下学习题目和查看答案解析：

支持题目切换和浏览
提供答案显示控制
支持解析内容展示

记录模块（exam-detail）

答题记录详情页面用于展示用户的答题结果和进行错题回顾：

得分统计和结果展示
题目回顾和答案对比
支持重新答题和查看解析

公共组件和工具设计

exam-question组件

为了统一题目展示格式和交互，我开发了 exam-question 组件：

// exam-question组件定义 
// components/exam-question/exam-question.ts
Component({options: {addGlobalClass: true,},properties: {question: {type: Object,value: {}},index: {type: Number,value: 0},// 选项样式映射optionClassMap: {type: Object,value: {}}},data: {},lifetimes: {attached() {// 组件实例进入页面节点树时执行},},methods: {// 选择选项selectOption(e: any) {const { option } = e.currentTarget.dataset;this.triggerEvent('selectoption', { option, index: this.data.index });},// 切换解析显示toggleExplanation() {this.triggerEvent('toggleexplanation', { index: this.data.index });}}
})

examUtils工具类

工具类封装了通用的业务逻辑和数据处理功能：

// utils/examUtils.ts
import { ExamPaperResponse, ExamRecord } from './examTypes';
import { IAppOption } from '../../typings/index';/*** 考试相关工具函数*/
export class ExamUtils {/*** 去除HTML标签* @param html 包含HTML标签的字符串* @returns 清理后的纯文本*/static stripHtmlTags(html: string): string {if (html == null) {return '';}return html.replace(/<[^>]+>/g, '');}/*** 计算进度* @param currentIndex 当前索引* @param total 总数* @returns 格式化的进度字符串 (例: "1/10")*/static calculateProgress(currentIndex: number, total: number): string {return (currentIndex + 1) + "/" + total;}/*** 从网络获取题目列表* @param recordId 记录ID* @param paperId 试卷ID* @returns 试卷和题目列表*/static async fetchQuestionList(recordId: number, paperId: number): Promise<ExamPaperResponse> {const app = getApp<IAppOption>();return new Promise((resolve, reject) => {wx.request({url: app.buildApiUrl('/api/paper-questions/question-list'),method: 'GET',header: {'Authorization': wx.getStorageSync('token')},data: { recordId, paperId },success: (res) => {if (res.statusCode === 200) {resolve(res.data as ExamPaperResponse);} else {reject(new Error(`请求失败，状态码: ${res.statusCode}`));}},fail: (err) => {reject(err);}});});}/*** 记录答案* @param recordId 记录ID* @param paperId 试卷ID* @param questionId 问题ID* @param userAnswer 用户答案* @param isCorrect 是否正确* @param spentTime 花费时间* @returns 是否成功*/static async answer(recordId: number, paperId: number, questionId: number,userAnswer: string, isCorrect: number, spentTime: number): Promise<Boolean> {const app = getApp<IAppOption>();return new Promise((resolve, reject) => {wx.request({url: app.buildApiUrl('/api/exam/answer'),method: 'POST',header: {'Authorization': wx.getStorageSync('token')},data: {recordId,paperId,questionId,userAnswer,isCorrect,spentTime},success: (res) => {if (res.statusCode === 200) {resolve(res.data.code === 200)} else {reject(new Error(`请求失败，状态码: ${res.statusCode}`));}},fail: (err) => {reject(err);}});});}/*** 结束考试* @param paperId 试卷ID* @param recordId 记录ID* @returns 考试记录*/static async examFinish(paperId: number, recordId: number): Promise<ExamRecord> {const app = getApp<IAppOption>();return new Promise((resolve, reject) => {wx.request({url: app.buildApiUrl('/api/exam/finish'),method: 'POST',header: {'Authorization': wx.getStorageSync('token')},data: { paperId, recordId },success: (res) => {if (res.statusCode === 200) {resolve(res.data.data as ExamRecord);} else {reject(new Error(`请求失败，状态码: ${res.statusCode}`));}},fail: (err) => {reject(err);}});});}/*** 获取选项状态* @param question 问题对象* @param option 选项对象* @returns 选项状态 ('correct'|'incorrect'|'')*/static getOptionStatus(question: any, option: any): string {if (!question.userAnswer) return ''; // 未选择if (option.optionNo === question.correctAnswer) return 'correct'; // 正确答案if (option.optionNo === question.userAnswer) return 'incorrect'; // 用户选择的错误答案return '';}
}

examTypes类型定义

为了确保数据一致性，定义了标准的数据接口：

// utils/examTypes.ts/*** 考试相关类型定义*/export interface ExamPaperResponse {examPaper: ExamPaper;questionAnswerList: Question[];
}export interface ExamPaper {id: number;paperCode: string;paperName: string;
}export interface Question {questionId: number;questionNo: number;content: string;options: QuestionOption[];correctAnswer: string;userAnswer: string;answerAnalysis: string;showExplanation: boolean;
}export interface QuestionOption {questionNo: number;optionNo: string;content: string;
}export interface ExamRecord {id: number;paperId: number;startTime: string;endTime: string;totalScore: number;duration: number;userScore: number;passStatus: boolean;paperName: string;examPeriod: number;
}