更新记录

1.0.2（2025-08-14） 下载此版本

log日志全局监听

1.0.1（2025-05-26） 下载此版本

添加展开收起

1.0.0（2025-05-26） 下载此版本

1.0版本，在app移动端显示自定义 log，以及 api 请求信息，缓存信息，并能复制导出信息。

平台兼容性

uni-app(4.45)

其他

这是一个自定义的日志控制台，用于在Uniapp中显示日志信息，使用本插件需要uniapp项目是vite构建的，并且需要安装vitetemplateinject插件。

新特性（v1.1.0）

• 全局日志队列：解决组件未初始化时无法调用log方法的问题
• 自动存储日志：自动记录uni.setStorage和uni.setStorageSync操作
• 事件驱动：使用uni.$emit事件系统，实时同步日志
• 生命周期支持：支持在页面所有生命周期中使用日志方法
• 全局挂载：无需在每个页面导入，直接使用this.$log等方法

使用方法：

1. 在项目中导入LogConsole组件

2. 在main.js中全局注册LogConsole组件和配置日志方法

import { createApp } from 'vue'
import App from './App.vue'
import LogConsole from '@/components/ylh-appConsole/LogConsole.vue'
import { setupGlobalLogComplete } from '@/components/ylh-appConsole/global-config.js'

const app = createApp(App)

// 注册LogConsole组件
app.component('LogConsole', LogConsole)

// 配置全局日志方法 (推荐)
setupGlobalLogComplete(app)

app.mount('#app')

3. 安装vitetemplateinject插件

npm install vitetemplateinject --save-dev

4. 在vite.config.js中配置插件

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import vitePluginTemplateInject from 'vitetemplateinject'

// 判断是否是 App 平台 且 非生产环境
const isAppDev = process.env.UNI_PLATFORM?.startsWith('app') && process.env.NODE_ENV !== 'production'

export default defineConfig({
  plugins: [
    // 仅在 App 开发环境使用插件
    ...(isAppDev ? [vitePluginTemplateInject(["<LogConsole ref='loggerConsole'></LogConsole>"])] : []),
    uni(),
  ],
})

5. 在App.vue中配置拦截器

import { onLaunch } from '@dcloudio/uni-app'
import { hijackRequest, hijackConsole, hijackStorage } from "@/components/ylh-appConsole/requestInterceptor.js";

onLaunch(() => {
  // 劫持请求日志
  hijackRequest();

  // 劫持console日志
  hijackConsole();

  // 劫持存储操作日志
  hijackStorage();

  // 在App启动时就可以使用日志方法
  this.$log('App启动成功');
  this.$info('App版本:', '1.0.0');
})

6. 在页面中直接使用日志方法（无需导入）

export default {
  onLoad(options) {
    // 使用Vue全局属性方式 (推荐)
    this.$log('页面加载', options);
    this.$info('页面参数:', options);
    this.$warn('页面已加载');

    // 使用uni对象方式
    uni.log('页面加载 - uni方式');
    uni.info('页面参数 - uni方式:', options);

    // 记录存储操作
    this.$logStorage('pageLoadTime', Date.now());
  },

  onShow() {
    // 页面显示时的日志
    this.$log('页面显示');
    this.$warn('页面已显示');
  },

  methods: {
    handleClick() {
      this.$log('按钮点击事件');
      this.$error('模拟错误信息');
    },

    saveData() {
      // 存储数据时会自动记录到日志
      uni.setStorageSync('userData', { name: 'test', time: Date.now() });
      this.$log('数据已保存');
    }
  }
};

核心改进

全局日志队列

• 组件初始化前，所有日志都会存储在全局队列中
• 组件初始化后，自动加载全局队列中的日志
• 支持在页面所有生命周期中使用日志方法

全局挂载系统

• Vue全局属性：this.$log, this.$warn, this.$error, this.$info
• uni对象挂载：uni.log, uni.warn, uni.error, uni.info
• 全局混入：所有组件自动获得日志方法
• 无需导入：配置一次，全局使用

自动存储日志

• 自动劫持uni.setStorage和uni.setStorageSync方法
• 无需手动调用，自动记录所有存储操作
• 支持查看存储的键值对和时间戳

事件驱动系统

• 使用uni.$emit和uni.$on实现实时日志同步
• 组件销毁时自动清理事件监听器
• 支持多组件实例共享日志

📱 可用的日志方法

配置完成后，你可以在任何页面中直接使用：

Vue全局属性方式 (推荐)

this.$log('普通日志');
this.$warn('警告信息');
this.$error('错误信息');
this.$info('提示信息');
this.$logStorage('key', 'value'); // 记录存储操作

uni对象方式

uni.log('普通日志');
uni.warn('警告信息');
uni.error('错误信息');
uni.info('提示信息');
uni.logStorage('key', 'value'); // 记录存储操作

功能特性：

1. 浮窗按钮：可以拖动到任意位置，点击显示日志信息
2. 多类型日志：支持log、warn、error、info、storage、api、system等
3. 实时同步：全局日志队列，支持组件初始化前使用
4. 全局挂载：无需导入，直接使用this.$log等方法
5. 自动记录：自动记录请求、存储、console等操作
6. 复制功能：可以复制每一个信息
7. 清空功能：可以清除指定类型的日志信息
8. 导出功能：可以把信息导出为文件到手机
9. 展开收起：信息过长有展开收起功能

注意事项：

• 全局日志队列有容量限制（日志100条，存储50条）
• 组件销毁时会自动清理事件监听器
• 建议在开发环境使用，生产环境可以关闭
• 支持所有uniapp平台，特别针对App端优化
• 全局挂载后，所有页面都可以直接使用日志方法