OpenHarmony 英语学习 App 实战从 0 到 1 搭建中小学生英语学习应用摘要本文从整体架构角度复盘我的 OpenHarmony/HarmonyOS 英语学习项目「英语视界 YingYu」是如何从 0 到 1 搭建起来的。相比单点功能文章这篇更适合做项目介绍型 CSDN 文章讲清楚产品定位、技术栈、页面结构、数据模型、学习功能、全场景能力和 AI 扩展方向。项目技术栈OpenHarmony/ HarmonyOS ArkTS ArkUI Hvigor 构建 AppStorage Preferences DistributedKVStore ShareKit CoreSpeechKit TTS Node.js Express Prisma 后端预留一、项目定位「英语视界 YingYu」是一款面向中国中小学生的英语学习 App目标是帮助用户通过碎片化、游戏化和复习驱动的方式学习英语。核心功能包括词汇学习听力训练每日一句趣味英语语法专题短语学习自定义生词本艾宾浩斯复习学习目标学习日历成就系统近场分享跨设备续学TTS 朗读AI 接口预留。项目不是一个简单 Demo而是围绕真实学习流程组织的完整应用。二、工程目录结构ArkTS 端核心代码位于entry/src/main/ets/├── entryability/ │ └── EntryAbility.ets ├── pages/ ├── components/ ├── data/ ├── model/ ├── utils/ └── styles/各目录职责pages页面components通用组件data内置词汇、听力、语法、每日一句model数据模型utils存储、复习、分享、设备适配、TTSstyles颜色和设计 tokenentryability应用生命周期。这种分层适合中型 ArkUI 项目页面和业务工具不会混在一起。三、入口 Ability 设计应用从EntryAbility.ets启动负责初始化用户数据、分布式同步和加载主页面。onCreate(want: Want,launchParam: AbilityConstant.LaunchParam): void { this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)initYingYuUserData(this.context)initDistributedStore(this.context).then(() { hilog.info(DOMAIN, testTag, Distributed sync initialized) }) }窗口创建时加载新版首页windowStage.loadContent(pages/MainTabsV2,(err){if(err.code) { windowStage.loadContent(pages/MainTabs,(){})return} })入口层主要负责全局初始化不承载具体页面业务。四、页面注册页面列表在main_pages.json中配置{ src: [pages/Index,pages/Home,MainTabs,pages/MainTabsV2,pages/Vocabulary,pages/VocabularyDetail,pages/DailySentence,pages/Listening,pages/FunEnglish,pages/FunEnglishDetail,pages/StudyProgress,pages/Settings,pages/CustomWordBook,pages/ReviewCenter,pages/DailyTask,pages/LearningCalendar,pages/LearningGoals,pages/Grammar,pages/PhraseStudy,pages/ShareGuide,pages/ShareCenter] }从页面数量可以看出这个项目已经覆盖学习 App 的主要闭环。五、数据模型设计项目中使用DataModels.ts集中定义模型。词汇export interface Word {id:numberword:stringphonetic:stringtranslation:stringexample:stringexampleTranslation:stringgrade:number}学习进度exportinterfaceLearningProgress {date:stringwordsLearned:numberminutesSpent:numbercompleted:boolean}自定义单词export interface CustomWord {id:stringword:stringphonetic?:stringtranslation:stringexample?:stringtags:string[] createdAt:stringreviewCount:numbermastered:boolean}先定义模型再写页面可以让项目结构更稳定。六、首页学习驾驶舱首页HomeContent.ets不只是入口集合而是学习驾驶舱。build() { Scroll() { Column() {this.WelcomeSection()this.DailyRecommendCard()this.QuickAccessSection()this.FunEnglishPickSection()this.ListeningRecommendSection()this.FeatureGrid()this.StatisticsCard() } } }首页展示当前年级每日一句快捷入口趣味英语听力推荐学习统计。这让用户打开 App 后能直接进入学习状态。七、核心学习模块词汇学习词汇数据按年级组织覆盖小学到高中。每个单词包含音标、释义、例句和年级。听力训练听力材料按难度分类配合 TTS 可实现朗读和跟读。每日一句每日一句用于轻量积累适合碎片化学习。语法专题语法专题包含讲解、例句和练习题。短语学习短语模块补充固定搭配、习语、谚语等表达。八、复习系统项目使用 SM-2 思路实现间隔重复if(quality 3) {repetitions0interval1}else{if(repetitions0) {interval1}elseif(repetitions1) {interval6}else{interval Math.round(interval * easeFactor) } repetitions }这让用户不是机械重复而是在合适时间复习合适单词。九、持久化与学习数据项目使用 Preferences 和 AppStorage 保存用户数据exportfunctionyingyuPrefSet(key:string,value:string): void {if(!pref) {AppStorage.setOrCreate(key,value)return } pref.putSync(key,value)void pref.flush()}保存内容包括用户设置学习进度已学单词成就状态自定义生词复习记录。十、全场景能力项目接入了近场分享harmonyShare.on(knockShare,(target: harmonyShare.SharableTarget){ callback(target) })也预留了分布式数据同步const options:distributedKVStore.Options{createIfMissing:true,autoSync:true,kvStoreType:distributedKVStore.KVStoreType.SINGLE_VERSION,securityLevel:distributedKVStore.SecurityLevel.S1}并支持跨设备续接wantParam[yingyu_settings] settings wantParam[yingyu_progress] progress wantParam[yingyu_learned_words] learnedWords这些能力让学习从单设备变成跨场景体验。十一、AI 与后端扩展项目还包含一个 Web 后端web/backend/src/ ├── routes/ ├── services/ai/├── middleware/ └── index.tsAI 接口包括单词讲解错题分析自适应难度AI 对话作文批改学习报告举一反三。这为后续智能学习助手打下基础。十二、小结从 0 到 1 搭建一个 OpenHarmony 英语学习 App可以按下面思路推进先定义产品定位和学习闭环再拆分页面、组件、数据、工具用 ArkUI 构建首页和学习页面用本地存储保存学习进度用间隔重复提高复习效率用成就系统增强坚持动力用分布式和分享能力拓展全场景用 AI 接口预留智能学习能力。「英语视界」这个项目的价值在于它不是单一功能 Demo而是一套完整学习产品雏形。对于 OpenHarmony 应用开发者来说很适合作为教育类 App 的实战参考。