当前位置：首页 > news >正文

open harmony 项目实战：学习打卡功能如何设计更有激励感

news 2026/7/1 1:25:58

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.get<string>('learn_checkin_dates');this.checkInDatesStr = raw !== undefined && raw.length >0? raw :'';consttoday =this.getTodayDate();constlastCheckIn = AppStorage.get<string>('learn_last_checkin_date') ||'';this.todayCompleted =this.isDateChecked(today); }

这里还调用了migrateLegacyCheckInIfNeeded，说明项目考虑到了旧版本数据兼容。

四、旧数据迁移

如果旧版本只保存了learn_checkin_today和learn_streak_date，新版本会迁移到日期列表：

privatemigrateLegacyCheckInIfNeeded():void{consthasNew = AppStorage.get<string>('learn_checkin_dates');if(hasNew !== undefined && hasNew.length >0) {return; }constoldDate = AppStorage.get<string>('learn_streak_date');constoldDone = AppStorage.get<boolean>('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.get<number>('learn_streak');if(streak === undefined) {streak=0; }if(last=== yesterday) {streak= streak +1; }elseif (last!== today) {streak=1; }

如果昨天也打卡，就连续天数 +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('○'); } } } });