活动记录 Cordova 与 OpenHarmony 混合开发实战

📌 模块概述

活动记录功能记录用户的所有操作，包括创建、编辑、删除笔记等。用户可以查看活动历史，了解自己的操作记录。

🔗 完整流程

第一步：记录活动

每当用户执行操作时，记录活动。

第二步：存储活动

将活动存储到数据库。

第三步：显示活动

显示活动历史列表。

🔧 Web代码实现

javascript 复制代码

async renderActivity() {
  const activities = await noteDB.getAllActivities();
  const sortedActivities = activities.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

  return `
    <div class="page active">
      <div class="page-header">
        <h1 class="page-title">📅 活动记录</h1>
      </div>
      <div class="activity-list">
        ${sortedActivities.map(activity => `
          <div class="activity-item">
            <span class="activity-type">${activity.type}</span>
            <span class="activity-description">${activity.description}</span>
            <span class="activity-time">${Utils.formatDate(activity.createdAt)}</span>
          </div>
        `).join('')}
      </div>
    </div>
  `;
}

// 记录活动
async recordActivity(type, description) {
  try {
    const activity = {
      id: Date.now(),
      type: type,
      description: description,
      createdAt: new Date().toISOString()
    };

    await noteDB.addActivity(activity);
  } catch (error) {
    console.error('记录活动失败:', error);
  }
}

🔌 OpenHarmony 原生代码

typescript 复制代码

// ActivityPlugin.ets - 活动记录插件
import { webview } from '@kit.ArkWeb';
import { common } from '@kit.AbilityKit';
import { fileIo } from '@kit.CoreFileKit';

@NativeComponent
export class ActivityPlugin {
  private context: common.UIAbilityContext;

  constructor(context: common.UIAbilityContext) {
    this.context = context;
  }

  // 初始化插件
  public init(webviewController: webview.WebviewController): void {
    webviewController.registerJavaScriptProxy(
      new ActivityJSProxy(this),
      'activityPlugin',
      ['recordActivity', 'getActivities']
    );
  }

  // 记录活动
  public recordActivity(type: string, description: string): Promise<boolean> {
    return new Promise((resolve) => {
      try {
        const activitiesPath = this.context.cacheDir + '/activities.json';
        let activities: Array<any> = [];
        
        try {
          const content = fileIo.readTextSync(activitiesPath);
          activities = JSON.parse(content);
        } catch {
          activities = [];
        }

        activities.push({
          id: Date.now(),
          type: type,
          description: description,
          createdAt: new Date().toISOString()
        });

        fileIo.writeTextSync(activitiesPath, JSON.stringify(activities, null, 2));
        resolve(true);
      } catch (error) {
        console.error('Failed to record activity:', error);
        resolve(false);
      }
    });
  }

  // 获取活动列表
  public getActivities(): Promise<Array<any>> {
    return new Promise((resolve) => {
      try {
        const activitiesPath = this.context.cacheDir + '/activities.json';
        const content = fileIo.readTextSync(activitiesPath);
        const activities = JSON.parse(content);
        resolve(activities);
      } catch (error) {
        console.error('Failed to get activities:', error);
        resolve([]);
      }
    });
  }
}

// ActivityJSProxy.ets - JavaScript代理类
class ActivityJSProxy {
  private plugin: ActivityPlugin;

  constructor(plugin: ActivityPlugin) {
    this.plugin = plugin;
  }

  recordActivity(type: string, description: string): void {
    this.plugin.recordActivity(type, description).then(success => {
      console.log('Activity recorded:', success);
    });
  }

  getActivities(): void {
    this.plugin.getActivities().then(activities => {
      console.log('Activities:', activities.length);
    });
  }
}

📝 总结

活动记录功能展示了如何在Cordova与OpenHarmony混合开发中实现操作日志系统。

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