主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
本文带大家聊聊小程序中的log日志系统,并介绍如何使用小程序中的log日志系统以及如何构建小程序中的log日志系统。希望对你有帮助!
通常,日志系统是开发的重要组成部分。
但是由于各种原因,在前端开发中做日志打印和报表系统并不常见。但在某些特定情况下,日志系统往往能创造奇迹。
例如,一个聊天系统遇到了以下问题:
在语音通信中,用户听不到声音。在某些场景下,用户给出反馈,消息无法发送出去。在即时通讯中,当A回复消息B时,有时对话框不会显示。在即时通信中,A连续向B发送两条消息后,B没有收到第二条提示。在即时通信中,当发送语音消息时,用户认为语音已经发送,但实际上录音仍在继续。这时用户以为是网卡,最后发现自己和别人说话的声音被录音了,但上述错误并没有在后台界面体现出来。再加上部分用户手机型号的问题,很难定位问题所在。如果我们在这里有一个日志,我们可以快速定位错误代码。如果不是代码问题,我们的系统更有信心回复用户也不是问题。
如何使用小程序日志系统小程序端提供了两种小程序日志接口:
log manager(common log)RealtimeLogManager(real-time log)官方并没有介绍两者的具体区别,只是强调了Realtime的实时性。
在我看来,它们之间最大的区别是:
LogManager可以让用户感到放心,因为LogManager是用户手动反馈的问题。RealtimeLogManager对开发人员更友好,可以在用户不知情的情况下收集问题信息,并在用户没有感觉的情况下修复问题。日志管理器
小程序提供的日志接口,通过wx.getLogManager()获取实例。注意:
最多保存5M的日志内容。5M后,旧的日志内容将被删除。对于小程序,用户可以使用按钮组件的open -type =“feedback”上传打印日志。对于小游戏,用户可以使用wx.createFeedbackButton创建按钮上传打印日志,开发者可以通过小程序管理后台左侧菜单反馈管理页面查看相关打印日志。创建日志管理器的实例
您可以通过wx.getLogManager()获取日志实例。您可以传递括号中的参数{level: 0 | 1}来决定是在wx命名空间下编写Page的生命周期函数还是函数日志。
0:写入1:不要写入https://github.com/Kujiale-Mobile/Painter.使用的日志管理器实例
const logger = wx . getlog manager({ level:0 })logger . log({ str:& # 39;你好世界& # 39;}, '基本日志& # 39;,100,【1,2,3】)logger . info({ str:& # 39;你好世界& # 39;}, '信息日志& # 39;,100,【1,2,3】)logger . debug({ str:& # 39;你好世界& # 39;}, '调试日志& # 39;,100,【1,2,3】)logger . warn({ str:& # 39;你好世界& # 39;}, '警告日志& # 39;,100,【1,2,3】)用户反馈上传日志管理器记录的日志。
记录日志时,用户可以在小程序的个人资料页面点击反馈和投诉,并在功能异常时上传日志。
开发人员处理用户反馈并与用户沟通。
开发者可以在小程序后台管理-》用户反馈-》功能异常,查看用户的信息反馈。开发者可在功能-》客服下绑定客服微信,绑定后可在48小时内通过微信与反馈用户沟通。
RealtimeLogManager
小程序提供的实时日志接口,通过wx.getRealtimeLogManager()获取实例。注意:
Wx.getRealtimeLogManager()基本库2.7.1开始支持官方实时日志。每个日志的最大容量为5kb。根据每个日志的官方定义,可以从小程序管理后台聚合一个日志并报告给开发人员:开发-》运维中心-》实时日志进入小程序端日志查询页面创建一个RealtimeLogManager实例。
您可以通过wx.getRealtimeLogManager()获取实时日志实例。
Constlogger = wx。getRealtimeLogManager()使用RealtimeLogManager的实例。
const logger = wx . getrealtimelogmanager()logger . debug({ str:& # 39;你好世界& # 39;}, '调试日志& # 39;,100,【1,2,3】)logger . info({ str:& # 39;你好世界& # 39;}, '信息日志& # 39;,100,【1,2,3】)记录器。你好世界& # 39;}, '错误日志& # 39;,100,【1,2,3】)logger . warn({ str:& # 39;你好世界& # 39;}, '警告日志& # 39;,100,【1,2,3】)以查看实时日志。
与普通日志不同,实时日志不再需要用户反馈,您可以通过以下方式直接查看示例。
登录小程序背景
通过路径开发-》开发管理-》运维中心-》实时日志查看实时日志。
如何构建一个小程序日志系统
以上,我们知道了如何使用小程序的Log日志。当然,我们可以直接使用它而无需封装。但是直接使用的话我们会觉得很不舒服,因为这不符合我们程序员单点调用的习惯。
然后让我们对这个日志系统和全局方法的日志注入做一个初步的封装。
封装小程序日志方法
在封装日志方法之前,我们需要理清该方法需要考虑的问题:
打印格式:统一的打印格式有助于我们更快地定位问题版本号:方便我们清楚地知道当前用户使用的小程序版本,并避免旧版本在新代码中无法找到问题的问题兼容性:我们需要考虑用户小程序版本不足以支持getLogManager和getRealtimeLogManager的情况:我们需要兼容debug、log和error类型的日志版本问题。
我们需要一个常量来定义版本号,这样我们就可以定位问题的代码版本。如果我们遇到版本问题,我们可以更好地指导用户。
const version =“1 . 0 . 0“const logger = wx . getlog manager({ level:0 })logger . log(version,info)打印格式。
我们可以通过【版本】文件|内容的统一格式更快地定位内容。
const version =“1 . 0 . 0“const logger = wx . getlog manager({ level:0 })logger . log(`【$ { version }】$ { file } | `,...args)兼容性。
我们需要考虑用户小程序版本不足以支持getLogManager和getRealtimeLogManager的情况。
const VERSION =“0 . 0 . 18“;const canuselogmanage = wx . cani use(“getLogManager“);const logger = canIUseLogManage?wx . getlog manager({ level:0 }):null;const realtimeLogger = wx . getrealtimelogmanager?wx . getrealtimelogmanager():null;导出功能运行(文件、...args){ console . log(`【$ { VERSION }】`,文件“|“,...args);if(canuselogmanage){ logger . log(`【$ { VERSION }】`,file“|“,...args);} real time logger & & real time logger . info(`【$ { VERSION }】`,file“|“,...args);}类型
我们需要与调试、日志和错误类型兼容的日志。
导出功能运行(文件、...args ){...}导出函数调试(文件,...args ){...}导出函数错误(文件,...args ){...}导出函数getLogger(文件名){ return { DEBUG: function(...args){ DEBUG(fileName,...args)},Run: function(...args){ run(文件名,...args)},错误:函数(...args){ error(文件名,...args)} }完整代码。
以上都做好了,一个日志系统的基本包就完成了。
const VERSION =“0 . 0 . 18“;const canuselogmanage = wx . cani use(“getLogManager“);const logger = canIUseLogManage?wx . getlog manager({ level:0 }):null;const realtimeLogger = wx . getrealtimelogmanager?wx . getrealtimelogmanager():null;导出函数调试(文件、...args){ console . debug(`【$ { VERSION }】$ { file } | `,...args);if(canuselogmanage){ logger . debug(`【$ { VERSION }】`,file“|“,...args);} real time logger & & real time logger . info(`【$ { VERSION }】`,file“|“,...args);}导出函数运行(文件、...args){ console . log(`【$ { VERSION }】`,文件“|“,...args);if(canuselogmanage){ logger . log(`【$ { VERSION }】`,file“|“,...args);} real time logger & & real time logger . info(`【$ { VERSION }】`,file“|“,...args);}导出函数错误(文件,...args){ console . error(`【$ { VERSION }】`,file“|“,...args);if(canuselogmanage){ logger . error(`【$ { VERSION }】`,file“|“,...args);} real time logger & & real time logger . error(`【$ { VERSION }】`,file“|“,...args);}导出函数getLogger(文件名){ return { DEBUG: function(...args){ DEBUG(fileName,...args)},Run: function(...args){ run(文件名,...args)},错误:函数(...args){ error(文件名,...args)} }全局注入日志。
通过本章的名称,我们可以知道全球注射。全局注入意味着在编写方法后自动注入日志,而无需手动调用,您只需考虑更详细地打印日志。
为什么要全球注射?
虽然我们已经封装了全局日志,但在很多情况下,一些新生没有良好的日志记录习惯,尤其是前端学生(我也是)。因此,我们需要进行全局注入,以方便我们的代码编写,并避免手动日志记录时的遗漏问题。
如何进行全球注射
applet提供了行为参数,使多个页面具有相同的数据字段和方法。
我们可以封装一个常见的行为,然后将其引入到需要日志的页面中。
将*作为日志从“导入。/log-test“;导出默认行为({ definition filter(def fields){ console . log(def fields);object . keys(def fields . methods | | { })。forEach(method name =》{ const origin method = def fields . methods【method name】;deffields . methods【method name】= function(ev,...参数){ if(ev & & ev . target & & ev . current target & & ev . current target . dataset){ Log。RUN(def fields . data . page _ NAME,` ${methodName} invoke,event dataset = `,ev.currentTarget.dataset,“params =“,...args);} else { Log。RUN(def fields . data . page _ NAME,` ${methodName} invoke,params = `,ev,...args);}起源方法。调用(这,ev,...args)} })摘要。
写完开发区,森林里有200主机参考字,用了三天。总体感觉还是值得的。希望能给你带来一些帮助。
也希望大家多多关注前端日志。这是基于我自己的感受,尤其是对移动用户而言。很多情况下,由于手机型号、网络环境弱等问题。当没有日志时,无法找到问题的焦点,从而难以及时解决问题。
【相关学习推荐:小程序开发教程】
以上就是说说小程序中的日志系统,看看如何详细搭建和使用。更多内容请关注主机参考等相关文章!
这几篇文章你可能也喜欢:
本文由主机参考刊发,转载请注明:谈谈小程序中的日志系统,看看如何构建和使用它。 https://zhujicankao.com/104922.html
评论前必须登录!
注册