欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

日志记录系统允许应用记录用户操作和系统事件。在Cordova与OpenHarmony混合开发框架下，这个模块提供了完整的日志记录功能，包括操作日志、错误日志、系统日志等。日志记录系统的设计目标是为应用提供完整的审计跟踪，帮助开发者调试和监控应用。

日志记录系统采用了分级日志的设计，不同级别的日志（如DEBUG、INFO、WARN、ERROR）会被记录到不同的位置。

🔗 完整流程

第一步：日志生成

当应用执行各种操作时，系统会生成相应的日志记录。日志包含操作的详细信息，如操作类型、操作时间、操作结果等。

第二步：日志存储

系统会将日志保存到本地存储或文件系统中。不同级别的日志会被保存到不同的文件中。

第三步：日志查看

用户可以通过日志查看界面查看应用的日志。用户可以按日期、级别等条件筛选日志。

Web代码实现

HTML结构

日志记录页面的HTML结构包含页面头部和日志列表两个主要部分。页面头部包含日志级别筛选器和清空日志按钮。日志列表显示所有记录的日志，每条日志包含时间戳、日志级别和日志消息。

<div id="log-page" class="page">
  <div class="page-header">
    <h1 class="page-title">日志记录</h1>
    <div class="header-actions">
      <select id="log-level-filter" class="form-select" onchange="logModule.filterByLevel()">
        <option value="">所有级别</option>
        <option value="info">信息</option>
        <option value="warn">警告</option>
        <option value="error">错误</option>
      </select>
      <button class="btn btn-default" onclick="logModule.clearLogs()">清空日志</button>
    </div>
  </div>

  <div class="page-content">
    <div id="logs-list" class="logs-list"></div>
  </div>
</div>

JavaScript逻辑

日志记录模块的核心是LogModule类。在初始化时，模块会从本地存储加载所有已记录的日志。日志以数组形式存储，新的日志被添加到数组的开头，以便最新的日志显示在最前面。

class LogModule {
  constructor() {
    this.logs = [];
    this.init();
  }

  async init() {
    await this.loadLogs();
  }

  async loadLogs() {
    try {
      this.logs = JSON.parse(localStorage.getItem('logs') || '[]');
      this.renderLogs();
    } catch (error) {
      console.error('加载日志失败:', error);
    }
  }

  renderLogs() {
    const html = this.logs.map(log => `
      <div class="log-item log-${log.level}">
        <div class="log-time">${utils.formatDate(log.timestamp)}</div>
        <div class="log-level">${log.level.toUpperCase()}</div>
        <div class="log-message">${utils.escapeHtml(log.message)}</div>
      </div>
    `).join('');
    document.getElementById('logs-list').innerHTML = html || '<p>暂无日志</p>';
  }

  log(level, message) {
    const logEntry = {
      timestamp: new Date().toISOString(),
      level: level,
      message: message
    };
    
    this.logs.unshift(logEntry);
    
    if (this.logs.length > 1000) {
      this.logs = this.logs.slice(0, 1000);
    }
    
    localStorage.setItem('logs', JSON.stringify(this.logs));
    this.renderLogs();
  }

  info(message) {
    this.log('info', message);
  }

  warn(message) {
    this.log('warn', message);
  }

  error(message) {
    this.log('error', message);
  }

  filterByLevel() {
    const level = document.getElementById('log-level-filter').value;
    
    if (!level) {
      this.renderLogs();
      return;
    }
    
    const filtered = this.logs.filter(log => log.level === level);
    const html = filtered.map(log => `
      <div class="log-item log-${log.level}">
        <div class="log-time">${utils.formatDate(log.timestamp)}</div>
        <div class="log-level">${log.level.toUpperCase()}</div>
        <div class="log-message">${utils.escapeHtml(log.message)}</div>
      </div>
    `).join('');
    document.getElementById('logs-list').innerHTML = html || '<p>暂无日志</p>';
  }

  clearLogs() {
    if (confirm('确定要清空所有日志吗？')) {
      this.logs = [];
      localStorage.removeItem('logs');
      this.renderLogs();
      utils.showSuccess('日志已清空');
    }
  }
}

const logModule = new LogModule();

CSS样式

日志列表使用Flexbox布局，使日志项目能够垂直排列。每条日志项目使用Grid布局，将时间戳、日志级别和日志消息分别放在不同的列中。日志项目的左边框颜色根据日志级别而不同，蓝色表示信息，黄色表示警告，红色表示错误。

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-item {
  display: grid;
  grid-template-columns: 150px 80px 1fr;
  gap: 15px;
  padding: 10px;
  background: white;
  border-left: 4px solid #ddd;
  border-radius: 2px;
  font-size: 12px;
}

.log-item.log-info {
  border-left-color: #409EFF;
}

.log-item.log-warn {
  border-left-color: #E6A23C;
}

.log-item.log-error {
  border-left-color: #F56C6C;
}

.log-time {
  color: #999;
}

.log-level {
  font-weight: 500;
}

.log-message {
  color: #333;
}

OpenHarmony原生代码

OpenHarmony原生代码通过LogPlugin类实现日志写入的原生功能。writeLog方法接收日志消息，然后在原生层写入日志。通过hilog记录日志，开发者可以在系统日志中查看应用的日志信息。

import { hilog } from '@kit.PerformanceAnalysisKit';
import { fileIo } from '@kit.CoreFileKit';

const TAG: string = '[LogPlugin]';
const DOMAIN: number = 0xFF00;

export class LogPlugin {
  static async writeLog(success: Function, error: Function, args: any[]): Promise<void> {
    try {
      const message = args[0];
      hilog.info(DOMAIN, TAG, message);
      success('日志已写入');
    } catch (err) {
      hilog.error(DOMAIN, TAG, `写入日志失败: ${err}`);
      error('写入日志失败');
    }
  }
}

Web-Native通信

Web层通过LogBridge类与原生代码进行通信。writeLog方法使用Cordova的exec方法调用原生的LogPlugin，将日志消息传递给原生代码。原生代码写入日志后，将结果返回给Web层。这个通信过程是异步的，使用Promise来处理成功和失败的回调。

class LogBridge {
  static writeLog(message) {
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        cordova.exec(
          (result) => resolve(result),
          (error) => reject(error),
          'LogPlugin',
          'writeLog',
          [message]
        );
      } else {
        reject('Cordova未加载');
      }
    });
  }
}

📝 总结

日志记录系统是BugTracker Pro应用中用于调试和监控的重要功能。在Cordova与OpenHarmony混合开发框架下，它提供了完整的日志记录机制。通过详细的日志记录，开发者可以快速定位和解决问题，这大大提高了应用的可维护性。