烹饪统计页面 Cordova&OpenHarmony 混合开发实战

📌 模块概述

烹饪统计页面与上一节的统计分析页面相辅相成，它更加关注「实际被做过多少次」这一维度，如已烹饪菜谱数量、最常做的菜、收藏数量以及热门菜谱 TOP 10 列表。这里主要依赖菜谱对象上的 viewCount 和 lastViewedAt 字段，这些字段在用户查看菜谱详情时由 Web 层自动更新。ArkTS 原生层可以在这里补充更深入的行为数据，例如按时间段统计烹饪活跃度。

🔗 烹饪行为统计流程

用户每次通过 viewRecipe(id) 打开菜谱详情时，Web 层递增 viewCount 并更新 lastViewedAt；
烹饪统计页面 renderCookingStats() 从数据库读取所有菜谱，并按 viewCount 排序；
页面顶部展示已烹饪菜谱数量、最常做的菜的次数、收藏数量等；
下方列表展示按次数排序的热门菜谱 TOP 10；
如果需要更长周期的统计，可通过 ArkTS 插件在原生层记录每日或每周汇总信息。

🔧 热门菜谱列表结构（HTML 片段）

html 复制代码

<div class="card">
  <div class="card-header">
    <h3 class="card-title">热门菜谱 TOP 10</h3>
  </div>
  <div class="card-content">
    <div class="hot-item">
      <span class="rank">1</span>
      <div class="info">
        <div class="name">番茄炒蛋</div>
        <div class="text-sub">查看 25 次</div>
      </div>
    </div>
  </div>
</div>

这段 HTML 片段展示了热门菜谱列表的一项记录：左侧是排名圆圈，右侧是名称和查看次数说明。通过简单的样式即可在 ArkWeb 中实现清晰的排行效果。

🔧 烹饪统计计算逻辑（JavaScript 片段）

javascript 复制代码

async function renderCookingStats() {
  const recipes = await db.getAllRecipes();
  const totalCooked = recipes.filter(r => r.lastViewedAt).length;
  const favoriteCount = recipes.filter(r => r.isFavorite).length;

  const top = recipes
    .slice()
    .sort((a, b) => (b.viewCount || 0) - (a.viewCount || 0))
    .slice(0, 10);

  // 省略渲染 HTML 的部分
}

这段代码展示了烹饪统计所需的几个关键指标：已烹饪菜谱数、收藏数以及热门菜谱 TOP 10。所有运算都在本地数组上完成，逻辑直观易懂。

🔌 在鸿蒙原生层记录每日烹饪活跃度（ArkTS 片段）

ts 复制代码

// entry/src/main/ets/plugins/CookingActivityPlugin.ets
import plugin from '@ohos.plugin';

@plugin
export default class CookingActivityPlugin {
  async markCookedToday(count: number): Promise<void> {
    // 示例：记录今日烹饪次数，用于后续趋势分析
    console.info('cooked today: ' + count);
  }
}

ArkTS 的 CookingActivityPlugin 提供 markCookedToday 方法，用于记录当天烹饪次数。真实项目中可以在每天结束时或打开统计页面时调用它，将当日的已烹饪菜谱数写入原生存储。

javascript 复制代码

async function syncCookingActivityNative() {
  if (!window.cordova) return;
  const recipes = await db.getAllRecipes();
  const totalCooked = recipes.filter(r => r.lastViewedAt).length;

  cordova.exec(null, null, 'CookingActivityPlugin', 'markCookedToday', [totalCooked]);
}

在 Web 层，我们可以在用户打开烹饪统计页面时调用 syncCookingActivityNative，将当前「已烹饪菜谱数量」发送给 ArkTS 插件，由原生层负责持久化和进一步分析。

📝 小结

烹饪统计页面从行为维度帮助家庭理解哪些菜被做得最多、哪些菜几乎没被使用。通过 Cordova&OpenHarmony 混合模式，我们在 Web 层维护 viewCount 和 lastViewedAt 等行为字段，并在 ArkTS 层记录更加长期的活跃度数据，为后续趋势分析和智能推荐提供基础。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net