下面我们就来说说小程序日志系统，看看如何搭建和使用。

本文介绍了小程序日志系统，向您展示了如何在小程序中使用它，以及如何在小程序中构建日志系统。 我希望这会有所帮助！

日志系统通常是开发的重要组成部分。

但是，由于种种原因，在前端开发中使用日志打印或者报表系统并不常见。 但日志系统在某些情况下通常会产生奇迹。

例如，我们的聊天系统遇到了以下问题：

在语音通话期间，用户听不到任何声音。 用户反映即时通讯在某些情况下无法发送消息。 在即时通讯中，A回复B。 发送消息时可能不会出现对话框。 在即时通讯中，A连续向B发送两条消息后，B无法收到第二条消息。 对于即时消息，当您发送语音消息时，用户认为正在发送语音，但实际上，录音仍在继续。 这时，用户以为网络堵塞了，最终意识到自己和其他人的谈话音频被录音了。

但上述错误并没有反映到后台界面。 由于部分用户的手机型号存在问题，因此很难确定该问题。 通过此处的日志，您可以快速找到有问题的代码。 如果不是代码问题，你就可以自信地回答用户这不是系统问题。

如何使用小程序日志系统

小程序端提供了两个小程序日志接口：

LogManager（常规日志）RealtimeLogManager（实时日志）

官方没有介绍这两者的具体区别只是强调了Realtime的实时性。

在我看来，两者最大的区别是：

由于LogManager是用户手动反馈的事情，所以LogManager可以让用户安心。 RealtimeLogManager更方便开发者使用，在您不知情的情况下收集问题信息，让您在您不知情的情况下修复问题。

LogManager

小程序提供的日志记录接口是通过wx.getLogManager()获取的。让我们举个例子。 注意：

您最多可以保存5M日志内容。 一旦超过 5M，旧的日志内容将被删除。 对于小程序，用户可以使用按钮组件 open-type="feedback" 上传打印日志。 对于小游戏，用户可以使用wx.createFeedbackButton创建一个上传打印日志的按钮。 开发者可以在小程序管理后台左侧菜单的反馈管理页面查看关联的打印日志。

创建LogManager实例

您可以通过wx.getLogManager()检索日志实例。 您可以通过括号中的参数 {level: 0 | 1 } 来确定页面的生命周期函数和函数日志是否应该写入 wx 命名空间。

0：写 1：不写 https://github.com/Kijale-Mobile/Painter

LogManager 使用示例

const logger = wx.getLogManager({ level: 0 }) logger.log({str: 'hello world'}, '基本日志', 100, [1, 2, 3])logger.info( {str: 'hello world'}, '信息日志', 100, [1, 2, 3])logger.debug({str: 'hello world'}, '调试日志', 100, [1, 2, 3])logger. warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])

用户反馈上传 LogManager 记录的日志

记录的日志之后，用户可以上传日志：点击小程序资料页的“反馈与投诉”，然后点击“故障”。

开发人员处理用户反馈并用户沟通

开发者可以在小程序后台“管理->用户反馈->故障”下查看用户反馈信息。 开发者可以在功能【k3】>客服下绑定客服微信。 绑定后48小时内即可通过微信与反馈用户进行沟通。

注意：如果您的沟通需要用户反馈，请勾选允许开发者在48小时内通过客服消息与我联系。

RealtimeLogManager

小程序提供的实时日志接口。 通过wx.getRealtimeLogManager()获取实例。 注意：

wx.getRealtimeLogManager()基础库2.7.1现在支持官方将每个实时日志的大小限制为5kb。 每个日志的正式定义：单个日志聚合并报告页面的onShow - > onHide。 开发者可以通过小程序管理后台：开发- > 运维中心- > 实时日志 进入小程序的日志查询页面

，创建RealtimeLogManager实例。

通过wx.getRealtimeLogManager()获取实时日志实例。

const logger = wx.getRealtimeLogManager()

RealtimeLogManager 使用示例

const logger = wx.getRealtimeLogManager()logger.debug({str: 'hello world'}, '调试日志', 100 , [1, 2, 3])logger.info({str : 'hello world'}, '信息日志', 100, [1, 2, 3]) logger.error({str: 'hello world'}, '错误日志', 100, [1, 2, 3]) logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])

查看实时日志

与常规日志不同，实时日志不再需要用户反馈检查；下面的例子。

登录小程序后台。

开发->开发管理->运维中心->通过真实路径查看实时日志。 -time Log

如何搭建小程序日志系统

上面你已经了解了小程序日志的使用方法。 当然，你也可以不封装直接使用。 但直接使用感觉很别扭，不符合程序员的单点调用习惯。

现在让我们对这个日志系统进行初步的封装，并进行全局的日志注入方法。

封装Applet的Log方法

在封装Log方法之前，我们需要先梳理一下该方法需要考虑的事情。

打印格式：统一打印格式 识别问题版本号：可以清楚地看到您的用户当前使用的是哪个版本的小程序，并且可以识别旧版本的问题或新代码中未发现的问题，有助于避免。 。 兼容性：需要考虑您的小程序版本不足以支持getLogManager和getRealtimeLogManager的情况。 类型：调试、日志、错误类型日志必须与日志兼容。

版本问题

我们需要一个定义版本号的常量，以便我们可以识别有问题的代码版本。 当出现版本问题时，我们将能够更好地指导我们的用户。

const VERSION = "1.0.0"const logger = wx.getLogManager({ level: 0})logger.log(VERSION, info)

打印格式

[版本]文件 统一格式可帮助您更快地查找内容 | 内容。 常量版本="1.0.0"const logger = wx.getLogManager({ level: 0 })logger.log(`[${VERSION}] ${file} | `, ...args)

兼容性

您必须考虑到用户小程序版本不足以支持 getLogManager 和 getRealtimeLogManager。

const VERSION = "0.0.18"; const canIUseLogManager = wx.canIUse("getLogManager"); const logger = canIUseLogManager({ level: 0 }) : null;const realtimeLogger = wx.getRealtimeLogManager ?wx.getRealtimeLogManager() : null;导出函数 RUN(file, ...args) { console.log(`[${VERSION}]`, file, " | ", ...args); if (canIUseLogManage) { logger.log(` [${VERSION }]`, 文件, " | ", ...args); } realtimeLogger && realtimeLogger.info(`[${VERSION}]`, 文件, " | ", ...args);}

类型

必须兼容debug、log、error类型日志

导出函数RUN(file, ...args) { ...}导出函数 DEBUG(file, ...args) { ...}导出函数 ERROR(file, ...args) { ...}导出函数 getLogger(fileName) { return { DEBUG: function (...args) { DEBUG(fileName, ...args) }, RUN: function (...args) { RUN(fileName, ...args) }, ERROR: function (. ..args) { ERROR(fileName, ...args) } }}

完整代码

完成上述所有任务后，您将拥有一组用于日志记录系统的基本包。

const VERSION = "0.0.18";const canIUseLogManager = wx.canIUse("getLogManager");const logger = canIUseLogManager ? wx.getLogManager({ level: 0 }) : null;const realtimeLogger = wx.getRealtime eLogManager ?wx.getRealtimeLogManager() : null;导出函数 DEBUG(file, ...args) { console.debug(`[${VERSION}] ${file} | `, ...args); if (canIUseLogManage) { logger.debug(`[ ${VERSION}]`, 文件, " | ", ...args);} realtimeLogger && realtimeLogger.info(`[${VERSION}]`, 文件, " | ", ...args);} 导出函数 RUN(文件，...args) { console.log(`[${VERSION}] }] `, file, " | ", ...args); if (canIUseLogManage) { logger.log(`[${VERSION}]`, 文件, " | ", ...args); } realtimeLogger && realtimeLogger.info (`[${VERSION}]`, 文件, " | ", ... args);}导出函数 ERROR(file, ...args) { console.error(`[${VERSION}] }]`, file, " | ", ...args); (canIUseLogManage) { logger .error(`[${VERSION}]`, file, " | ", ...args); } realtimeLogger && realtimeLogger.error(`[${VERSION}]`, file, " | " , ...args);} 导出函数 getLogger(fileName) { return { DEBUG: function (.. .args) {调试(文件名, ...args) }, 运行: 函数 (...args) { 运行(文件名, ...args) }, 错误: 函数 (...args) { 错误(文件名, ...args) ) }}

全局注入日志

本章的名称让您了解全局注入。 全局注入是指日志创建后自动注入，无需手动调用方法。 您只需要考虑更详细地打印日志。

为什么要做全局注入？

我们实现了全局日志封装，但是往往有些新同学尤其是前端同学没有良好的日志习惯（我也没有）。 因此，您应该进行全局注入，以便更容易编写代码，并避免手动记录日志导致的遗漏问题。

如何执行全局注入

Applet 提供的行为参数允许多个页面具有相同的数据字段和方法。

您可以封装常见的行为并将其引入到需要日志记录的页面中。

从“./log-test”导入*作为日志；导出默认行为({ DefinitionFilter(defFields) { console.log(defFields); Object.keys(d efFields.methods || {})。 forEach(方法名称 => { constriginMethod = defFields.methods[方法名称]; defFields.methods[方法名称] =function (ev, ...args) { if (ev && ev.target && ev.currentTarget && ev.currentTarget.dataset) { Log.RUN(defFields.data.PAGE_NAME, `${methodName} 调用, 事件数据集 = ` , ev.currentTarget.dataset, "params = ", ...args); } else { Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, params = `, e v, ...args); } } OriginMethod.call(this, ev, ...args) } }) }})

总结

我们有各种各样与开发和组织相关的东西，超过2000字。 虽然花了3天时间，但总的来说还是值得的。 我希望我能提供一些帮助。

我觉得大家应该多关注一下前端日志。 这是基于我自己的感受，尤其是作为一名移动用户。 问题往往是由手机型号或网络环境较弱引起的。 没有日志，你将无法定位问题的焦点，也无法及时解决。

【相关学习推荐：小程序开发教程】

PHP快速学习视频免费教程（从入门到精通）

如何学习 PHP？如何开始学习 PHP？如何快速学习 PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 谈谈小程序中的日志系统，看看如何构建和使用它。
• 谈谈小程序中的Log log系统，看看如何构建和使用。

本文由主机参考刊发，转载请注明：下面我们就来说说小程序日志系统，看看如何搭建和使用。 https://zhujicankao.com/141992.html