企业官网建设流程全解析

网站建设一年能收入多少钱,永州内部网站建设公司,视频制作图片,页面设计常用的字体颜色有一、功能概述 喝水记录应用的核心价值之一是“让数据说话”。用户不仅希望看到当天喝了多少水#xff0c;还希望了解最近一周、一个月的整体趋势#xff0c;以及不同类型、不同容器的喝水分布。本篇文章以“统计概览”页面为例#xff0c;介绍如何在 Cordova Web 层 汇总多维…一、功能概述喝水记录应用的核心价值之一是“让数据说话”。用户不仅希望看到当天喝了多少水还希望了解最近一周、一个月的整体趋势以及不同类型、不同容器的喝水分布。本篇文章以“统计概览”页面为例介绍如何在Cordova Web 层汇总多维度指标并通过OpenHarmony ArkTS提供原生侧的简洁统计视图为后续接入图表库或桌面卡片打下基础。文章继续采用一段代码一段说明的方式避免出现大段难以理解的代码块。二、Web 端统计概览页面结构dividstats-pageclasspage page-statsh1统计概览/h1divclassstats-cardsdivclasscardidcard-week-totaldivclasscard-title近 7 天总饮水量/divdivclasscard-valueidweek-total-ml0 ml/div/divdivclasscardidcard-month-totaldivclasscard-title本月总饮水量/divdivclasscard-valueidmonth-total-ml0 ml/div/div/div/div这段 HTML 定义了统计概览页面的基础结构。顶部是一个标题“统计概览”下方使用两张卡片展示近 7 天与本月的总饮水量。每张卡片中card-title用于说明指标含义card-value显示具体数值。通过为数值部分添加唯一id如week-total-ml、month-total-ml后续可以在 JavaScript 中轻松更新它们的文本内容。尽管示例只展示了两个指标但页面结构很容易扩展以展示更多维度的信息。.page-stats{padding:16px 24px;}.stats-cards{display:flex;gap:12px;margin-top:16px;}.stats-cards .card{flex:1;padding:16px;border-radius:8px;background-color:#1f2933;color:#fff;}CSS 部分为统计卡片提供了基础布局与视觉样式。.stats-cards使用横向flex布局与间距让多张卡片整齐排列.card通过内边距、圆角和深色背景塑造出统一的卡片视觉风格与仪表板、类型管理等页面保持一致。这样的布局既适合在 PC 端展示也方便在后续做响应式调整。三、从 IndexedDB 汇总统计数据asyncfunctionloadStatsOverview(){consttodaynewDate();constweekStartnewDate(today);weekStart.setDate(today.getDate()-6);constmonthStartnewDate(today.getFullYear(),today.getMonth(),1);constweekTotalawaitdb.getTotalAmountBetween(weekStart,today);constmonthTotalawaitdb.getTotalAmountBetween(monthStart,today);document.getElementById(week-total-ml)!.textContent${weekTotal}ml;document.getElementById(month-total-ml)!.textContent${monthTotal}ml;syncStatsToNative({weekTotal,monthTotal});}loadStatsOverview函数负责从 IndexedDB 中汇总统计数据并更新页面显示。首先计算近 7 天的起始日期weekStart包含今天在内的连续 7 天以及本月起始日期monthStart。然后调用封装好的db.getTotalAmountBetween方法在给定时间范围之间计算总饮水量。拿到结果后直接更新两个卡片的数值文本并调用syncStatsToNative将这两个统计指标发送给原生层。这样一来Web 和原生可以共享同一份统计结果避免重复计算。document.addEventListener(DOMContentLoaded,(){loadStatsOverview();});在DOMContentLoaded事件中调用loadStatsOverview确保页面结构准备就绪后再进行统计计算和渲染。统计操作通常涉及数据库扫描放在页面初始化时执行既能保证数据的及时性又不会阻塞整体应用启动流程。四、通过 Cordova 同步统计概览到原生functionsyncStatsToNative(stats){if(!window.cordova){console.warn([Stats] cordova not ready, skip native sync);return;}cordova.exec((){console.info([Stats] sync overview success);},(err){console.error([Stats] sync overview failed,err);},WaterTrackerStats,setOverview,[stats]);}syncStatsToNative函数展示了如何将统计概览数据通过 Cordova 桥接发送给 ArkTS 插件。函数内部对window.cordova进行检查以避免在 Cordova 尚未就绪时调用随后使用cordova.exec调用插件WaterTrackerStats的setOverview动作并将包含weekTotal、monthTotal字段的对象作为参数传入。原生侧收到该对象后就可以直接使用这些统计数据而不必再重新遍历数据库。五、OpenHarmony ArkTS 插件与统计存储// entry/src/main/ets/plugins/WaterTrackerStatsPlugin.etsimportcommonfromohos.app.ability.common;exportinterfaceStatsOverview{weekTotal:number;monthTotal:number;}exportclassStatsStore{privatestatic_overview:StatsOverview{weekTotal:0,monthTotal:0};staticsetOverview(value:StatsOverview){this._overviewvalue;}staticgetoverview(){returnthis._overview;}}exportdefaultclassWaterTrackerStatsPlugin{context:common.UIAbilityContext;constructor(ctx:common.UIAbilityContext){this.contextctx;}setOverview(args:ArrayObject,callbackId:number){constoverviewargs[0]asStatsOverview;StatsStore.setOverview(overview);console.info([StatsPlugin] weekTotal${overview.weekTotal}, monthTotal${overview.monthTotal});}}这段 ArkTS 代码定义了统计插件WaterTrackerStatsPlugin与配套存储StatsStore。StatsOverview接口描述了统计概览对象包含的字段近 7 天总饮水量和本月总饮水量。StatsStore使用一个静态字段_overview缓存最新的统计结果并提供setOverview和overview两个方法用于更新和读取。插件类在setOverview方法中从args[0]解析出统计对象并交给StatsStore.setOverview存储同时打印日志。在 ArkUI 组件中可以直接通过StatsStore.overview获取这两个指标从而构建原生侧的统计视图。六、ArkUI 中展示多维度统计信息// entry/src/main/ets/pages/StatsOverviewPage.etsimport{StatsStore}from../plugins/WaterTrackerStatsPlugin;Component struct StatsOverviewView{build(){constoverviewStatsStore.overview;Column(){Text(喝水统计概览).fontSize(18).margin({bottom:8});Text(近 7 天总饮水量${overview.weekTotal}ml).fontSize(16);Text(本月总饮水量${overview.monthTotal}ml).fontSize(16).margin({top:4});}.padding(16)}}StatsOverviewView是一个简单的 ArkUI 组件示例用于在原生界面中展示近 7 天和本月总饮水量。组件在build方法中从StatsStore.overview中读取统计结果并使用多行Text将其以自然语言的形式呈现出来。尽管这里只展示了两个基础指标但已经足以为用户提供一个直观的总体印象。后续可以在此基础上接入图表库在 Web 或原生侧进一步可视化这些数据例如绘制柱状图、折线图等。七、小结本篇文章展示了“统计概览”功能在 Cordovaopenharmony 混合应用中的一条完整实现路径。Web 层通过loadStatsOverview函数从 IndexedDB 汇总近 7 天和本月的饮水总量并更新页面上的统计卡片随后利用syncStatsToNative将统计结果同步给 OpenHarmony ArkTS 插件。原生侧通过StatsStore和WaterTrackerStatsPlugin缓存这些指标并在 ArkUI 组件StatsOverviewView中提供原生统计视图。通过一段代码一段说明的方式本文强调了“先在 Web 层充分利用现有数据模型进行汇总再把结果分享给原生层复用”的思路避免在多个层级重复做同样的统计工作。你可以在此基础上继续扩展更多维度的统计例如按类型、按容器的总量排行或者按时间段的平均喝水量等将“统计概览”打造为整个喝水记录应用的数据中枢。