open harmony 项目实战学习打卡功能如何设计更有激励感学习类 App 想让用户持续打开不能只靠内容堆叠还要给用户一点“我正在进步”的反馈。“语文视界”的学习中心里做了每日打卡、本周进度、连续学习天数和今日任务展示。这个功能不复杂但很适合作为教育类 App 的留存入口。☀️一、学习中心展示什么学习中心第一屏包含连续学习天数今日学习状态本周打卡进度今日背诵任务诗词背诵、默写、配对、朝代排序模块这些内容组合起来会让用户一打开页面就知道今天有没有学、已经坚持多久、接下来可以做什么。二、核心状态StatecurrentStreak: number 0;StatetodayCompleted: boolean false;StateprivatecheckInDatesStr: string ;currentStreak是连续天数todayCompleted表示今天是否完成checkInDatesStr记录已打卡日期。项目里用|分隔日期2026-6-28|2026-6-29|2026-6-30这种做法简单适合轻量本地状态。三、读取本地数据进入页面时会加载持久化数据privateloadPersistedData(): void {this.migrateLegacyCheckInIfNeeded();constraw AppStorage.getstring(learn_checkin_dates);this.checkInDatesStr raw ! undefined raw.length 0? raw :;consttoday this.getTodayDate();constlastCheckIn AppStorage.getstring(learn_last_checkin_date) ||;this.todayCompleted this.isDateChecked(today); }这里还调用了migrateLegacyCheckInIfNeeded说明项目考虑到了旧版本数据兼容。四、旧数据迁移如果旧版本只保存了learn_checkin_today和learn_streak_date新版本会迁移到日期列表privatemigrateLegacyCheckInIfNeeded():void{consthasNew AppStorage.getstring(learn_checkin_dates);if(hasNew ! undefined hasNew.length 0) {return; }constoldDate AppStorage.getstring(learn_streak_date);constoldDone AppStorage.getboolean(learn_checkin_today);if(oldDate ! undefined oldDate.length 0 oldDone true) { AppStorage.setOrCreate(learn_checkin_dates, oldDate); AppStorage.setOrCreate(learn_last_checkin_date, oldDate); } }这个细节很适合写到文章里因为它比普通 Demo 更像真实项目。五、防止重复打卡用户点击打卡时先判断今天是否已经打过if(this.isDateChecked(today)) { promptAction.showToast({ message:今日已打卡 ♡, duration:1500});return; }已经打卡就提示不重复增加天数。六、连续天数计算项目会比较上次打卡日期和昨天constyesterday this.getYesterdayDate();letstreak AppStorage.getnumber(learn_streak);if(streak undefined) {streak0; }if(last yesterday) {streak streak 1; }elseif (last! today) {streak1; }如果昨天也打卡就连续天数 1如果中断了就从 1 开始。七、保存打卡状态privatesavePersistedData(): void {AppStorage.setOrCreate(learn_streak,this.currentStreak);AppStorage.setOrCreate(learn_streak_date,this.getTodayDate());AppStorage.setOrCreate(learn_checkin_today,this.todayCompleted);AppStorage.setOrCreate(learn_checkin_dates,this.checkInDatesStr);AppStorage.setOrCreate(learn_last_checkin_date,this.getTodayDate()); }保存字段比较多是为了兼容当前页面展示和旧版本逻辑。八、本周进度展示页面通过 7 个格子展示周一到周日ForEach([0, 1, 2, 3, 4, 5, 6], (index:number) {Column(){Text(this.getWeekDayName(index));Column(){if(this.isWeekSlotChecked(index)) {Text(✓); }else{Text(○); } } } });这类视觉反馈能让用户快速感知自己的学习节奏。九、激励感来自哪里这个功能的激励感主要来自四点数字反馈连续多少天。状态反馈今日已完成/进行中。视觉反馈本周格子点亮。即时反馈Toast 提示打卡成功。学习类产品不一定要做复杂游戏化简单而稳定的反馈就很有效。总结每日打卡功能本身不难真正值得注意的是状态设计日期怎么存、连续天数怎么算、重复打卡怎么拦、旧数据怎么迁移、本周进度怎么展示。这个项目用AppStorage就实现了一套完整的本地打卡方案轻量但够用很适合 OpenHarmony 教育类 App 借鉴。