OpenHarmony 英语学习 App 实战：从 0 到 1 搭建中小学生英语学习应用

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：存储、复习、分享、设备适配、TTS；
• styles：颜色和设计 token；
• entryability：应用生命周期。

这种分层适合中型 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) {repetitions=0interval=1}else{if(repetitions===0) {interval=1}elseif(repetitions===1) {interval=6}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.ts

AI 接口包括：

• 单词讲解；
• 错题分析；
• 自适应难度；
• AI 对话；
• 作文批改；
• 学习报告；
• 举一反三。

这为后续智能学习助手打下基础。

十二、小结

从 0 到 1 搭建一个 OpenHarmony 英语学习 App，可以按下面思路推进：

• 先定义产品定位和学习闭环；
• 再拆分页面、组件、数据、工具；
• 用 ArkUI 构建首页和学习页面；
• 用本地存储保存学习进度；
• 用间隔重复提高复习效率；
• 用成就系统增强坚持动力；
• 用分布式和分享能力拓展全场景；
• 用 AI 接口预留智能学习能力。

「英语视界」这个项目的价值在于，它不是单一功能 Demo，而是一套完整学习产品雏形。对于 OpenHarmony 应用开发者来说，很适合作为教育类 App 的实战参考。🌱