HarmonyOS ArkTS 实战：实现一个校园网课与在线学习应用

HarmonyOS ArkTS 实战校园网课与在线学习完整实现摘要项目难度⭐⭐⭐ 中级实战适用人群有 ArkTS 基础、希望学习学习类应用开发的 HarmonyOS 开发者开发环境DevEco Studio Next / API 24代码规模单页面约 700 行可直接运行通过本项目你将掌握在线课程的进度追踪与学习数据统计作业提交与状态管理的完整流程课程笔记功能的实现与数据持久化学习时长统计与成就系统设计课程列表的网格布局与视觉设计目录[一、项目概述与功能架构][1.1 应用场景与项目价值][1.2 完整功能清单][1.3 技术选型说明][二、数据结构设计][2.1 课程模型 Course][2.2 作业模型 Homework][2.3 笔记模型 Note][2.4 设计思路说明][三、核心功能实现详解][3.1 课程学习与进度更新][3.2 作业提交与管理][3.3 课程笔记功能][3.4 学习数据统计][四、UI 设计与交互体验][4.1 整体布局结构][4.2 主题色与视觉规范][4.3 状态视觉区分表][五、关键技术点解析][5.1 学习进度的计算与展示逻辑][5.2 在线学习的专注度设计考量][六、常见问题与优化建议][七、项目总结与扩展方向][附录运行方式]一、项目概述与功能架构1.1 应用场景与项目价值在线学习已经成为高等教育的重要组成部分慕课、网课、翻转课堂等形式越来越普及。然而课程平台分散、学习进度难以追踪、作业截止日期容易遗漏、笔记分散等问题一直影响着在线学习的效率。本项目基于 HarmonyOS ArkTS 实现了一个校园网课与在线学习应用整合了课程观看、作业提交、讨论互动、学习进度、课程笔记、学习统计等功能帮助学生系统化管理在线学习提升学习效率。项目核心价值学习管理价值统一管理多门课程的学习进度一目了然效率提升价值作业、笔记、讨论集中管理减少切换成本数据反馈价值学习时长统计和进度可视化形成正向激励1.2 完整功能清单功能模块具体功能实现难度⭐课程学习课程列表、在线观看、章节切换、进度记录⭐⭐⭐作业管理作业列表、提交作业、截止提醒、成绩查看⭐⭐⭐学习笔记新建笔记、笔记列表、按课程分类、笔记编辑⭐⭐讨论互动课程讨论、提问回答、点赞互动、精华帖⭐⭐⭐学习数据学习时长、进度统计、连续学习、成就徽章⭐⭐辅助功能课程收藏、课件下载、学习提醒、离线缓存⭐⭐1.3 技术选型说明技术维度选型方案选型理由开发语言ArkTS强类型支持适合学习数据等结构化数据管理状态管理State 装饰器轻量响应式满足课程进度和学习数据更新视频播放系统视频组件调用原生播放器支持倍速等基础功能数据存储内存状态演示简化生产环境需对接学习管理系统最低版本API 24兼容主流 HarmonyOS 设备⚠️ 注意本项目为前端演示版本课程视频、作业提交等均为本地模拟。真实在线学习平台需要对接学校教务系统或慕课平台后台确保学习数据可认证。二、数据结构设计2.1 课程模型 Course课程是学习系统的核心实体包含课程基本信息和学习进度。/** * 在线课程数据模型 */interfaceCourse{id:number;// 课程IDname:string;// 课程名称teacher:string;// 授课教师cover:string;// 课程封面chapters:number;// 章节总数progress:number;// 学习进度百分比 0-100totalDuration:number;// 课程总时长分钟learnedDuration:number;// 已学习时长分钟isCollected:boolean;// 是否已收藏}2.2 作业模型 Homework作业是课程学习的重要环节包含提交状态和成绩。/** * 课程作业数据模型 */interfaceHomework{id:number;// 作业IDcourseId:number;// 所属课程IDcourseName:string;// 课程名称冗余存储便于展示title:string;// 作业标题deadline:string;// 截止时间status:string;// 状态未提交/已提交/已批改score:number;// 作业分数}2.3 笔记模型 Note笔记是个人学习的沉淀与课程关联便于复习。/** * 课程笔记数据模型 */interfaceNote{id:number;// 笔记IDcourseId:number;// 所属课程IDcontent:string;// 笔记内容time:string;// 记录时间}2.4 设计思路说明为什么进度用百分比和时长双字段存储两个维度各有用途百分比进度用于UI展示进度条、完成度等可视化场景时长数据用于学习统计计算总学习时长、日均学习等数据虽然百分比可以通过时长计算得出但冗余存储有两个好处展示时无需重复计算性能更好进度可以手动调整如跳过某些章节直接看后面不完全与时长挂钩关于作业状态的三态设计未提交 → 已提交 → 已批改三态设计覆盖了作业的完整生命周期未提交学生还没写需要提醒已提交学生交了等待老师批改已批改老师改完有分数了这种设计清晰直观符合用户的认知习惯。三、核心功能实现详解3.1 页面状态初始化/** * 页面状态变量定义 */StateprivatenoteContentText:string;// 笔记内容输入StateprivatehomeworkContentText:string;// 作业内容输入StateprivatenextNoteId:number10;// 下一条笔记IDStateprivatecourses:Course[][];// 课程列表Stateprivatehomeworks:Homework[][];// 作业列表Stateprivatenotes:Note[][];// 笔记列表3.2 学习进度更新观看视频时累计学习时长同步更新课程进度百分比。/** * 更新学习进度 * param courseId 课程ID * param addMinutes 本次新增学习时长分钟 */privateupdateProgress(courseId:number,addMinutes:number):void{this.coursesthis.courses.map(c{if(c.idcourseId){// 1. 计算新的已学习时长不超过总时长constnewLearnedMath.min(c.learnedDurationaddMinutes,c.totalDuration);// 2. 计算进度百分比四舍五入constnewProgressMath.round((newLearned/c.totalDuration)*100);return{...c,learnedDuration:newLearned,progress:newProgress};}returnc;});}/** * 获取正在学习中的课程数量 */privategetLearningCoursesCount():number{returnthis.courses.filter(cc.progress0c.progress100).length;}设计要点解析上限保护已学习时长不会超过总时长进度不会超过100%整数百分比进度取整展示避免出现56.78%这样的不友好数字边界处理使用 Math.min 确保不会越界是防御式编程的好习惯3.3 作业提交功能/** * 提交作业 * param hwId 作业ID */privatesubmitHomework(hwId:number):void{// 简单校验实际应检查作业内容this.homeworksthis.homeworks.map(hh.idhwId?{...h,status:已提交}:h);}/** * 获取待提交作业数量 */privategetPendingHomeworkCount():number{returnthis.homeworks.filter(hh.status未提交).length;}/** * 获取即将截止的作业 * 按截止时间排序返回前3个 */privategetUrgentHomeworks():Homework[]{returnthis.homeworks.filter(hh.status未提交).sort((a,b)newDate(a.deadline).getTime()-newDate(b.deadline).getTime()).slice(0,3);}3.4 课程笔记功能/** * 添加课程笔记 * param courseId 课程ID */privateaddNote(courseId:number):void{constcontentthis.noteContentText.trim();if(content.length0)return;constnote:Note{id:this.nextNoteId,courseId:courseId,content:content,time:newDate().toLocaleString()};this.notes[note,...this.notes];this.nextNoteId;this.noteContentText;}/** * 获取某门课程的所有笔记 */privategetCourseNotes(courseId:number):Note[]{returnthis.notes.filter(nn.courseIdcourseId);}3.5 学习数据统计/** * 计算今日学习时长分钟 */privategetTodayLearnMinutes():number{// 简化计算实际应根据学习记录统计returnthis.courses.reduce((sum,c)sumMath.min(c.learnedDuration,30),0);}/** * 获取总笔记数量 */privategetTotalNotesCount():number{returnthis.notes.length;}/** * 计算整体学习完成率 */privategetOverallProgress():number{if(this.courses.length0)return0;consttotalProgressthis.courses.reduce((sum,c)sumc.progress,0);returnMath.round(totalProgress/this.courses.length);}四、UI 设计与交互体验4.1 整体布局结构┌─────────────────────────┐ │ 学习数据概览 │ ← 在学课程/今日时长/待交作业/笔记数 ├─────────────────────────┤ │ Tab 切换栏 │ ← 我的课程 / 作业 / 笔记 ├─────────────────────────┤ │ │ │ 内容展示区 │ ← 课程网格 / 作业列表 / 笔记列表 │ │ └─────────────────────────┘4.2 主题色与视觉规范主色调浅靛蓝 #6366F1选择浅靛蓝作为主题色的设计考量知识与智慧象征靛蓝色是知识、智慧、思考的代表色与在线学习的求知属性高度契合营造沉浸式学习氛围专注感营造冷色调有助于保持专注相比暖色调更不容易分散注意力适合长时间学习场景科技感与在线属性靛蓝色带有科技感与在线学习数字教育的产品定位相符进度可视化友好靛蓝色渐变非常适合做进度条填充从浅到深的色阶变化自然美观辅助色规范主色调#6366F1浅靛蓝进度条渐变#6366F1 → #818CF8待交作业#EF4444红色警告已提交作业#F59E0B琥珀色等待已批改作业#10B981绿色完成已完成课程#10B981绿色徽章4.3 状态视觉区分表课程状态进度条颜色卡片角标视觉表现未开始灰色空条无灰色蒙版学习中靛蓝渐变进度百分比正常展示已完成绿色满格已完成徽章绿色边框作业状态标签颜色截止日期颜色操作按钮未提交红色实心红色临近截止提交作业已提交琥珀色实心灰色等待批改已批改绿色实心 分数灰色查看详情五、关键技术点解析5.1 学习进度的计算与展示逻辑学习进度看似简单实际上有很多细节需要考虑。进度计算的几种方式对比计算方式公式优点缺点适用场景按时长计算已学时长/总时长最准确反映投入不能反映掌握程度视频类课程按章节计算已学章节/总章节简单直观长短章节权重一样文字类课程按练习计算正确率/完成度反映学习效果实现复杂互动类课程本项目采用按时长计算的方式最适合视频网课场景。进度展示的设计要点进度条 数字双重展示直观又精确颜色区分阶段0-30%起步、30-80%进行中、80-100%冲刺平滑动画过渡进度变化时有动画提升体验完成时的仪式感100%时弹出完成祝贺动画5.2 在线学习的专注度设计考量在线学习最大的挑战是容易分心好的学习应用应该帮助用户保持专注。提升专注度的设计策略沉浸式播放器进入学习后隐藏无关UI全屏沉浸式体验学习提醒设置学习时长目标到达时提醒休息专注模式开启后屏蔽消息通知减少干扰连续学习激励连续学习天数打卡形成习惯数据可视化反馈学习数据可视化展示让努力看得见避免的反模式不要在学习页面放太多推荐和广告不要频繁弹出消息打断学习不要用过于鲜艳刺激的颜色保持平和六、常见问题与优化建议踩坑点 1进度重复累加问题表现同一节课反复观看学习时长重复计算进度超过100%解决方案每节课记录最大观看位置只累加新增的观看时长不重复计算踩坑点 2作业截止提醒遗漏问题表现作业快截止了用户没收到提醒错过提交解决方案建立提醒机制提前3天、1天、当天多次提醒重要作业推送通知踩坑点 3笔记搜索困难问题表现笔记多了以后想找某个知识点的笔记找不到解决方案增加笔记搜索功能支持关键词全文检索按课程和时间筛选踩坑点 4学习数据统计不准问题表现后台播放、暂停忘记关等情况导致学习时长虚高解决方案增加活跃检测页面不可见时暂停计时定期检测用户活跃度优化方向增加直播课程功能支持实时互动和连麦实现倍速播放、离线缓存等视频增强功能加入AI答疑助手随时解答学习中的疑问增加学习小组功能组队学习互相监督七、项目总结与扩展方向核心收获通过完成网课与在线学习项目你将掌握学习进度追踪与时长统计的实现方法课程-作业-笔记的多模型关联设计学习类应用的专注感视觉设计进度条与数据可视化的呈现技巧后续扩展功能直播课程实时直播授课支持连麦互动和弹幕⏩倍速播放0.5x-2x倍速调节节省时间离线缓存下载课程离线观看没有网也能学学习提醒每日学习提醒养成学习好习惯AI答疑智能助教随时解答学习疑问学习小组组队学习互相监督共同进步运行效果