从教育模板到英语学习 App项目改造实录一、引言。本文记录我们如何将一个通用的教育模板应用改造为一款专注于英语学习的 App。改造的核心思路是保留原有应用架构的精华注入英语学习领域的专属能力。二、改造前 vs 改造后功能对照2.1 首页对比功能模块模板原有改造后Banner 轮播考试资讯推荐英语学习功能入口搜单词、易错词、生词本、学习报告推荐课程备考课程列表分类词库展示基础/CET-4/CET-6/雅思/GRE资料下载考试资料学习资料语法指南、写作模板章节练习按章节做题按词库背单词2.2 答题模块对比功能模块模板原有改造后题目类型HarmonyOS 技术题单选、多选、判断英语单词认读、拼写题库内容技术知识点500 词 5 分类英语词库学习方式标准答题卡片翻转 语音播报 分类筛选2.3 我的个人中心对比功能模块模板原有改造后学习统计做题数量、正确率学习时长、掌握词数、连续打卡生词本—新增生词管理加入/移除/掌握度学习计划通用计划英语专属计划每日新词数、复习提醒仪表盘通用仪表盘英语学习仪表盘词库分布、掌握进度三、核心改造一题库替换——从技术题到英语单词3.1 WordCard 模型设计改造的第一步是用英语单词模型替换原有的题目类型。我们创建了WordCard类使用 ArkTS V2 装饰器确保 UI 响应式// commonLib/models/WordCardModel.etsObservedV2exportclassWordCard{Traceid:number0;Traceword:string;// 英语单词Tracephonetic:string;// 音标TracepartOfSpeech:string;// 词性Tracetranslation:string;// 中文释义Traceexample:string;// 例句TraceexampleTranslation:string;// 例句翻译TraceaudioUrl:string;// 音频 URLTracetags:string[][];// 标签Tracecategory:stringbasic;// 所属分类}设计要点每个字段都有Trace装饰器当单词的掌握状态变化时UI 自动刷新audioUrl字段为语音播报预留接口category字段用于分类筛选3.2 500 词 5 分类词库我们内置了 500 个单词分为 5 个难度级别每个级别 100 个单词// 5 个分类的定义exportconstWORD_CATEGORIES:WordCategory[][{key:basic,label:基础},// 基础词汇apple, book, cat...{key:cet4,label:CET-4},// 大学四级abandon, ability...{key:cet6,label:CET-6},// 大学六级contradict, controversy...{key:ielts,label:雅思},// 雅思词汇analyse, apparent...{key:gre,label:GRE},// GRE 词汇aberration, alacrity...];每个单词包含完整的信息newWordCard(1,apple,/ˈæpl/,n.,苹果,I eat an apple every morning for breakfast.,我每天早餐吃一个苹果。,,[日常,食物],basic)3.3 WordCardDataSource列表数据源为了使单词数据能够与 LazyForEach / ForEach 配合使用我们实现了IDataSource接口exportclassWordCardDataSourceimplementsIDataSource{privatewords:WordCard[][];privatelisteners:DataChangeListener[][];constructor(words:WordCard[]){for(leti0;iwords.length;i){this.words.push(words[i]);}}publicgetData(index:number):WordCard{returnthis.words[index];}publictotalCount():number{returnthis.words.length;}registerDataChangeListener(listener:DataChangeListener):void{...}unregisterDataChangeListener(listener:DataChangeListener):void{...}}这样我们就可以使用LazyForEach高效渲染单词列表即使 500 个单词也能流畅滚动。四、核心改造二卡片翻转学习模式4.1 从 CourseHomePage 到卡片学习模板中的CourseHomePage原本是课程列表页改造后成为单词卡片翻转学习的核心页面。卡片翻转的交互逻辑是正面显示英语单词、音标、词性背面显示中文释义、例句、例句翻译点击翻转用户点击卡片正反面切换左右滑动切换到上一个/下一个单词// topicPage/Index.etsexport{WordCardPageBuilder}from./src/main/ets/views/WordCardPage// 在 WordCardPage 中使用 State 管理翻转状态ComponentV2struct WordCardPage{LocalcurrentIndex:number0;LocalisFlipped:booleanfalse;// 卡片是否翻转words:WordCard[]DEFAULT_WORD_CARDS;currentCategory:stringbasic;build(){Stack(){// 单词卡片正反面CardFront({word:this.currentWord})// 正面单词 音标.opacity(this.isFlipped?0:1)CardBack({word:this.currentWord})// 背面释义 例句.opacity(this.isFlipped?1:0)}.onClick((){this.isFlipped!this.isFlipped;// 点击翻转}).gesture(SwipeGesture().onAction((event:GestureEvent){if(event.offsetX0)this.nextWord();// 左滑 → 下一个if(event.offsetX0)this.prevWord();// 右滑 → 上一个}));}}4.2 分类筛选通过分类筛选用户可以只学习特定难度的词汇// 按照分类筛选单词getfilteredWords():WordCard[]{if(this.currentCategoryall){returnDEFAULT_WORD_CARDS;}returnDEFAULT_WORD_CARDS.filter(wordword.categorythis.currentCategory);}分类选择器使用了原有的select_category组件实现了 UI 复用。五、核心改造三语音播报5.1 AudioPlayer 单例语音播报是英语学习 App 的标配功能。我们实现了AudioPlayer单例封装了kit.MediaKit的AVPlayer// commonLib/utils/AudioPlayer.etsexportclassAudioPlayer{privatestaticinstance?:AudioPlayer;privateavPlayer:media.AVPlayer|nullnull;privatecurrentUrl:string;publicstaticgetInstance():AudioPlayer{if(!AudioPlayer.instance){AudioPlayer.instancenewAudioPlayer();AudioPlayer.instance.initPlayer();// 延迟初始化播放器}returnAudioPlayer.instance;}publicplay(url:string):void{if(!url||url)return;// 如果正在播放同一音频停止if(this.currentUrlurlthis.avPlayer?.stateplaying){this.stop();return;}this.currentUrlurl;this.avPlayer?.stop();// 支持网络 URL 和本地 rawfileletsrcurl.startsWith(http)?url:rawfile/${url};this.avPlayer!.urlsrc;this.avPlayer!.prepare().then((){this.avPlayer?.play();});}publicstop():void{...}publicpause():void{...}publicrelease():void{...}}设计亮点单例模式全局共用同一个播放器实例避免多个音频同时播放URL 智能识别自动区分网络 URL 和本地 rawfile 资源状态管理play()方法支持点击暂停、再次点击恢复的交互5.2 在卡片翻转中的使用// 点击喇叭图标播放单词发音Button(){Image($r(app.media.ic_volume))}.onClick((){if(this.currentWord.audioUrl){AudioPlayer.getInstance().play(this.currentWord.audioUrl);}})六、核心改造四生词本管理6.1 NewWordManager生词本功能使用NewWordManager单例管理基于PreferenceUtil实现持久化存储// commonLib/utils/NewWordManager.etsexportinterfaceNewWordItem{keyID:stringtitle:string// 单词phonetic:string// 音标partOfSpeech:string// 词性example:string// 例句exampleTranslation:string// 例句翻译audioUrl:string// 音频addTime:number// 添加时间masteryLevel:number// 0:未掌握 1:熟悉 2:掌握wordPackage:string// 所属词汇包}exportclassNewWordManager{privatestaticinstance?:NewWordManager;publicstaticgetInstance():NewWordManager{...}// 添加生词publicaddNewWord(topicItem:TopicItemType,wordPackage:string):boolean{...}// 移除生词publicremoveNewWord(keyID:string):boolean{...}// 获取所有生词publicgetAllNewWords():NewWordItem[]{...}// 按词汇包筛选publicgetNewWordsByPackage(wordPackage:string):NewWordItem[]{...}// 更新掌握程度publicupdateMasteryLevel(keyID:string,masteryLevel:number):boolean{...}// 生词数量publicgetNewWordCount():number{...}}6.2 与答题模块的集成生词本功能与答题模块深度集成——在答题页面中用户可以将不认识的单词一键加入生词本// 在答题页面中Button(加入生词本).onClick((){NewWordManager.getInstance().addNewWord(currentTopic,wordPackage);})生词本页面则展示所有已添加的生词支持按词汇包筛选和掌握程度排序。七、其他改造亮点7.1 首页功能重构首页从考试资讯改为英语学习功能入口通过 Banner 展示核心功能Banner 轮播 1. 搜单词 → 调用 SearchPage 2. ⚠️ 易错词 → MyWrongPage从答题记录中统计的高频错误词 3. 生词本 → NewWordPage用户自定义生词 4. 学习报告 → DashboardPage学习数据可视化7.2 答题模块的题库替换答题模块的题库从 HarmonyOS 技术题全面替换为英语题目。通过topicPage/Index.ets的导出结构可以看到新增的页面// topicPage/Index.ets — 新增的英语学习相关页面export{WordCardPageBuilder}from./src/main/ets/views/WordCardPage;// 单词卡片export{DailyChallengePageBuilder}from./src/main/ets/views/DailyChallengePage;// 每日挑战export{SpeechEvalPageBuilder}from./src/main/ets/views/SpeechEvalPage;// 语音评测7.3 学习管家功能新增了学习计划和提醒功能LearningPlanManager管理每日学习计划每日新词数、复习量ReminderManager设置学习提醒时间DashboardManager统计学习数据连续打卡天数、掌握词数、学习时长八、改造经验总结8.1 保留架构替换内容整个改造过程中我们几乎保留了模板的完整架构多模块分层、响应式断点、声明式路由只替换了业务内容。这验证了 HarmonyOS 模板架构设计的通用性和高质量。8.2 组件复用最大化answer_questions答题引擎、base_select选择器、feedback反馈等 8 个组件完全复用不需要修改。这意味着模板的组件设计足够抽象与具体的业务领域解耦二次开发时可以专注于业务逻辑无需从零构建基础组件8.3 新增能力的模块放置所有新增的英语学习专属能力都放在了合适的位置通用能力WordCard、AudioPlayer、NewWordManager→commonLib业务页面WordCardPage、DailyChallengePage→topicPage学习统计DashboardManager、StatisticsManager→ 扩展原有 managers8.4 避免的坑不要修改模板的核心架构层。入口、路由、断点、ViewModel 基类都是经过验证的稳定设计确保新增模块的 oh-package.json5 依赖正确。新增的功能如果依赖 commonLib需要在对应模块的配置文件中声明数据模型兼容性。WordCard 的数据结构与原有题目类型不同但通过IDataSource接口实现了兼容九、总结从教育模板到英语学习 App 的改造我们验证了以下重要结论模板的价值好的模板不是一个Hello World示例而是一个经过精心设计、可直接二次开发的工程框架改造的核心保留架构、替换内容、复用组件、注入领域专属能力HarmonyOS 生态优势ArkTS V2 装饰器体系、响应式布局、声明式路由等特性让业务改造变得高效而优雅最终我们成功将一个通用教育模板改造成了功能完整、体验流畅的英语学习 App——包含 500 词 5 分类词库、卡片翻转学习、语音播报、生词本管理、每日挑战、学习统计等核心功能。