时间轴模块 - Cordova与OpenHarmony混合开发实战-育师

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

时间轴模块用于以时间顺序展示所有日记。这个模块提供了按时间排序的日记视图，用户可以直观地看到日记的时间分布。通过Cordova框架，我们能够在Web层实现灵活的时间轴展示，同时利用OpenHarmony的日期处理能力进行时间聚合。

时间轴模块采用了竖向时间线设计，每个日记显示为时间线上的一个节点，用户可以快速浏览日记的时间分布。

🔗 完整流程

数据加载流程：应用从数据库中加载所有日记，按日期倒序排列，然后按月份或年份进行分组。

时间轴渲染流程：应用将分组后的日记渲染为时间轴，每个月份或年份作为一个时间段，该时间段内的日记显示为时间线上的节点。

交互流程：用户可以点击时间线上的节点查看日记详情，或者点击时间段展开/收起该时间段的日记。

🔧 Web代码实现

// 按月份分组日记functiongroupDiariesByMonth(diaries){constgrouped={};diaries.forEach(diary=>{constdate=newDate(diary.date);constmonthKey=`${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}`;if(!grouped[monthKey]){grouped[monthKey]=[];}grouped[monthKey].push(diary);});returnObject.entries(grouped).sort((a,b)=>newDate(b[0])-newDate(a[0])).map(([month,diaries])=>({month:month,diaries:diaries.sort((a,b)=>newDate(b.date)-newDate(a.date))}));}// 加载时间轴数据asyncfunctionloadTimelineData(){try{constdiaries=awaitdb.getAllDiaries();returngroupDiariesByMonth(diaries);}catch(error){console.error('加载时间轴失败:',error);return[];}}

这些函数处理日记的分组和时间轴数据的加载。

// 渲染时间轴页面asyncfunctionrenderTimeline(){consttimelineData=awaitloadTimelineData();consthtml=`<div class="timeline-container"> <div class="timeline-header"> <h1>时间轴</h1> <p>按时间顺序浏览所有日记</p> </div> <div class="timeline">${timelineData.map((monthGroup,index)=>`<div class="timeline-section"> <div class="timeline-month"> <h2>${formatMonthYear(monthGroup.month)}</h2> <span class="diary-count">${monthGroup.diaries.length}条日记</span> </div> <div class="timeline-items">${monthGroup.diaries.map(diary=>`<div class="timeline-item" onclick="app.navigateTo('diary-edit',${diary.id})"> <div class="timeline-dot"></div> <div class="timeline-content"> <h3>${diary.title}</h3> <p class="diary-date">${formatDate(diary.date)}</p> <p class="diary-excerpt">${diary.content.substring(0,100)}...</p> <span class="pet-tag">${diary.petName}</span> </div> </div>`).join('')}</div> </div>`).join('')}</div> </div>`;document.getElementById('page-container').innerHTML=html;}// 格式化月份年份functionformatMonthYear(monthKey){const[year,month]=monthKey.split('-');constdate=newDate(year,parseInt(month)-1);returndate.toLocaleDateString('zh-CN',{year:'numeric',month:'long'});}

这个渲染函数生成了时间轴界面，按月份分组展示日记。

🔌 原生代码实现

// TimelinePlugin.ets - 时间轴原生插件 import { fileIo } from '@kit.BasicServicesKit'; @Entry @Component struct TimelinePlugin { // 生成时间轴报告 generateTimelineReport(timelineData: string, callback: (path: string) => void): void { try { const data = JSON.parse(timelineData); let report = '时间轴报告\n============\n'; data.forEach(monthGroup => { report += `\n${monthGroup.month}: ${monthGroup.diaries.length} 条日记\n`; }); report += `\n生成时间: ${new Date().toISOString()}`; const reportPath = `/data/reports/timeline_${Date.now()}.txt`; const file = fileIo.openSync(reportPath, fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE); fileIo.writeSync(file.fd, report); fileIo.closeSync(file.fd); callback(reportPath); } catch (error) { console.error('[TimelinePlugin] 生成报告失败:', error); callback(''); } } build() { Column() { Web({ src: 'resource://rawfile/www/index.html', controller: new WebviewController() }) } } }

这个原生插件提供了时间轴报告生成功能。

Web-Native通信代码

// 生成时间轴报告functiongenerateNativeTimelineReport(timelineData){returnnewPromise((resolve,reject)=>{cordova.exec((path)=>{if(path){showSuccess(`报告已生成:${path}`);resolve(path);}else{reject(newError('生成失败'));}},(error)=>{console.error('生成失败:',error);reject(error);},'TimelinePlugin','generateTimelineReport',[JSON.stringify(timelineData)]);});}