当前位置：首页 > uni-app

uniapp 日志组件

2026-02-05 23:00:06uni-app

uniapp 日志组件实现方案

在 uniapp 中可以通过自定义组件或第三方插件实现日志功能，以下是几种常见方案：

自定义日志组件 创建一个可复用的日志显示组件，包含以下功能：

日志信息展示区域
日志级别过滤（debug、info、warn、error）
自动滚动到底部
清空日志功能

示例代码：

uniapp 日志组件

// components/logger/logger.vue
<template>
  <view class="logger-container">
    <view class="log-level-filter">
      <button @click="setLevel('all')">All</button>
      <button @click="setLevel('debug')">Debug</button>
      <button @click="setLevel('info')">Info</button>
      <button @click="setLevel('warn')">Warn</button>
      <button @click="setLevel('error')">Error</button>
    </view>
    <scroll-view class="log-content" scroll-y>
      <view v-for="(log, index) in filteredLogs" :key="index" :class="['log-item', log.level]">
        {{ log.time }} [{{ log.level }}] {{ log.message }}
      </view>
    </scroll-view>
    <button @click="clearLogs">Clear</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      logs: [],
      currentLevel: 'all'
    }
  },
  computed: {
    filteredLogs() {
      if(this.currentLevel === 'all') return this.logs
      return this.logs.filter(log => log.level === this.currentLevel)
    }
  },
  methods: {
    addLog(level, message) {
      this.logs.push({
        time: new Date().toLocaleTimeString(),
        level,
        message
      })
    },
    setLevel(level) {
      this.currentLevel = level
    },
    clearLogs() {
      this.logs = []
    }
  }
}
</script>

使用 console 增强 通过重写 console 方法实现日志记录和上报：

// main.js
const originalConsole = {...console}

function enhanceConsole() {
  const levels = ['debug', 'log', 'info', 'warn', 'error']

  levels.forEach(level => {
    console[level] = function(...args) {
      originalConsole[level].apply(console, args)

      // 记录日志到存储
      const logEntry = {
        level,
        time: new Date().toISOString(),
        message: args.join(' ')
      }

      // 存储日志，可考虑使用 uni.setStorageSync
      const logs = uni.getStorageSync('appLogs') || []
      logs.push(logEntry)
      uni.setStorageSync('appLogs', logs.slice(-1000)) // 限制最大存储量

      // 可添加日志上报逻辑
      if(level === 'error') {
        uni.request({
          url: 'https://your-log-server/api/log',
          method: 'POST',
          data: logEntry
        })
      }
    }
  })
}

enhanceConsole()

第三方日志库集成 可考虑集成以下第三方日志库：

uniapp 日志组件

log4js：功能强大的日志库，支持多级别日志和多种输出方式
winston：灵活的日志库，支持多种传输方式
consola：优雅的 console 日志工具

示例集成 log4js：

import log4js from 'log4js'

log4js.configure({
  appenders: {
    console: { type: 'console' },
    file: { type: 'file', filename: 'logs/app.log' }
  },
  categories: {
    default: { appenders: ['console', 'file'], level: 'debug' }
  }
})

const logger = log4js.getLogger()
logger.debug('Debug message')
logger.info('Info message')

日志上报方案 实现日志上报到服务器功能：

function reportLogs() {
  const logs = uni.getStorageSync('appLogs') || []
  if(logs.length === 0) return

  uni.request({
    url: 'https://your-log-server/api/logs/batch',
    method: 'POST',
    data: { logs },
    success: () => {
      uni.removeStorageSync('appLogs')
    },
    fail: (err) => {
      console.error('Log report failed:', err)
    }
  })
}

// 定时上报或特定时机触发
setInterval(reportLogs, 60 * 1000) // 每分钟上报一次

性能优化建议