WordPress一鍵開(kāi)啟全站SSL,沛縣可以做網(wǎng)站的單位,如何建設(shè)網(wǎng)站的外鏈,wordpress 側(cè)邊懸浮窗一、功能概述 在喝水記錄應(yīng)用中#xff0c;“按周查看”的需求非常常見(jiàn)。相比單日統(tǒng)計(jì)#xff0c;周視圖更能反映用戶(hù)最近一段時(shí)間的整體習(xí)慣變化。本篇文章圍繞“周視圖統(tǒng)計(jì)”頁(yè)面#xff0c;介紹如何在 Cordova Web 層 以 7 天為一個(gè)單位聚合展示數(shù)據(jù)#xff0c;并通過(guò) O…一、功能概述在喝水記錄應(yīng)用中“按周查看”的需求非常常見(jiàn)。相比單日統(tǒng)計(jì)周視圖更能反映用戶(hù)最近一段時(shí)間的整體習(xí)慣變化。本篇文章圍繞“周視圖統(tǒng)計(jì)”頁(yè)面介紹如何在Cordova Web 層以 7 天為一個(gè)單位聚合展示數(shù)據(jù)并通過(guò)OpenHarmony ArkTS為原生側(cè)提供對(duì)應(yīng)的概要視圖為后續(xù)接入圖表庫(kù)或桌面卡片做鋪墊。全文繼續(xù)采用一段代碼一段說(shuō)明的結(jié)構(gòu)并包含 ArkTS 代碼示例。二、Web 端周視圖頁(yè)面結(jié)構(gòu)dividweek-view-pageclasspage page-week-viewh1最近 7 天喝水統(tǒng)計(jì)/h1tableclassdata-tableidtable-week-viewtheadtrth日期/thth飲水量 (ml)/th/tr/theadtbodyidtable-week-view-body/tbody/table/div這段 HTML 定義了周視圖統(tǒng)計(jì)頁(yè)面的基礎(chǔ)結(jié)構(gòu)。頁(yè)面標(biāo)題明確指出“最近 7 天喝水統(tǒng)計(jì)”下方通過(guò)表格列出最近 7 天的每日總飲水量。表頭中包含日期和飲水量?jī)闪衪body部分使用table-week-view-body作為占位符后續(xù)由 JavaScript 動(dòng)態(tài)填充。與列表頁(yè)面不同這里只關(guān)心每天的總量不展示單條記錄因此數(shù)據(jù)量較小、閱讀更聚焦。.page-week-view{padding:16px 24px;}#table-week-view td:nth-child(2){text-align:right;}CSS 簡(jiǎn)單地為周視圖頁(yè)面增加統(tǒng)一內(nèi)邊距并將表格第二列飲水量列右對(duì)齊這樣不同日期的數(shù)值縱向?qū)R更方便用戶(hù)進(jìn)行比較。盡管樣式代碼很短但對(duì)于提升可讀性有著實(shí)際作用。三、計(jì)算最近 7 天的日期范圍并加載數(shù)據(jù)functiongetLast7Days(){consttodaynewDate();constdays[];for(leti6;i0;i--){constdnewDate(today);d.setDate(today.getDate()-i);days.push(d);}returndays;}getLast7Days函數(shù)用于生成最近 7 天的日期數(shù)組其中包含從 6 天前到今天的每一個(gè)日期對(duì)象。通過(guò)這種方式可以保證周視圖中總是展示連續(xù)完整的 7 天而不是僅根據(jù)數(shù)據(jù)庫(kù)中是否有記錄來(lái)決定顯示哪些日期。即便某天沒(méi)有喝水記錄也可以在界面上以 0 ml 的形式顯示幫助用戶(hù)意識(shí)到某些天存在“空白”。asyncfunctionloadWeekView(){constdaysgetLast7Days();consttbodydocument.getElementById(table-week-view-body);if(!tbody)return;tbody.innerHTML;conststatsForNative[];for(constdofdays){conststartnewDate(d.getFullYear(),d.getMonth(),d.getDate());constendnewDate(start);end.setDate(start.getDate()1);consttotalawaitdb.getTotalAmountBetween(start,end);consttrdocument.createElement(tr);consttdDatedocument.createElement(td);consttdAmountdocument.createElement(td);tdDate.textContentstart.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函數(shù)是周視圖頁(yè)面的核心邏輯。它首先調(diào)用getLast7Days獲取最近 7 天的日期數(shù)組然后遍歷每一天構(gòu)造當(dāng)天的起止時(shí)間區(qū)間[start, end)調(diào)用封裝好的db.getTotalAmountBetween從 IndexedDB 中計(jì)算當(dāng)天總飲水量。對(duì)于每一天函數(shù)創(chuàng)建一行表格行填入日期字符串和飲水量并追加到tbody中。同時(shí)將{ date, total }對(duì)象壓入statsForNative數(shù)組最后統(tǒng)一通過(guò)syncWeekViewToNative將這份數(shù)據(jù)發(fā)送到原生層。通過(guò)這種方式Web 層既完成了自己的渲染任務(wù)又為 ArkTS 插件提供了周視圖的完整原始數(shù)據(jù)。document.addEventListener(DOMContentLoaded,(){loadWeekView();});在DOMContentLoaded事件中調(diào)用loadWeekView確保頁(yè)面結(jié)構(gòu)加載完成后再開(kāi)始計(jì)算和渲染周視圖數(shù)據(jù)。由于周視圖只涉及最近 7 天的聚合統(tǒng)計(jì)性能開(kāi)銷(xiāo)通常較小可以在頁(yè)面初始化時(shí)直接完成計(jì)算。四、通過(guò) Cordova 將周視圖數(shù)據(jù)同步給原生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函數(shù)負(fù)責(zé)通過(guò) Cordova 橋接將statsForNative數(shù)組發(fā)送給 ArkTS 插件。數(shù)組中包含 7 個(gè)元素每個(gè)元素對(duì)應(yīng)一天的日期字符串和總飲水量。函數(shù)在調(diào)用前檢查window.cordova以避免在 Cordova 尚未初始化時(shí)調(diào)用隨后使用cordova.exec調(diào)用插件WaterTrackerWeekView的setWeekData方法將這 7 天的統(tǒng)計(jì)數(shù)據(jù)打包發(fā)送。原生層可以基于這份數(shù)據(jù)構(gòu)建自己的周視圖展示例如小型圖表或簡(jiǎn)要列表。五、OpenHarmony ArkTS 插件和周視圖存儲(chǔ)// entry/src/main/ets/plugins/WaterTrackerWeekViewPlugin.etsimportcommonfromohos.app.ability.common;exportinterfaceWeekDayStat{date?:string;total:number;}exportclassWeekViewStore{privatestatic_items:WeekDayStat[][];staticsetItems(items:WeekDayStat[]){this._itemsitems;}staticgetitems(){returnthis._items;}}exportdefaultclassWaterTrackerWeekViewPlugin{context:common.UIAbilityContext;constructor(ctx:common.UIAbilityContext){this.contextctx;}setWeekData(args:ArrayObject,callbackId:number){constitemsargs[0]asWeekDayStat[];WeekViewStore.setItems(items);console.info([WeekViewPlugin] receive${items.length}days);}}這段 ArkTS 代碼定義了周視圖插件WaterTrackerWeekViewPlugin及其數(shù)據(jù)存儲(chǔ)WeekViewStore。WeekDayStat接口表示某一天的統(tǒng)計(jì)信息包含日期字符串和總飲水量。WeekViewStore通過(guò)一個(gè)靜態(tài)數(shù)組_items緩存從 Web 層同步過(guò)來(lái)的 7 天數(shù)據(jù)提供setItems和items訪問(wèn)器。插件類(lèi)在setWeekData方法中從args[0]解析出數(shù)組并交給WeekViewStore.setItems存儲(chǔ)。隨后任何 ArkUI 組件都可以直接從WeekViewStore.items中讀取數(shù)據(jù)構(gòu)建原生周視圖。六、ArkUI 中構(gòu)建簡(jiǎn)易周視圖// entry/src/main/ets/pages/WeekViewPage.etsimport{WeekViewStore}from../plugins/WaterTrackerWeekViewPlugin;Componentstruct WeekViewStats{build(){Column(){Text(最近 7 天喝水統(tǒng)計(jì)).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是一個(gè)示例性的 ArkUI 組件用于在原生界面中展示最近 7 天的喝水總量。組件在build方法中遍歷WeekViewStore.items為每一天渲染一行Row顯示日期與對(duì)應(yīng)的飲水量。雖然這里只是文字列表但已經(jīng)可以讓用戶(hù)在原生頁(yè)面快速瀏覽一周的總體情況。在實(shí)際應(yīng)用中你可以將這份數(shù)據(jù)結(jié)合圖表控件繪制折線圖或柱狀圖讓趨勢(shì)變化一目了然。七、小結(jié)本篇文章以“周視圖統(tǒng)計(jì)”為例展示了 Cordovaopenharmony 混合應(yīng)用中按時(shí)間維度聚合數(shù)據(jù)的一條清晰路徑Web 層通過(guò)getLast7Days和loadWeekView計(jì)算最近 7 天的每日總飲水量并渲染表格同時(shí)調(diào)用syncWeekViewToNative將統(tǒng)計(jì)結(jié)果發(fā)送給 ArkTS 插件OpenHarmony 側(cè)使用WeekViewStore和WaterTrackerWeekViewPlugin緩存這些數(shù)據(jù)并在 ArkUI 組件WeekViewStats中構(gòu)建簡(jiǎn)易周視圖。通過(guò)一段代碼一段說(shuō)明的方式本文強(qiáng)調(diào)了“由 Web 層負(fù)責(zé)數(shù)據(jù)聚合再交給原生側(cè)做展示擴(kuò)展”的思路從而避免在多個(gè)層級(jí)重復(fù)計(jì)算。你可以在此基礎(chǔ)上繼續(xù)擴(kuò)展更多時(shí)間窗口例如 14 天、30 天或者與每日目標(biāo)、提醒模塊聯(lián)動(dòng)構(gòu)建更完整的喝水習(xí)慣分析體系。