In diesem Artikel geht es um das Protokollsystem im Mini-Programm, es wird vorgestellt, wie man das Mini-Programm-Protokollsystem verwendet und wie man das Mini-Programm-Protokollsystem erstellt. Ich hoffe, dass es für alle hilfreich ist!
Normalerweise ist das Protokollierungssystem ein wichtiger Teil der Entwicklung.
Aber aus verschiedenen Gründen ist es nicht üblich, Protokolldruck- und Berichtssysteme in der Front-End-Entwicklung einzusetzen.
Aber in bestimmten Fällen wirkt das Protokollierungssystem oft Wunder.
In einem Chat-System traten beispielsweise folgende Probleme auf:
log haben, können wir den problematischen Code schnell finden. log ，我们就能很快定位到出问题的代码。小程序侧提供了两种小程序 Log 日志接口：
官方并没有介绍两者的具体区别，只是强调了 Realtime 的实时性质。
在我看来他们的最大区别就是：
LogManager 可以让用户有种心安的感觉，因为 LogManager 是用户手动反馈的问题。RealtimeLogManager 则对开发者更友好，可以在用户不知情的情况下收集到问题信息，并在用户无感的情况下对问题进行修复。LogManager
小程序提供的 Log 日志接口，通过 wx.getLogManager() 获取实例。
注意：
button 组件的 open-type="feedback" 来上传打印的日志。wx.createFeedbackButton 来创建上传打印的日志的按钮。创建 LogManager 实例
你可以通过 wx.getLogManager() 获取日志实例。
括号中可以传参 { level: 0 | 1 } 来决定是否写入 Page 的生命周期函数， wx 命名空间下的函数日志。
https://github.com/Kujiale-Mobile/Painter
使用 LogManager 实例
const logger = wx.getLogManager({ level: 0 })
logger.log({str: 'hello world'}, 'basic log', 100, [1, 2, 3])
logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3])
logger.debug({str: 'hello world'}, 'debug log', 100, [1, 2, 3])
logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])用户反馈上传 LogManager 记录的日志
当日志记录后， 用户可以在小程序的 profile 页面，单击 反馈与投诉 ，在点击 功能异常 进行日志上传。
开发者处理用户反馈及和用户沟通
开发者可以在小程序后台 管理 -> 用户反馈 -> 功能异常 查看用户反馈的信息。
开发者可以在 功能 -> 客服 下绑定客服微信，绑定后可以在 48小时 内通过微信和反馈用户沟通。
注：沟通需要用户反馈时勾选：允许开发者在 48 小时内通过客服消息联系我。
RealtimeLogManager
小程序提供的 实时Log 日志接口，通过 wx.getRealtimeLogManager()
LogManager kann Benutzern ein Gefühl der Sicherheit geben, da es sich bei LogManager um ein von Benutzern manuell gemeldetes Problem handelt . 🎜🎜RealtimeLogManager ist entwicklerfreundlicher. Es kann Probleminformationen sammeln, ohne dass der Benutzer es merkt, und das Problem beheben, ohne dass der Benutzer es merkt. 🎜🎜🎜LogManager🎜🎜Die vom Applet über bereitgestellte Protokollschnittstelle <code>Log wx .getLogManager() Holen Sie sich die Instanz. 🎜Hinweis: 🎜🎜🎜Bis zu 5 Millionen Protokollinhalte können gespeichert werden. Nach Überschreiten von 5 Millionen werden alte Protokollinhalte gelöscht. 🎜🎜Für das Mini-Programm können Benutzer gedruckte Protokolle hochladen, indem sie open-type="feedback" der button-Komponente verwenden. 🎜🎜Für Minispiele können Benutzer mithilfe von wx.createFeedbackButton eine Schaltfläche zum Hochladen gedruckter Protokolle erstellen. 🎜🎜Entwickler können relevante Druckprotokolle über die Seite Feedback-Management im linken Menü des Mini-Programmverwaltungs-Backends anzeigen. 🎜🎜🎜LogManager-Instanz erstellen🎜🎜Sie können die Protokollinstanz über wx.getLogManager()</code abrufen > . 🎜Sie können den Parameter <code>{ level: 0 | 1 in den Klammern übergeben, um zu entscheiden, ob die Lebenszyklusfunktion von Page unter wx</ geschrieben werden soll. Code> Namespace Funktionsprotokoll. 🎜🎜🎜0: Schreiben 🎜🎜1: Nicht schreiben 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const logger = wx.getRealtimeLogManager()</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜<strong><span style="font-size: 18px;">LogManager-Instanz verwenden</span></strong>🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const logger = wx.getRealtimeLogManager()
logger.debug({str: &#39;hello world&#39;}, &#39;debug log&#39;, 100, [1, 2, 3])
logger.info({str: &#39;hello world&#39;}, &#39;info log&#39;, 100, [1, 2, 3])
logger.error({str: &#39;hello world&#39;}, &#39;error log&#39;, 100, [1, 2, 3])
logger.warn({str: &#39;hello world&#39;}, &#39;warn log&#39;, 100, [1, 2, 3])</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜<strong > <span style="font-size: 18px;">Benutzerfeedback lädt die von LogManager aufgezeichneten Protokolle hoch</span></strong>🎜🎜Nachdem die Protokolle aufgezeichnet wurden, kann der Benutzer die Protokolle im <code> des Miniprogramms hochladen Klicken Sie auf der Profilseite auf Feedback und Beschwerden und dann auf Funktionsstörungen, um Protokolle hochzuladen. 🎜🎜Entwickler bearbeiten Benutzerfeedback und kommunizieren mit Benutzern🎜🎜Entwickler können im Miniprogramm Verwalten Hintergrund stark> -> Benutzer-Feedback -> Funktionsstörung Informationen zum Benutzer-Feedback anzeigen. 🎜Entwickler können den WeChat-Kundendienst unter Funktion -> binden. Nach der Bindung können sie den Benutzern innerhalb von 48 Stunden Feedback geben kommunizieren. 🎜🎜Hinweis: Wenn für die Kommunikation Benutzerfeedback erforderlich ist, aktivieren Sie das Kontrollkästchen: Entwicklern erlauben, mich innerhalb von 48 Stunden über Kundendienstnachrichten zu kontaktieren. 🎜🎜RealtimeLogManager🎜🎜Die
Echtzeitprotokoll-Protokollschnittstelle, die von bereitgestellt wird Applet, über wx.getRealtimeLogManager() Holen Sie sich die Instanz. 🎜Hinweis: 🎜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'}, 'debug log', 100, [1, 2, 3])
logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3])
logger.error({str: 'hello world'}, 'error log', 100, [1, 2, 3])
logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])查看实时日志
与普通日志不同的是，实时日志不再需要用户反馈，可以直接通过以下方式查看实例。
登录小程序后台
通过路径 开发 -> 开发管理 -> 运维中心 -> 实时日志 查看实时日志
如何搭建小程序 Log 日志系统
上面我们知道了小程序的 Log 日志怎么使用，我们当然可以不进行封装直接使用。
但是我们直接使用起来会感觉到十分的别扭，因为这不符合我们程序员单点调用的习惯。
那么接下来让我们对这套 Log 系统进行初步的封装以及全局的方法的日志注入。
后续我会在 github 开放源码，并打包至 npm ，需要的开发者可自行 install 调用。
封装小程序 Log 方法
封装 Log 方法前，我们需要整理该方法需要考虑什么内容：
getLogManager 、 getRealtimeLogManager 的情况debug 、 log 、 error 类型的 log日志版本问题
我们需要一个常量用以定义版本号，以便于我们定位出问题的代码版本。
如果遇到版本问题，我们可以更好的引导用户
const VERSION = "1.0.0"
const logger = wx.getLogManager({ level: 0 })
logger.log(VERSION, info)打印格式
我们可以通过 [version] file | content 的统一格式来更快的定位内容。
const VERSION = "1.0.0"
const logger = wx.getLogManager({ level: 0 })
logger.log(`[${VERSION}] ${file} | `, ...args)兼容性
我们需要考虑用户小程序版本不足以支持 getLogManager 、 getRealtimeLogManager 的情况
const VERSION = "0.0.18";
const canIUseLogManage = wx.canIUse("getLogManager");
const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null;
const realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null;
export function RUN(file, ...args) {
console.log(`[${VERSION}]`, file, " | ", ...args);
if (canIUseLogManage) {
logger.log(`[${VERSION}]`, file, " | ", ...args);
}
realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args);
}类型
我们需要兼容 debug 、 log 、 error 类型的 log日志
export function RUN(file, ...args) {
...
}
export function DEBUG(file, ...args) {
...
}
export function ERROR(file, ...args) {
...
}
export function getLogger(fileName) {
return {
DEBUG: function (...args) {
DEBUG(fileName, ...args)
},
RUN: function (...args) {
RUN(fileName, ...args)
},
ERROR: function (...args) {
ERROR(fileName, ...args)
}
}
}完整代码
以上都做到了，就完成了一套 Log 系统的基本封装。
const VERSION = "0.0.18";
const canIUseLogManage = wx.canIUse("getLogManager");
const logger = canIUseLogManage ? wx.getLogManager({ level: 0 }) : null;
const realtimeLogger = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null;
export function DEBUG(file, ...args) {
console.debug(`[${VERSION}] ${file} | `, ...args);
if (canIUseLogManage) {
logger.debug(`[${VERSION}]`, file, " | ", ...args);
}
realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args);
}
export function RUN(file, ...args) {
console.log(`[${VERSION}]`, file, " | ", ...args);
if (canIUseLogManage) {
logger.log(`[${VERSION}]`, file, " | ", ...args);
}
realtimeLogger && realtimeLogger.info(`[${VERSION}]`, file, " | ", ...args);
}
export function ERROR(file, ...args) {
console.error(`[${VERSION}]`, file, " | ", ...args);
if (canIUseLogManage) {
logger.error(`[${VERSION}]`, file, " | ", ...args);
}
realtimeLogger && realtimeLogger.error(`[${VERSION}]`, file, " | ", ...args);
}
export function getLogger(fileName) {
return {
DEBUG: function (...args) {
DEBUG(fileName, ...args)
},
RUN: function (...args) {
RUN(fileName, ...args)
},
ERROR: function (...args) {
ERROR(fileName, ...args)
}
}
}全局注入 Log
通过该章节的名称，我们就可以知道全局注入。
全局注入的意思就是，不通过手动调用的形式，在方法写完后自动注入 log ，你只需要在更细节的地方考虑打印 log 即可。
为什么要全局注入
虽然我们实现了全局 log 的封装，但是很多情况下，一些新同学没有好的打 log 的习惯，尤其是前端同学（我也一样）。
所以我们需要做一个全局注入，以方便我们的代码书写，也避免掉手动打 log 会出现遗漏的问题。
如何进行全局注入
小程序提供了 behaviors 参数，用以让多个页面拥有相同的数据字段和方法。
需要注意的是，
page级别的behaviors在 2.9.2 之后开始支持
我们可以通过封装一个通用的 behaviors ，然后在需要 log 的页面进行引入即可。
import * as Log from "./log-test";
export default Behavior({
definitionFilter(defFields) {
console.log(defFields);
Object.keys(defFields.methods || {}).forEach(methodName => {
const originMethod = defFields.methods[methodName];
defFields.methods[methodName] = function (ev, ...args) {
if (ev && ev.target && ev.currentTarget && ev.currentTarget.dataset) {
Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, event dataset = `, ev.currentTarget.dataset, "params = ", ...args);
} else {
Log.RUN(defFields.data.PAGE_NAME, `${methodName} invoke, params = `, ev, ...args);
}
originMethod.call(this, ev, ...args)
}
})
}
})总结
连着开发带整理，林林总总的也有了 2000+ 字，耗费了三天的时间，整体感觉还是比较值得的，希望可以带给大家一些帮助。
也希望大家更重视前端的 log 一点。这基于我自身的感觉，尤其是移动端用户。
在很多时候由于 手机型号 、 弱网环境 等导致的问题。
在没有 log 时，找不到问题的着力点，导致问题难以被及时解决。
后续我会在
github开放源码，并打包至npm，开发者后续可自行install调用。
后续 源码地址 及 npm安装方法 将会在该页面更新。
开放时间基于大家需求而定。
【相关学习推荐：小程序开发教程】
Das obige ist der detaillierte Inhalt vonLassen Sie uns über das Protokollsystem im Miniprogramm sprechen und sehen, wie man es erstellt und verwendet.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Mini-Programmpfaderfassung
So stellen Sie den IE-Browser wieder her, um automatisch zu EDGE zu springen
Ist Java Front-End oder Back-End?
Die drahtlose Netzwerkkarte kann keine Verbindung herstellen
So ermitteln Sie die Summe gerader Elemente in einem Array in PHP
Verwendung der fscanf-Funktion
So überprüfen Sie den MD5-Wert
Warum der Computer immer wieder automatisch neu startet
