uniapp添加操作日志（uniapp、日志、文件、html5+）

一、背景与问题

在跨平台应用开发中，操作日志的记录是保障系统安全、审计用户行为的重要手段。特别是在企业级应用中，需要记录用户对关键功能的操作轨迹，如数据修改、权限变更等。然而，在uniapp开发中，由于平台差异性，日志记录面临以下挑战：

1. 多端适配问题：微信小程序、H5、App等平台的API差异巨大
2. 数据持久化存储：需要兼容iOS/Android的文件系统，同时支持H5的localStorage
3. 性能与安全：日志记录不应影响应用性能，且需防止敏感信息泄露
4. 跨域兼容性：在H5+环境中需要处理跨域存储问题

传统方案可能采用uni.setStorageSync保存日志，但这种方式在复杂场景下存在日志丢失、存储上限等问题。本文将深入探讨基于HTML5+文件系统的日志记录方案，并提供完整的实现方案。

二、基本原理

在uniapp中实现操作日志记录，需要结合以下技术要素：

1. 平台差异化处理：区分微信小程序、H5、App等平台的API调用
2. 文件存储机制：利用HTML5+的plus.file系统进行持久化存储
3. 日志结构设计：设计包含时间戳、操作类型、用户信息等字段的JSON结构
4. 异步处理：避免阻塞主线程，采用异步写入机制
5. 安全防护：对敏感信息进行加密处理，防止日志文件被直接读取

核心流程如下：

用户操作 → 捕获事件 → 构建日志对象 → 保存到内存缓冲区 → 定期持久化写入文件

三、环境准备

确保开发环境满足以下条件：

1. 开发工具：HBuilderX（最新版）
2. 运行环境：支持HTML5+的平台（如App、H5）
3. 依赖包：无需额外安装，直接使用uniapp内置API
4. 配置文件：在manifest.json中启用HTML5+功能（需确认平台支持）

四、核心实现

1. 基础日志记录器

// utils/logger.js
export default class LogRecorder {
  constructor() {
    this.logs = [];
    this.bufferSize = 100; // 缓冲区大小
    this.filePath = '__logs__/operation.log';
    this.init();
  }

  init() {
    this.platform = uni.getSystemInfoSync().platform;
    if (this.platform === 'h5') {
      this.storage = uni.getStorageSync('logBuffer') || [];
    }
  }

  log(action, detail) {
    const timestamp = new Date().toISOString();
    const logEntry = {
      timestamp,
      action,
      detail,
      userId: uni.getStorageSync('userId') || 'anonymous'
    };
    
    this.logs.push(logEntry);
    
    // 检查缓冲区大小
    if (this.logs.length >= this.bufferSize) {
      this.flush();
    }
  }

  flush() {
    if (this.platform === 'h5') {
      uni.setStorageSync('logBuffer', this.logs);
    } else {
      this.saveToFile(this.logs);
    }
    this.logs = [];
  }

  saveToFile(logs) {
    const fs = plus.io.FileSystem;
    const path = this.filePath;
    
    // 创建文件目录
    const dirPath = path.replace(/\/[^/]+$/, '');
    fs.exists(dirPath, (exists) => {
      if (!exists) {
        fs.createDirectory(dirPath, (dir) => {
          this.writeToFile(logs);
        });
      } else {
        this.writeToFile(logs);
      }
    });
  }

  writeToFile(logs) {
    const fs = plus.io.FileSystem;
    const file = fs.open(this.filePath, 'w');
    
    // 加密处理
    const encrypted = this.encrypt(JSON.stringify(logs));
    
    fs.write(file, encrypted, (written) => {
      fs.close(file, (e) => {
        if (e) console.error('文件写入失败:', e);
      });
    });
  }

  encrypt(data) {
    // 简单的AES加密示例（需引入加密库）
    return CryptoJS.AES.encrypt(data, 'secret-key-123').toString();
  }
}

关键代码解释：

• log()方法负责捕获用户操作并构建日志对象
• flush()方法处理日志缓冲区的持久化
• saveToFile()实现文件系统的写入操作
• encrypt()方法对日志数据进行加密处理

2. 平台适配处理

// pages/index/index.vue
export default {
  onReady() {
    const logger = new LogRecorder();
    
    // 模拟用户操作
    logger.log('click', { buttonId: 'btn1', action: 'submit' });
    
    // 模拟定时保存
    setTimeout(() => {
      logger.flush();
    }, 3000);
  }
}

不同平台的处理差异：

• 微信小程序：使用uni.setStorageSync保存到本地存储
• H5+：通过plus.file系统进行文件存储
• App：支持更完整的文件系统API

3. 日志读取与分析

// utils/logReader.js
export default class LogReader {
  constructor() {
    this.filePath = '__logs__/operation.log';
  }

  async readLogs() {
    if (uni.getSystemInfoSync().platform === 'h5') {
      return uni.getStorageSync('logBuffer') || [];
    }
    
    const fs = plus.io.FileSystem;
    const file = await fs.open(this.filePath, 'r');
    const content = await fs.read(file);
    return JSON.parse(this.decrypt(content));
  }

  decrypt(data) {
    return CryptoJS.AES.decrypt(data, 'secret-key-123').toString(CryptoJS.enc.Utf8);
  }
}

五、完整案例：用户操作审计系统

1. 项目结构

project-root/
├── pages/
│   └── audit/
│       ├── index.vue
│       └── log-list.vue
├── utils/
│   ├── logger.js
│   └── log-reader.js
├── App.vue
└── main.js

2. 操作日志记录流程

// pages/audit/index.vue
export default {
  onReady() {
    const logger = new LogRecorder();
    
    // 模拟用户操作
    logger.log('data-modify', {
      tableName: 'users',
      action: 'update',
      fields: { status: 'active' }
    });
    
    // 模拟定时保存
    setTimeout(() => {
      logger.flush();
    }, 5000);
  }
}

3. 日志展示页面

<!-- pages/audit/log-list.vue -->
<template>
  <view class="log-list">
    <scroll-view :scroll-y="true">
      <block v-for="(log, index) in logs" :key="index">
        <view class="log-item">
          <text>{{ log.timestamp }} - {{ log.action }}</text>
          <text>{{ JSON.stringify(log.detail) }}</text>
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<script>
import LogReader from '@/utils/log-reader.js';

export default {
  data() {
    return {
      logs: []
    };
  },
  mounted() {
    this.loadLogs();
  },
  methods: {
    async loadLogs() {
      const reader = new LogReader();
      this.logs = await reader.readLogs();
    }
  }
}
</script>

六、源码解析

1. 文件系统操作细节

// 文件写入处理
fs.write(file, encrypted, (written) => {
  fs.close(file, (e) => {
    if (e) console.error('文件写入失败:', e);
  });
});

• fs.write()异步写入文件
• fs.close()关闭文件流
• 异常处理确保文件操作的可靠性

2. 日志缓冲机制

this.logs.push(logEntry);
if (this.logs.length >= this.bufferSize) {
  this.flush();
}

• 缓冲区大小控制内存占用
• 定期持久化避免内存泄漏
• 可根据业务需求调整缓冲区大小

七、进阶使用

1. 增加日志分类

log(type, action, detail) {
  const logEntry = {
    timestamp: new Date().toISOString(),
    type, // 'operation', 'error', 'system'
    action,
    detail,
    userId: uni.getStorageSync('userId') || 'anonymous'
  };
  
  this.logs.push(logEntry);
  this.flush();
}

2. 添加日志筛选功能

filterLogs(type) {
  return this.logs.filter(log => log.type === type);
}

3. 支持日志压缩

compressLogs(logs) {
  return btoa(JSON.stringify(logs)); // 简单压缩
}

八、性能与工程实践

1. 性能优化策略

1. 缓冲机制：避免频繁写入文件
2. 压缩存储：减少文件体积
3. 异步处理：防止阻塞主线程
4. 定期清理：设置日志文件保留策略

2. 异常处理方案

try {
  fs.write(file, encrypted, (written) => {
    fs.close(file, (e) => {
      if (e) console.error('文件写入失败:', e);
    });
  });
} catch (e) {
  console.error('文件操作异常:', e);
}

3. 安全防护措施

1. 加密存储：使用AES加密敏感信息
2. 访问控制：限制日志文件读取权限
3. 敏感信息过滤：避免存储密码等敏感字段
4. 文件权限设置：在App端设置文件访问权限

九、常见问题与踩坑

1. 平台兼容性问题

问题：在微信小程序中无法使用plus.fileAPI
解决：使用uni.setStorageSync替代，并在H5+中使用文件系统API

2. 日志文件过大

问题：文件体积过大导致性能问题
解决：设置日志保留策略，定期清理旧日志

3. 加密库未引入

错误示例：

encrypt(data) {
  return data; // 未加密
}

改进：引入加密库如crypto-js进行加密处理

4. 文件路径错误

错误示例：

const filePath = '/logs/operation.log'; // 错误路径

解决：使用相对路径，确保路径存在

十、最佳实践

1. 平台差异化处理：区分不同平台的API调用
2. 日志结构标准化：统一日志格式，便于后续分析
3. 缓冲机制：避免频繁写入影响性能
4. 加密存储：保护敏感信息
5. 定期清理：设置日志保留策略
6. 异常处理：完善错误处理机制
7. 日志分类：按类型区分日志内容

十一、总结

在uniapp中实现操作日志记录，需要结合平台特性、文件系统API和加密技术，设计合理的日志存储方案。通过缓冲机制、异步处理和加密存储，可以有效保障日志记录的可靠性、安全性和性能。在实际开发中，应根据具体业务需求选择合适的日志记录方案，合理权衡存储成本与数据安全，避免在关键业务场景中使用不稳定的日志记录方式。

本文提供的方案适用于需要跨平台日志记录的企业级应用，但需注意在以下场景避免使用：

• 对实时性要求极高的场景
• 需要立即同步到服务器的场景
• 涉及大量敏感数据的场景

在开发过程中，应持续监控日志文件大小、写入频率和异常情况，确保日志记录系统的稳定运行。