uniapp添加操作日志的方法(uniapp、日志、文件、html5+)

 更新时间:2023年11月21日 08:48:10   作者:林夕小哥哥  
近期一直在写微信小程序,有一个问题一直没有解决,就是在测试环境中调试代码会打印很多日志,方便看到问题所在,这篇文章主要给大家介绍了关于uniapp添加操作日志(uniapp、日志、文件、html5+)的相关资料,需要的朋友可以参考下

前言

最近在做uniapp的项目,由于项目场景比较复杂,在处理售后问题的时候发现仅通过后端请求日志无法满足需求,于是便开始写一个前端保存操作日志的方法。

一、使用方法:

1、全局引入(main.js)

import {LogCat} from './utils/LogCat.js'
Vue.prototype.$LogCat = LogCat

2、初始化日志存储路径(App.vue)

 onLaunch: function() {
    this.$LogCat.init()
}

3、参数

 调用this.$LogCat.d(tag,msg)方法

参数说明数据类型默认值
tag日志标签,默认会在标签后面追加“:”string
msg日志内容string、object、array''

4、Vue文件中使用

methods:{
   
   handleClick() {
      let data = {
        name:'张三',
        age:18
      }
      this.$LogCat.d('点击了',data)  //2023-04-20 14:15:30 点击了:{name:'张三',age:18}
   }
}

二、JS代码如下:

export const LogCat = {
  main: plus.android.runtimeMainActivity(),
  Environment: plus.android.importClass('android.os.Environment'),
  BufferedWriter: plus.android.importClass('java.io.BufferedWriter'),
  File: plus.android.importClass('java.io.File'),
  FileOutputStream: plus.android.importClass('java.io.FileOutputStream'),
  OutputStreamWriter: plus.android.importClass('java.io.OutputStreamWriter'),
  LogPath: '',  //日志存储目录
  saveDays: 7,   //日志最大存储天数
  
  init: function() {
    if (this.Environment.MEDIA_MOUNTED || !this.Environment.isExternalStorageRemovable()) {
      this.LogPath = this.main.getExternalFilesDir(null).getPath();
    } else {
      this.LogPath = this.main.getFilesDir().getPath();
    }
    let fileManager = new this.File(this.LogPath);
    let files = fileManager.listFiles()
    let now = new Date();
    let maxSavedDay = utils.getFormatDate(now - this.saveDays * 24 * 60 * 60 * 1000)
    // 遍历目录下的日志文件,并删除日志最大存储天数前的日志
    for (var i in files) {
      let name = files[i].getName().split('.')[0],
        time = name.split('_')[1]
      if (time <= maxSavedDay && name.search('log_') == 0) {
        files[i].delete()
      }
    }
    console.log('LogPath->', this.LogPath);
  },
  d: function(tag, msg = '') {
    let now = new Date();
    let date = utils.getFormatDate(now);
    let datetime = utils.getFormatDateTime(now);

    msg = (typeof msg !== 'string' ? JSON.stringify(msg) : msg);

    //文件名
    let fileName = this.LogPath + "/log_" + date + ".txt"
    //写入的内容
    let content = `\n${datetime} ${tag}${msg ? ':'+msg : msg}\n`;

    let file = new this.File(this.LogPath);
    if (!file.exists()) {
      file.mkdirs(); //创建父路径
    }
    let fos = null;
    let bw = null;
    try {
      fos = new this.FileOutputStream(fileName, true);
      bw = new this.BufferedWriter(new this.OutputStreamWriter(fos));
      //bw.write(log);
      bw.append(content);
    } catch (e) {
      console.log('e->', e);
    } finally {
      try {
        if (bw != null) {
          bw.close(); //关闭缓冲流
          fos.close(); //关闭文件输出流
        }
      } catch (closeEx) {
        console.log('closeEx->', closeEx);
      }
    }
  }
}

export const utils = {
  getFormatDate: (dateString) => {
    const date = new Date(dateString);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    month = month > 9 ? month : '0' + month;;
    day = day > 9 ? day : '0' + day;
    return `${year}-${month}-${day}`;
  },
  getFormatDateTime: (dateString) => {
    const date = new Date(dateString);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = date.getHours();
    let min = date.getMinutes();
    let second = date.getSeconds();

    month = month > 9 ? month : '0' + month;;
    day = day > 9 ? day : '0' + day;
    hour = hour > 9 ? hour : '0' + hour;
    min = min > 9 ? min : '0' + min;
    second = second > 9 ? second : '0' + second;

    return `${year}-${month}-${day} ${hour}:${min}:${second}`;
  }
}

三、说明

默认配置了日志最大存储时间(saveDays)为7天,可自行修改

四、文章参考

https://ext.dcloud.net.cn/plugin?id=1816

总结

到此这篇关于uniapp添加操作日志(uniapp、日志、文件、html5+)的文章就介绍到这了,更多相关uniapp添加操作日志内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 『JavaScript』限制Input只能输入数字实现思路及代码

    『JavaScript』限制Input只能输入数字实现思路及代码

    一个文字方块必须限制只能输入数字(或是小数点)并且要支援 IE 和 Firefox,接下来为大家介绍下如何解决这个需求
    2013-04-04
  • Javascript中的作用域和上下文深入理解

    Javascript中的作用域和上下文深入理解

    这篇文章主要介绍了Javascript中的作用域和上下文深入理解,本文讲解了作用域 VS 上下文、变量作用域、“this”上下文、执行上下文(Execution Context)、作用域链等内容,需要的朋友可以参考下
    2015-07-07
  • JavaScript实现简单图片切换

    JavaScript实现简单图片切换

    这篇文章主要为大家详细介绍了JavaScript实现简单图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Google 二维条码 API 整理

    Google 二维条码 API 整理

    Google 二维条码 API 整理,需要的朋友可以参考下。
    2010-11-11
  • javascript动态创建链接的方法

    javascript动态创建链接的方法

    这篇文章主要介绍了javascript动态创建链接的方法,涉及javascript动态操作页面元素的技巧,需要的朋友可以参考下
    2015-05-05
  • layui+ssm实现数据表格双击编辑更新数据功能

    layui+ssm实现数据表格双击编辑更新数据功能

    在使用layui加载后端数据请求时,对数据选项框进行双击即可实现数据的输入编辑更改,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • 详解javascript立即执行函数表达式IIFE

    详解javascript立即执行函数表达式IIFE

    本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 将函数的实际参数转换成数组的方法

    将函数的实际参数转换成数组的方法

    实际参数在函数中我们可以使用 arguments 对象获得 (注:形参可通过 arguments.callee 获得),虽然 arguments 对象与数组形似,但仍不是真正意义上的数组。
    2010-01-01
  • 微信小程序wxss如何引用外部CSS文件以及iconfont

    微信小程序wxss如何引用外部CSS文件以及iconfont

    这篇文章主要给大家介绍了关于微信小程序wxss如何引用外部CSS文件以及iconfont的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 在webview中如何跳回小程序步骤详解

    在webview中如何跳回小程序步骤详解

    这篇文章主要介绍了在微信小程序中使用web-view组件嵌入网页并实现从网页跳回到小程序的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01

最新评论