周视图统计-Cordovaopenharmony时间维度分析-程序员充电站

一、功能概述

在喝水记录应用中，“按周查看”的需求非常常见。相比单日统计，周视图更能反映用户最近一段时间的整体习惯变化。本篇文章围绕“周视图统计”页面，介绍如何在Cordova Web 层以 7 天为一个单位聚合展示数据，并通过OpenHarmony ArkTS为原生侧提供对应的概要视图，为后续接入图表库或桌面卡片做铺垫。全文继续采用一段代码一段说明的结构，并包含 ArkTS 代码示例。

二、Web 端周视图页面结构

<divid="week-view-page"class="page page-week-view"><h1>最近 7 天喝水统计</h1><tableclass="data-table"id="table-week-view"><thead><tr><th>日期</th><th>饮水量 (ml)</th></tr></thead><tbodyid="table-week-view-body"></tbody></table></div>

这段 HTML 定义了周视图统计页面的基础结构。页面标题明确指出“最近 7 天喝水统计”，下方通过表格列出最近 7 天的每日总饮水量。表头中包含日期和饮水量两列，tbody部分使用table-week-view-body作为占位符，后续由 JavaScript 动态填充。与列表页面不同，这里只关心每天的总量，不展示单条记录，因此数据量较小、阅读更聚焦。

.page-week-view{padding:16px 24px;}#table-week-view td:nth-child(2){text-align:right;}

CSS 简单地为周视图页面增加统一内边距，并将表格第二列（饮水量列）右对齐，这样不同日期的数值纵向对齐，更方便用户进行比较。尽管样式代码很短，但对于提升可读性有着实际作用。

三、计算最近 7 天的日期范围并加载数据

functiongetLast7Days(){consttoday=newDate();constdays=[];for(leti=6;i>=0;i--){constd=newDate(today);d.setDate(today.getDate()-i);days.push(d);}returndays;}

getLast7Days函数用于生成最近 7 天的日期数组，其中包含从 6 天前到今天的每一个日期对象。通过这种方式，可以保证周视图中总是展示连续完整的 7 天，而不是仅根据数据库中是否有记录来决定显示哪些日期。即便某天没有喝水记录，也可以在界面上以 0 ml 的形式显示，帮助用户意识到某些天存在“空白”。

asyncfunctionloadWeekView(){constdays=getLast7Days();consttbody=document.getElementById('table-week-view-body');if(!tbody)return;tbody.innerHTML='';conststatsForNative=[];for(constdofdays){conststart=newDate(d.getFullYear(),d.getMonth(),d.getDate());constend=newDate(start);end.setDate(start.getDate()+1);consttotal=awaitdb.getTotalAmountBetween(start,end);consttr=document.createElement('tr');consttdDate=document.createElement('td');consttdAmount=document.createElement('td');tdDate.textContent=start.toISOString().slice(0,10);tdAmount.textContent=`${total}`;tr.appendChild(tdDate);tr.appendChild(tdAmount);tbody.appendChild(tr);statsForNative.push({date:tdDate.textContent,total});}syncWeekViewToNative(statsForNative);}

loadWeekView函数是周视图页面的核心逻辑。它首先调用getLast7Days获取最近 7 天的日期数组，然后遍历每一天，构造当天的起止时间区间[start, end)，调用封装好的db.getTotalAmountBetween从 IndexedDB 中计算当天总饮水量。对于每一天，函数创建一行表格行，填入日期字符串和饮水量，并追加到tbody中。同时，将{ date, total }对象压入statsForNative数组，最后统一通过syncWeekViewToNative将这份数据发送到原生层。通过这种方式，Web 层既完成了自己的渲染任务，又为 ArkTS 插件提供了周视图的完整原始数据。

document.addEventListener('DOMContentLoaded',()=>{loadWeekView();});

在DOMContentLoaded事件中调用loadWeekView，确保页面结构加载完成后再开始计算和渲染周视图数据。由于周视图只涉及最近 7 天的聚合统计，性能开销通常较小，可以在页面初始化时直接完成计算。

四、通过 Cordova 将周视图数据同步给原生

functionsyncWeekViewToNative(items){if(!window.cordova){console.warn('[WeekView] cordova not ready, skip native sync');return;}cordova.exec(()=>{console.info('[WeekView] sync week data success');},(err)=>{console.error('[WeekView] sync week data failed',err);},'WaterTrackerWeekView','setWeekData',[items]);}

syncWeekViewToNative函数负责通过 Cordova 桥接将statsForNative数组发送给 ArkTS 插件。数组中包含 7 个元素，每个元素对应一天的日期字符串和总饮水量。函数在调用前检查window.cordova，以避免在 Cordova 尚未初始化时调用；随后使用cordova.exec调用插件WaterTrackerWeekView的setWeekData方法，将这 7 天的统计数据打包发送。原生层可以基于这份数据构建自己的周视图展示，例如小型图表或简要列表。

五、OpenHarmony ArkTS 插件和周视图存储

// entry/src/main/ets/plugins/WaterTrackerWeekViewPlugin.etsimportcommonfrom'@ohos.app.ability.common';exportinterfaceWeekDayStat{date?:string;total:number;}exportclassWeekViewStore{privatestatic_items:WeekDayStat[]=[];staticsetItems(items:WeekDayStat[]){this._items=items;}staticgetitems(){returnthis._items;}}exportdefaultclassWaterTrackerWeekViewPlugin{context:common.UIAbilityContext;constructor(ctx:common.UIAbilityContext){this.context=ctx;}setWeekData(args:Array<Object>,callbackId:number){constitems=args[0]asWeekDayStat[];WeekViewStore.setItems(items);console.info(`[WeekViewPlugin] receive${items.length}days`);}}

这段 ArkTS 代码定义了周视图插件WaterTrackerWeekViewPlugin及其数据存储WeekViewStore。WeekDayStat接口表示某一天的统计信息，包含日期字符串和总饮水量。WeekViewStore通过一个静态数组_items缓存从 Web 层同步过来的 7 天数据，提供setItems和items访问器。插件类在setWeekData方法中从args[0]解析出数组，并交给WeekViewStore.setItems存储。随后，任何 ArkUI 组件都可以直接从WeekViewStore.items中读取数据，构建原生周视图。

六、ArkUI 中构建简易周视图

// entry/src/main/ets/pages/WeekViewPage.etsimport{WeekViewStore}from'../plugins/WaterTrackerWeekViewPlugin';@Componentstruct WeekViewStats{build(){Column(){Text('最近 7 天喝水统计').fontSize(18).margin({bottom:8});WeekViewStore.items.forEach((item)=>{Row(){Text(item.date||'').fontSize(14);Text(`${item.total}ml`).fontSize(14).margin({left:8});}.margin({bottom:4});});}.padding(16)}}

WeekViewStats是一个示例性的 ArkUI 组件，用于在原生界面中展示最近 7 天的喝水总量。组件在build方法中遍历WeekViewStore.items，为每一天渲染一行Row，显示日期与对应的饮水量。虽然这里只是文字列表，但已经可以让用户在原生页面快速浏览一周的总体情况。在实际应用中，你可以将这份数据结合图表控件，绘制折线图或柱状图，让趋势变化一目了然。

七、小结

本篇文章以“周视图统计”为例，展示了 Cordova&openharmony 混合应用中按时间维度聚合数据的一条清晰路径：Web 层通过getLast7Days和loadWeekView计算最近 7 天的每日总饮水量并渲染表格，同时调用syncWeekViewToNative将统计结果发送给 ArkTS 插件；OpenHarmony 侧使用WeekViewStore和WaterTrackerWeekViewPlugin缓存这些数据，并在 ArkUI 组件WeekViewStats中构建简易周视图。

通过一段代码一段说明的方式，本文强调了“由 Web 层负责数据聚合，再交给原生侧做展示扩展”的思路，从而避免在多个层级重复计算。你可以在此基础上继续扩展更多时间窗口（例如 14 天、30 天），或者与每日目标、提醒模块联动，构建更完整的喝水习惯分析体系。