「破境刷题」面向医学类职业资格考试，功能模块多、页面体量大。本文记录我在 UniApp 框架下 进行前端架构选型的思路，供同类刷题类小程序参考。
为什么选择 UniApp
项目首要目标是微信小程序，同时希望保留 H5 预览能力。UniApp 基于 Vue 语法，生态成熟， 与现有 uView 组件库配合良好，能够较快搭建出统一的 UI 风格。
- 单一代码仓库，降低维护成本
- 条件编译处理平台差异（如分享、登录）
- pages.json 集中管理路由与 tabBar
目录与模块划分
我将页面按业务域拆分，避免所有逻辑堆在 pages 根目录：
pages/
index.vue # 首页：科目、倒计时、统计
ChapterList.vue # 章节列表
ChapterPractice.vue
MockExamList.vue # 模考
PastYearExam.vue # 往年真题
ComputerExamScan.vue # 机考扫码
common/
activation-code.js # 激活码逻辑
share-card-config.js
components/
practice-question-options/
share-card/
公共配置集中在 siteinfo.js，统一管理 API 地址与小程序标题，
部署时只需改一处即可切换环境。
接口请求封装
所有接口走统一的 request 封装，自动附带 token、处理 401 跳转登录。 刷题类应用请求频繁，我在列表页做了分页加载，答题页则按需拉取单题详情，避免一次传输过大。
经验：答题页的状态（当前题号、已选答案、标记）尽量保存在页面级 data 中， 交卷时再批量提交，减少网络往返。
分享与激励
首页倒计时、刷题战绩等页面支持生成分享海报。分享配置抽离到 share-card-config.js，
配合 lime-painter 组件渲染图片，转发路径携带 referrer 参数便于后端统计。
小结
刷题小程序的前端难点不在单个页面，而在模块多、状态散。合理的目录划分、 统一的配置与请求层，能显著降低后续迭代成本。下一篇将介绍 PC 机考扫码登录的实现。