本篇文章带大家聊聊小程序中的 log 日志系统，介绍一下如何使用小程序 log 日志系统，以及如何搭建小程序 log 日志系统，希望对大家有所帮助！
通常情况下，日志系统是开发中重要的一环。
但出于种种原小白轻松搭建系统点我wcqh.cn因，在前端开发中做日志打印和上报系统却不常见。
但有些特定情况下，日志系统往往有奇效。比如一个聊天系统中遇到了以下问题：
语音通话中，用户听不到声音 即时通讯中，部分场景用户反馈，消息发送小白轻松搭建系统点我wcqh.cn不出去 即时通讯中， A 回复 B 消息时，偶尔对话框不显示 即时通讯中， A 给 B 连续发送两条消息后， B 接收不到第二条的提示 即时通讯中，发送小白轻松搭建系统点我wcqh.cn语音消息发送时，用户以为语音已经发送，但实际上录音还在继续。这时用户以为是网络卡了，最后发现自己和其他人说话的声音被录制进去但是以上几种错误，在后台接口中并没有体现。再加上部分用户手机型号的问题，导致小白轻松搭建系统点我wcqh.cn问题很难被定位。
如果我们这里有 log ，我们就能很快定位到出问题的代码。
如果不是代码问题，也更有底气回复用户不是我们系统的问题。如何使用小程序 Log 日志系统
小程序侧提供了两种小程序 Log 日志小白轻松搭建系统点我wcqh.cn接口：
LogManager ( 普通日志 ) RealtimeLogManager ( 实时日志 )官方并没有介绍两者的具体区别，只是强调了 Realtime 的实时性质。
在我看来他们的最大区小白轻松搭建系统点我wcqh.cn别就是：
LogManager 可以让用户有种心安的感觉，因为 LogManager 是用户手动反馈的问题。 RealtimeLogManager 则对开发者更友好，可以在用户不知情的情小白轻松搭建系统点我wcqh.cn况下收集到问题信息，并在用户无感的情况下对问题进行修复。LogManager
小程序提供的 Log 日志接口，通过 wx.getLogManager() 获取实例。
注意：最多保存5M的日志内容，超过5M小白轻松搭建系统点我wcqh.cn后，旧的日志内容会被删除。 对于小程序 ，用户可以通过使用 button 组件的 open-type=”feedback” 来上传打印的日志。 对于 小游戏，用户可以通过使小白轻松搭建系统点我wcqh.cn用 wx.createFeedbackButton 来创建上传打印的日志的按钮。 开发者可以通过小程序管理后台左侧菜单反馈管理 页面查看相关打印日志。创建 LogManager 实例
你可小白轻松搭建系统点我wcqh.cn以通过 wx.getLogManager() 获取日志实例。
括号中可以传参 { level: 0 | 1 } 来决定是否写入 Page 的生命周期函数， wx 命名空间下的函数日志。0： 写入 小白轻松搭建系统点我wcqh.cn 1： 不写入1
https://github.com/Kujiale-Mobile/Painter
使用 LogManager 实例
1
2
3
4
5
const logger = wx.get小白轻松搭建系统点我wcqh.cnLogManager({ level: 0 })
logger.log({str: 'hello world'}, 'basic log', 100, [1, 2, 3]小白轻松搭建系统点我wcqh.cn)
logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3])
logger.debug({str: 小白轻松搭建系统点我wcqh.cn9;hello world'}, 'debug log', 100, [1, 2, 3])
logger.warn({str: 'hello world'}, &小白轻松搭建系统点我wcqh.cn#39;warn log', 100, [1, 2, 3])
用户反馈上传 LogManager 记录的日志
当日志记录后， 用户可以在小程序的 profile 页面，单击 反馈与投诉，在小白轻松搭建系统点我wcqh.cn点击功能异常 进行日志上传。
开发者处理用户反馈及和用户沟通
开发者可以在小程序后台 管理 -> 用户反馈 -> 功能异常
查看用户反馈的信息。
开发者可以在 功能 -> 客服 下绑定客服微信，绑定后可以在 48小时内通过微信和反小白轻松搭建系统点我wcqh.cn馈用户沟通。注：沟通需要用户反馈时勾选：允许开发者在 48 小时内通过客服消息联系我。RealtimeLogManager
小程序提供的 实时Log 日志接口，通过 wx.getRealtimeLogM小白轻松搭建系统点我wcqh.cnanager() 获取实例。
注意：wx.getRealtimeLogManager() 基础库 2.7.1开始支持官方给出实时日志每条的容量上限是 5kb官方对每条日志的定义：在一个页面 onShow 小白轻松搭建系统点我wcqh.cn-> onHide 之间，会聚合成一条日志上报开发者可从小程序管理后台：开发 -> 运维中心 -> 实时日志 进入小程序端日志查询页面为了定位问题方便，日志是按页面划分的，某一个页面，在onShow到onHid小白轻松搭建系统点我wcqh.cne（切换到其它页面、右上角圆点退到后台）之间打的日志，会聚合成一条日志上报，并且在小程序管理后台上可以根据页面路径搜索出该条日志
创建 RealtimeLogManager 实例
你可以通过 wx.get小白轻松搭建系统点我wcqh.cnRealtimeLogManager() 获取实时日志实例。
1
const logger = wx.getRealtimeLogManager()
使用 RealtimeLogManager 实小白轻松搭建系统点我wcqh.cn例
1
2
3
4
5
const logger = wx.getRealtimeLogManager()
logger.debug({str: 'hello world'}, 'debug小白轻松搭建系统点我wcqh.cn log', 100, [1, 2, 3])
logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 小白轻松搭建系统点我wcqh.cn3])
logger.error({str: 'hello world'}, 'error log', 100, [1, 2, 3])
logger.warn({str: 小白轻松搭建系统点我wcqh.cn'hello world'}, 'warn log', 100, [1, 2, 3])
查看实时日志
与普通日志不同的是，实时日志不再需要用户反馈，可以直接通过以小白轻松搭建系统点我wcqh.cn下方式查看实例。
登录小程序后台
通过路径 开发 -> 开发管理 -> 运维中心 -> 实时日志 查看实时日志
如何搭建小程序 Log 日志系统
上面我们知道了小程序的 Log 日志怎么使用，我们当然可以不进行封装直接使用。小白轻松搭建系统点我wcqh.cn
但是我们直接使用起来会感觉到十分的别扭，因为这不符合我们程序员单点调用的习惯。那么接下来让我们对这套 Log 系统进行初步的封装以及全局的方法的日志注入。
后续我会在 github 开放源码，并打包至 小白轻松搭建系统点我wcqh.cnnpm ，需要的开发者可自行 install 调用。
封装小程序 Log 方法
封装 Log 方法前，我们需要整理该方法需要考虑什么内容：
打印格式：统一打印格式有助于我们更快的定位问题版本号：方便我们清晰小白轻松搭建系统点我wcqh.cn的知道当前用户使用的小程序版本，避免出现旧版本问题在新代码中找不到问题兼容性：我们需要考虑用户小程序版本不足以支持 getLogManager 、 getRealtimeLogManager 的情况类小白轻松搭建系统点我wcqh.cn型：我们需要兼容 debug 、 log 、 error 类型的 log日志版本问题
我们需要一个常量用以定义版本号，以便于我们定位出问题的代码版本。
如果遇到版本问题，我们可以更好的引导用户1
2
3
4
co小白轻松搭建系统点我wcqh.cnnst VERSION = “1.0.0”
const logger = wx.getLogManager({ level: 0 })
logger.log(VERSION, info)
我们可以通过 [version] file | content 的统一格式来更快的定位内容。
1
2
3
4
const VERSION = “1.0.0”
const logger = wx.getLogMan小白轻松搭建系统点我wcqh.cnager({ level: 0 })
logger.log(`[${VERSION}] ${file} | `, …args)
兼容性
我们需要考虑用户小程序版本不足以支持 getLogMan小白轻松搭建系统点我wcqh.cnager 、 getRealtimeLogManager 的情况
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const VERSION = “0.0.18”;
const canIUseLogManage =小白轻松搭建系统点我wcqh.cn wx.canIUse(“getLogManager”);
const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null小白轻松搭建系统点我wcqh.cn;
const realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null;
export function小白轻松搭建系统点我wcqh.cn RUN(file, …args) {
console.log(`[${VERSION}]`, file, ” | “, …args);
if (canIUseLogManage) {
logger小白轻松搭建系统点我wcqh.cn.log(`[${VERSION}]`, file, ” | “, …args);
}
realtimeLogger && realtimeLogger.info(`[${VERSION}]`, fi小白轻松搭建系统点我wcqh.cnle, ” | “, …args);
}
类型
我们需要兼容 debug 、 log 、 error 类型的 log日志
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
24
25
export function RUN(file, …args) {
…
}
export function DEBUG(file, …args) {
…
}
export functi小白轻松搭建系统点我wcqh.cnon ERROR(file, …args) {
…
}
export function getLogger(fileName) {
return {
DEBUG: function (…args) 小白轻松搭建系统点我wcqh.cn{
DEBUG(fileName, …args)
},
RUN: function (…args) {
RUN(fileName, …args)
},
ERROR: function (…args小白轻松搭建系统点我wcqh.cn) {
ERROR(fileName, …args)
}
}
}
完整代码
以上都做到了，就完成了一套 Log 系统的基本封装。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const VERSION = “0.0.18”;
const canIUseLogManage = wx小白轻松搭建系统点我wcqh.cn.canIUse(“getLogManager”);
const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null;
co小白轻松搭建系统点我wcqh.cnnst realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null;
export function DE小白轻松搭建系统点我wcqh.cnBUG(file, …args) {
console.debug(`[${VERSION}] ${file} | `, …args);
if (canIUseLogManage) {
logger小白轻松搭建系统点我wcqh.cn.debug(`[${VERSION}]`, file, ” | “, …args);
}
realtimeLogger && realtimeLogger.info(`[${VERSION}]`, 小白轻松搭建系统点我wcqh.cnfile, ” | “, …args);
}
export function RUN(file, …args) {
console.log(`[${VERSION}]`, file, ” | “, 小白轻松搭建系统点我wcqh.cn…args);
if (canIUseLogManage) {
logger.log(`[${VERSION}]`, file, ” | “, …args);
}
realtimeLogger && 小白轻松搭建系统点我wcqh.cnrealtimeLogger.info(`[${VERSION}]`, file, ” | “, …args);
}
export function ERROR(file, …args) {
con小白轻松搭建系统点我wcqh.cnsole.error(`[${VERSION}]`, file, ” | “, …args);
if (canIUseLogManage) {
logger.error(`[${VERSION}]`,小白轻松搭建系统点我wcqh.cn file, ” | “, …args);
}
realtimeLogger && realtimeLogger.error(`[${VERSION}]`, file, ” | “, …args)小白轻松搭建系统点我wcqh.cn;
}
export function getLogger(fileName) {
return {
DEBUG: function (…args) {
DEBUG(fileName, …args)
RUN: function (…args) {
RUN(fileName, …args)
},
ERROR: function (…args) {
ERROR(fileName, …args)小白轻松搭建系统点我wcqh.cn
}
}
}
全局注入 Log
通过该章节的名称，我们就可以知道全局注入。
全局注入的意思就是，不通过手动调用的形式，在方法写完后自动注入 log ，你只需要在更细节的地方考虑打印 log 即可。为什么小白轻松搭建系统点我wcqh.cn要全局注入
虽然我们实现了全局 log 的封装，但是很多情况下，一些新同学没有好的打 log 的习惯，尤其是前端同学（我也一样）。
所以我们需要做一个全局注入，以方便我们的代码书写，也避免掉手动打 log小白轻松搭建系统点我wcqh.cn 会出现遗漏的问题。如何进行全局注入
小程序提供了 behaviors 参数，用以让多个页面拥有相同的数据字段和方法。
需要注意的是， page 级别的 behaviors 在 2.9.2 之后开始支持
我小白轻松搭建系统点我wcqh.cn们可以通过封装一个通用的 behaviors ，然后在需要 log 的页面进行引入即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import * as Log from “./log-t小白轻松搭建系统点我wcqh.cnest”;
export default Behavior({
definitionFilter(defFields) {
console.log(defFields);
Object.keys(defFie小白轻松搭建系统点我wcqh.cnlds.methods || {}).forEach(methodName => {
const originMethod = defFields.methods[methodName];
defFiel小白轻松搭建系统点我wcqh.cnds.methods[methodName] = function (ev, …args) {
if (ev && ev.target && ev.currentTarget && ev.curre小白轻松搭建系统点我wcqh.cnntTarget.dataset) {
Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, event dataset = `, ev.cu小白轻松搭建系统点我wcqh.cnrrentTarget.dataset, “params = “, …args);
} else {
Log.RUN(defFields.data.PAGE_NAME, `${methodName} 小白轻松搭建系统点我wcqh.cninvoke, params = `, ev, …args);
}
originMethod.call(this, ev, …args)
}
})
}
})
总结
连着开发带整理，林林总总的也有了 小白轻松搭建系统点我wcqh.cn2000+ 字，耗费了三天的时间，整体感觉还是比较值得的，希望可以带给大家一些帮助。
也希望大家更重视前端的 log 一点。这基于我自身的感觉，尤其是移动端用户。
在很多时候由于 手机型号 、 弱网环境等导致的小白轻松搭建系统点我wcqh.cn问题。
在没有 log 时，找不到问题的着力点，导致问题难以被及时解决。后续我会在 github 开放源码，并打包至 npm ，开发者后续可自行 install 调用。
后续 源码地址 及 npm安装方法将会在小白轻松搭建系统点我wcqh.cn该页面更新。
开放时间基于大家需求而定。【相关学习推荐：小程序开发教程】
以上就是聊聊小程序中的 Log 日志系统，看看怎么搭建和使用的详细内容，更多请关注php中文网其它相关文章！
会员专属
暂无评论内容