【OpenHarmony/HarmonyOs 】面向中学生的学习工具 App 架构设计离线优先、隐私优先、体验优先这篇文章是对「化学视界」项目的一次整体复盘。它不是单独讲某个页面而是总结我如何从零开发一款面向中学生的 HarmonyOS 化学学习工具。项目包含周期表、方程式、知识库、题库挑战、收藏、错题、成就和学习统计。一、项目定位做一个真正能用的学习工具我开发这个项目时目标不是做一个展示型页面而是做一个学生真的能打开使用的学习工具。所以我给项目定了三个关键词离线优先。隐私优先。体验优先。离线优先是为了保证元素、方程式、知识点随时能查。隐私优先是因为学习数据属于个人行为不应该默认上传。体验优先是因为学习工具如果不好用用户很快就会放弃。二、功能架构围绕学习闭环设计项目不是简单堆功能而是围绕学习闭环组织查资料 → 收藏重点 → 做题练习 → 记录错题 → 复习错题 → 解锁成就 → 查看统计对应到页面查资料周期表、方程式、知识库。收藏重点收藏夹。做题练习挑战模块。记录错题错题本。解锁成就成就系统。查看统计学习统计页面。这个闭环让用户不仅能“看”还能“练”和“复习”。三、主导航让高频功能一步可达主框架使用底部导航Tabs({controller:this.tabController,index:this.currentIndex}){TabContent(){EquationsView()}TabContent(){PeriodicTableView()}TabContent(){KnowledgeView()} } .barPosition(BarPosition.End).barMode(BarMode.Fixed)我没有做复杂侧边栏也没有让用户先进入一个大首页。因为这是学习工具高频入口应该直接可见。四、数据架构本地数据驱动页面项目的数据主要放在本地ElementsData.ts元素数据。EquationsData.ts方程式数据。KnowledgeData.ts知识数据。QuizData.ts题库数据。AchievementData.ts成就数据。页面通过导入数据和工具函数进行展示、搜索和筛选。这种架构有几个好处打开速度快。不依赖网络。数据结构清晰。内容可控。隐私压力低。五、页面架构列表页和详情页分离周期表、方程式、知识库都遵循类似结构列表页展示摘要、搜索、筛选。详情页展示完整内容。例如元素详情通过参数加载letparams router.getParams()asRecordstring, number;if(paramsparams.elementNumber) {letel getElementByNumber(params.elementNumber);if(el) {this.element el;this.elementLocal el; } }这种设计让列表页保持轻量详情页负责深度阅读。六、状态管理全局状态和页面状态分工项目中有两类状态页面状态比如搜索内容、当前筛选分类、弹窗是否展示、按钮缩放等StatesearchText: string ;StateselectedCategory: KnowledgeCategory |allall;StateisSearchMode: boolean false;StatedisplayedKnowledge: KnowledgeItem[] knowledgeData;这些状态只影响当前页面放在组件内即可。全局状态比如系统色彩模式、收藏刷新标记StorageLink(sysColorMode)sysColorMode: number ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;这类状态需要跨页面响应所以放到全局状态中。七、隐私设计少收集就是最好的保护这个项目不强制登录不上传错题不采集位置、相册、相机等敏感信息。收藏使用本地保存AppStorage.setOrCreate(STORAGE_KEY, JSON.stringify(items));错题本只保存题目 idexportfunctionaddWrongQuestionId(id:number): void { const ids readIds();if(!ids.includes(id)) { ids.push(id); writeIds(ids); } }我的设计原则是能不收集就不收集能本地完成就本地完成。八、学习激励成就和统计不是装饰成就系统记录用户学习行为recordKnowledgeRead(category?: string): void {this.statistics.totalKnowledgeRead 1;this.checkAndUnlock(knowledge_3,this.statistics.totalKnowledgeRead);this.checkAndUnlock(knowledge_10,this.statistics.totalKnowledgeRead);this.scheduleSave(); }学习统计页面则展示学习天数、连续天数、收藏数、成就数量等。这些功能不是为了炫而是让用户看到自己的积累。九、交互体验学习工具也需要细节项目中很多按钮都做了轻量点击反馈animateTo({duration: 80, curve: Curve.EaseOut}, () { this.favoriteButtonScale 0.85; });我控制动效时间比较短因为学习 App 不适合过度动画。用户需要的是明确反馈而不是长时间等待动画结束。十、多屏适配手机和平板都要可用项目中通过屏幕宽度判断大屏模式constdisplayClass: display.Display display.getDefaultDisplaySync();constdensity displayClass.densityDPI;constscreenWidthVp density 0? displayClass.width / density *160:360;this.isTabletMode screenWidthVp 600;大屏下会调整标题字号。卡片留白。导航高度。元素格子大小。详情页阅读宽度。这让同一套代码在手机和平板上都能保持可读性。十一、我开发这个项目的顺序整个项目不是一次写完的我大致按这个顺序推进先整理元素、方程式、知识库数据。再搭主导航框架。开发周期表、方程式、知识库三个核心页面。补充详情页和收藏功能。开发题库挑战和错题本。加入成就、统计和设置页。做深色模式和平板适配。最后完善动效和隐私合规入口。这个顺序的好处是先把核心学习内容跑通再逐步补充体验和闭环。十二、开发过程中我最重视的三个细节1. 页面之间不要互相依赖太深比如收藏功能由工具类统一管理页面只调用收藏方法。这样元素详情、方程式详情、知识详情都能复用同一套逻辑。2. 内容型页面要重视搜索元素、方程式、知识点数量一多用户不可能只靠滑动查找。搜索和分类筛选是学习工具的核心效率功能。3. 学习数据要能形成闭环收藏、错题、成就、统计不能互相孤立。用户收藏了内容应该能在收藏夹复习用户答错了题应该能在错题本继续练用户持续学习应该能在成就和统计里看到反馈。十三、如果重新开发一次我会怎么做如果从头再来我会更早做几件事更早统一断点适配工具减少各页面重复判断。更早抽离通用卡片组件让列表页更轻。给题库、知识库、方程式建立更强关联。为学习统计加入更多图表化展示。给收藏夹增加自定义分组。不过当前项目的整体结构已经比较清晰后续继续扩展不会太困难。十四、总结「化学视界」这个项目的架构可以总结为 离线优先资料本地化打开即用。️ 隐私优先不强制登录不上传学习数据。 体验优先主功能一步可达。 学习闭环查询、收藏、练习、错题、统计互相连接。 视觉适配深色模式和平板场景都考虑到。如果你也想开发学习类 App我建议不要一开始就追求大而全。先把一个真实学习场景做顺再逐步补充收藏、错题、成就和统计。这样项目会更稳也更像一个能长期使用的产品。✨
