简介面向考研备考场景的微信小程序题库项目源码适合希望学习小程序开发、前端与后端联动实现考试类应用的开发者。包体共1242个文件压缩后约14.99MB涵盖微信小程序页面所需的js、json、wxml、wxss以及后台管理相关的vue、java、xml等类型可同时观察小程序端与Web管理端的代码结构。通过阅读源码可梳理题库管理、在线答题、学习统计、错题收集等典型教育模块的实现思路涉及数据请求、本地缓存、生命周期处理等常用小程序API与异步编程实践。目前已吸引513人学习适合作为从入门到进阶的项目参考资料结合目录式阅读和模块调试能较快掌握从页面搭建、交互逻辑到服务端对接的完整开发脉络。1. 压缩包解开之后发现它不是「纯原生」小程序你从下载站拖回一个名为「微信小程序项目考研知识题库小程序源码.zip」的压缩包解压之后大概率会愣一下里面没有想象中整齐的pages目录反倒是一眼看到main.css.bak、update-password.vue.bak、IndexMain.vue.bak这一串备份文件旁边立着1-install.bat、2-run.bat、3-build.bat三个批处理甚至还有.classpath。这意味着它不是一个「打开微信开发者工具直接预览」的纯原生 demo而是一个带构建链路的半工程化项目。这篇不把源码当黑盒而是从文件残留反推它的技术栈、目录设计和数据流把题库、答题状态、错题集这几块逐一拆开并给出能直接照抄的启动与排错方案。适合准备做教育考试类小程序、或者想从混合工程里学套路的人。2. 从 .classpath 与 .vue.bak 反推考研题库工程的技术栈辨识2.1 文件名暴露的工程痕迹拿到源码包先别急着跑把文件清单当考古现场看一遍。update-password.vue.bak是修改密码页面IndexMain.vue.bak、IndexAsideStatic.vue.bak、IndexHeader.vue.bak、BreadCrumbs.vue.bak这组命名是典型的后台管理界面布局main.css.bak是全局样式备份。这一串.vue.bak说明项目源代码里存在 Vue 组件大概率是 uni-app 或 mpvue 时代的工程而不是纯 WXML 原生写法——IndexAsideStatic、IndexHeader这类组件名在你的 PC 管理端、移动端 H5 里都能复用开发者把它们留在备份里意味着小程序端和 PC 端曾经共享过一套 Vue 代码。.classpath这个文件更值得注意。它是 Eclipse/IDEA 的 Java 工程标记一个纯前端小程序包里出现它说明整个压缩包可能来自某个「前后端分离项目实战」课程设计后端用 JavaSpring Boot 可能性最大提供题库接口小程序端只负责展示与答题。update-password.vue则进一步印证项目里有独立的用户体系不只是匿名刷题。文件/后缀推断角色实际作用.vue.bakVue 组件备份管理端界面组件提示工程可能基于 uni-app.classpathJava IDE 工程文件存在 Java 后端小程序通过 HTTP 接口取题1-install.bat依赖安装脚本等价于npm install2-run.bat本地开发脚本等价于npm run dev:mp-weixin3-build.bat生产构建脚本等价于npm run build:mp-weixinmain.css.bak样式备份无运行作用提示开发者改过全局样式2.2 还原之后的目录结构把备份文件排除掉典型的 uni-app 或原生小程序混合工程目录长这样project-root/ ├── app.js # 全局逻辑注册生命周期 ├── app.json # 页面路由、窗口样式、tabBar ├── app.wxss # 全局样式 ├── pages/ │ ├── index/ # 首页科目分类与题库入口 │ ├── exam/ # 答题页章节练习/模拟考试 │ ├── stats/ # 学习统计页 │ ├── wrong/ # 错题集页 │ └── mine/ # 个人中心与登录 ├── api/ # wx.request 统一封装 ├── utils/ # 格式化、缓存工具 └── static/ # 图片与静态资源这个结构里app.json是路由中枢pages数组的第一个元素就是小程序启动后默认加载的页面。原工程如果被反复改造过这个数组的顺序可能不是你想看到的首屏后面第 5 章会给出修改加载页的具体做法。2.3 用 1-install.bat 走通依赖安装在 Windows 上直接双击1-install.bat是最省事的但建议先打开看一眼内容常见做法是逐行执行而不是双击黑盒echo off echo [1/3] Installing npm dependencies... npm install --registryhttps://registry.npmmirror.com echo [2/3] Checking HBuilderX CLI... npx dcloudio/uvm --version echo [3/3] Done. pause这段脚本的核心是第一条npm install后面用了 npmmirror 镜像源在国内网络环境下比默认源快很多。如果工程里存在版本冲突改成npm install --legacy-peer-deps能绕开部分依赖树校验。npx dcloudio/uvm是 uni-app 的版本管理工具用来固定编译器的 CLI 版本避免 HBuilderX 图形界面和命令行构建结果不一致。3. 题库前端骨架WXML/WXSS、app.json 路由与 Page 生命周期3.1 页面四件套与全局配置的配合微信小程序的每个页面由.js、.json、.wxml、.wxss四个文件组成这是摘要里提到的核心开发语言结构。app.json负责告诉框架有哪些页面、窗口长什么样、哪些接口需要权限。下面是考研题库工程里最常见的全局配置形态{ pages: [ pages/index/index, pages/exam/exam, pages/wrong/wrong, pages/stats/stats, pages/mine/mine ], window: { navigationBarBackgroundColor: #1E90FF, navigationBarTitleText: 考研题库, navigationBarTextStyle: white, backgroundColor: #f5f6fa }, networkTimeout: { request: 15000, uploadFile: 30000 }, tabBar: { color: #999999, selectedColor: #1E90FF, list: [ { pagePath: pages/index/index, text: 题库 }, { pagePath: pages/wrong/wrong, text: 错题 }, { pagePath: pages/mine/mine, text: 我的 } ] }, style: v2 }pages数组的顺序直接决定加载页想改启动页面就调整这个数组的首位元素。window.navigationBarTextStyle只有white和black两个合法值写成别的颜色会在编译阶段直接报错。networkTimeout.request设为 15000 毫秒是因为题库接口在大题量场景下响应偏慢默认 60 秒太长、10 秒又容易超时15 秒是试错之后比较稳的折中。3.2 Page 生命周期与首屏加载策略答题页最怕两种体验进入时白屏、切后台回来状态丢失。这就要用好Page的onLoad、onShow、onHide。onLoad只在页面首次创建时执行一次适合拉取题目列表onShow每次从后台切回都会触发适合恢复答题倒计时onHide则是保存进度的最后机会。Page({ data: { questions: [], currentIndex: 0, selectedAnswer: , loading: true }, onLoad(options) { const subjectId options.subjectId || math; this.fetchQuestions(subjectId); }, onShow() { const timer wx.getStorageSync(exam_timer); if (timer) { this.setData({ remainSeconds: timer.remainSeconds }); } }, onHide() { wx.setStorageSync(exam_timer, { remainSeconds: this.data.remainSeconds, questionIndex: this.data.currentIndex }); }, fetchQuestions(subjectId) { this.setData({ loading: true }); getQuestionList({ subjectId, type: chapter }) .then(res { this.setData({ questions: res.data, loading: false }); }); } });这里把options.subjectId从页面跳转参数里取出来路由跳转时用wx.navigateTo({ url: /pages/exam/exam?subjectIdenglish })传入。onHide里用wx.setStorageSync把倒计时和当前题号落盘用户退出页面再回来进度不丢。注意wx.getStorageSync的返回值在 key 不存在时是空字符串做判断时要用if (timer)而不是if (timer ! null)。3.3 wx.request 的 Promise 封装与超时处理原工程大概率在api/目录里对wx.request做了二次封装因为原生wx.request不支持 Promise而业务层用then链会更顺。日常我会写一个最小封装考研题库这类场景够用const BASE_URL https://api.example-exam.com/v1; function request(path, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: ${BASE_URL}${path}, method, data, header: { Content-Type: application/json, Authorization: wx.getStorageSync(token) || }, timeout: 15000, success(res) { if (res.statusCode 200 res.statusCode 300) { resolve(res.data); } else { reject({ code: res.statusCode, message: 请求失败 }); } }, fail(err) { reject({ code: -1, message: 网络异常 }); } }); }); }timeout等价于app.json里的networkTimeout.request二选一即可代码里的优先级更高。Authorization头部把本地缓存的 token 带上后端就能识别用户身份从而把答题记录写到对应账号下。失败分支里把statusCode和非 2xx 情况区分开业务层才能针对 401 跳登录、针对 500 弹提示。4. 答题状态机与错题集教育考试小程序的业务层拆解4.1 题库数据模型一份 JSON 撑起分类、搜索与难度筛选考研题库最核心的数据不是页面是题目结构。工程里题目一般以 JSON 数组下发每个元素包含题干、选项、答案、解析、难度、科目等字段。这个结构设计得好分类、搜索、难度筛选都只是filter的事{ id: q_1024, subject: math, chapter: 线性代数, difficulty: 3, type: single, question: 设 A 为 n 阶矩阵下列命题正确的是, options: [A. 若 A 可逆则 A^T 可逆, B. 若 A^20 则 A0, C. 若 A 对称则 A 可逆, D. 若 A 可逆则 A 对称], answer: A, analysis: A^T 的行列式等于 A 的行列式可逆性等价。 }difficulty用 1 到 5 的整数表示筛选时questions.filter(q q.difficulty 4)就是难题模式。type预留了single、multiple、judge三种多选题在判断答案时要改成数组比对不能直接用字符串。答案字段无论如何不要用数字下标用A/B/C/D字母这样选项顺序打乱后答案依然有效。4.2 练习模式与模拟考试答题状态怎么管理答题页的核心是状态机。每个题目有三个运行期状态未选、已选未提交、已提交。用两个字段selectedAnswer和submitted就够了不需要引入 Vuex/PiniasubmitAnswer() { const { selectedAnswer, questions, currentIndex } this.data; const current questions[currentIndex]; if (!selectedAnswer) { wx.showToast({ title: 请先选择答案, icon: none }); return; } const isCorrect selectedAnswer current.answer; this.setData({ submitted: true, isCorrect, wrongList: isCorrect ? this.data.wrongList : this.data.wrongList.concat(current.id) }); }提交后submitted置为true界面上的选项变成只读同时把错误题目的id累积进wrongList。注意这里用concat而不是push因为setData需要新数组引用才能触发视图更新直接push后setData同一引用会导致渲染不刷新。切下一题时要把submitted重置为false、selectedAnswer清空否则会带着上一题的提交状态进入新题。状态字段可选值含义selectedAnswer/A/B/C/D当前选中的选项空串表示未选submittedfalse/true是否已提交决定选项是否可点击isCorrectfalse/true提交后的判定结果用于渲染对错样式wrongListstring[]错题 id 集合页面退出时写入缓存4.3 错题集与学习统计本地缓存怎么持久化错题集不能只存在内存里页面切换或小程序销毁后要能从缓存恢复。wx.setStorageSync是同步 API写入量小的时候性能没压力正好适合存错题数组和统计数据。删除错题时同样要setStorageSync覆盖写入collectWrong(questionId) { const wrongSet wx.getStorageSync(wrong_questions) || []; if (!wrongSet.includes(questionId)) { wrongSet.push(questionId); wx.setStorageSync(wrong_questions, wrongSet); } }学习统计可以拆成两个维度做题总量和正确率。每次提交答案后更新统计对象用整对象覆盖写入避免频繁读写单字段updateStats(isCorrect) { const stats wx.getStorageSync(exam_stats) || { total: 0, correct: 0 }; stats.total 1; if (isCorrect) stats.correct 1; stats.accuracy (stats.correct / stats.total * 100).toFixed(1); wx.setStorageSync(exam_stats, stats); }accuracy保留一位小数存成字符串展示时直接{{stats.accuracy}}%。这里有个容易被忽略的点wx.getStorageSync在首次返回空字符串|| []和|| {}只能兜底空值如果缓存里存的是非法 JSON读取时会直接抛错。稳妥做法是包一层 try/catch解析失败就重置缓存。4.4 分享与成绩页onShareAppMessage 与参数透传教育类小程序的传播闭环靠分享。小程序右上角菜单默认自带转发但自定义转发内容要在页面里声明onShareAppMessageonShareAppMessage() { const { score, total } this.data; return { title: 我在考研题库模考中得了 ${score}/${total} 分来挑战我, path: /pages/exam/exam?subjectId${this.data.subjectId}share1 }; }path里带share1是常见做法接收方页面在onLoad里读到这个参数就知道用户是从分享卡片点进来的可以引导注册或统计拉新转化。成绩页适合用 Canvas 生成分享海报但注意 Canvas 的绘图 API 在基础库 2.9.0 之后推荐用 Canvas 2D 接口旧代码里的wx.createCanvasContext虽然还能跑但在部分真机上会出现模糊问题。5. 三条 .bat 命令到真机预览构建链路与顶部导航栏的坑5.1 1-install、2-run、3-build 到底按什么顺序执行压缩包里的1-install.bat、2-run.bat、3-build.bat是给 Windows 用户准备的傻瓜化入口逻辑上等价于前端标准三步安装依赖、启动开发服务、打生产包。如果你用的是 HBuilderX 而不是命令行2-run.bat对应的操作是菜单栏「运行 → 运行到小程序模拟器 → 微信开发者工具」3-build.bat对应「发行 → 小程序-微信」。命令行方式的好处是能集成到 CI比如提交代码后自动执行3-build.bat把产物dist/build/mp-weixin直接上传为微信开发者工具的预览版。5.2 HBuilderX 导入与微信开发者工具联动用 HBuilderX 打开工程根目录后第一次运行要确保微信开发者工具开启了服务端口设置 → 安全设置 → 服务端口「打开」。否则 HBuilderX 编译完会卡在「正在等待微信开发者工具响应」这一步。编译产物输出到dist/dev/mp-weixin微信开发者工具导入的是这个目录而不是源码根目录很多人把源码目录导进去结果一堆.vue文件无法识别页面空白这是最常见的新手错误。5.3 修改刚进入的加载页面不止是调 pages 顺序想改小程序冷启动后的第一个页面第一反应是调整app.json的pages数组顺序。这个方法有效但有个副作用tabBar 页面如果不在首位启动后会先加载首位页面再跳转闪一下白屏。更稳的做法是在app.js的onLaunch里做启动页判断用重定向接管首屏onLaunch() { const token wx.getStorageSync(token); if (!token) { wx.reLaunch({ url: /pages/login/login }); } }这种写法适合需要登录态的题库场景未登录用户永远先看到登录页而不是题库列表。注意wx.reLaunch会关闭所有页面栈用户登录成功后要reLaunch回首页避免返回键一路退回登录页。5.4 微信小程序顶部导航栏高度与 custom 导航的适配如果你觉得默认导航栏样式丑在页面 json 里设置navigationStyle: custom后状态栏和胶囊按钮之间的空隙要自己算。胶囊按钮的位置是固定的用它来做自定义导航的基准最可靠const menuRect wx.getMenuButtonBoundingClientRect(); const systemInfo wx.getSystemInfoSync(); const navBarHeight (menuRect.top - systemInfo.statusBarHeight) * 2 menuRect.height;navBarHeight计算结果是自定义导航栏的总高度mobile端和 PC 端微信的胶囊位置不同用 API 拿实时数据而不是硬编码 44px是适配各种机型的关键。拿到高度后设置到data里动态绑定到导航栏容器的styleheight: {{navBarHeight}}px内容区再用相同高度做 padding-top 占位页面内容就不会被顶进刘海屏。验证方法很简单在 Android 和 iOS 各跑一遍真机预览对比导航栏和胶囊按钮的垂直居中效果。本文还有配套的精品资源点击获取