總所周知,在開發web服務端程序的時候,是有日志記錄功能的。但對於我們前端來說,日志功能就僅知道console.log了,那么我們就很難知道哪個用戶在操作時發生了些什么。小程序的日志功能,剛好滿足了這一剛需。下面我們來看看什么是小程序日志功能。
什么是小程序日志?(官方原話)
為幫助小程序開發者快捷地排查小程序漏洞、定位問題,我們推出了實時日志功能。從基礎庫2.7.1開始,開發者可通過提供的接口打印日志,日志匯聚並實時上報到小程序后台。開發者可從小程序管理后台“開發->運維中心->實時日志”進入日志查詢頁面,查看開發者打印的日志信息。
可以從小程序管理后台中看到如下的日志信息:
那么如何使用呢?
首先,我們可以先創建一個log.js文件,存放日志功能的一些方法。
let log = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null; /** * @Description: 日志記錄(手機可以上傳-編譯器不能) * @author Chendy * @date 2020/5/8 * 可上傳調用方法可以打印日志到后台,在小程序管理平台可以查看打印的日志 **/ class Logs { constructor() {} /** * 普通提示 */ info() { if (!log) { return; } log.info.apply(log, arguments); } /** * 警告提示 */ warn() { if (!log) { return; } log.warn.apply(log, arguments); } /** * 錯誤提示 */ error() { if (!log) { return; } log.error.apply(log, arguments); } /** * 組合提示 * @param msg */ setFilterMsg(msg) { if (!log || !log.setFilterMsg) { return; } if (typeof msg !== "string") { return; } log.setFilterMsg(msg); } addFilterMsg(msg) { if (!log || !log.addFilterMsg) { return; } if (typeof msg !== "string") { return; } log.addFilterMsg(msg); } } export { Logs };
下面主要講講上述代碼中setFilterMsg和addFilterMsg,其他三個相信大家都熟悉的不得了了,跟console對象中的方法是一樣的。
set 和 add的作用給你當前頁面本次提交的log加一個標簽,方便在查詢實時日志的時候,添加檢索功能。
比如某個地方是login error
你就可以在觸發的時候執行以下addFilterMsg('login_error')
這樣你收到日志的時候會有這個標簽。
也可以在“FilterMsg內容”搜索框中輸入(login_error)搜索改log標簽的日志。
set和add的區別:
需要添加多個關鍵字,建議使用addFilterMsg替代setFilterMsg。
在頁面JS中引用:
import {Logs} from '../utils/log.js'; const log = new Logs(); log.info('hello test hahaha') // 日志會和當前打開的頁面關聯,建議在頁面的onHide、onShow等生命周期里面打 log.warn('warn');//打印警告 log.error('error'); //打印錯誤 log.setFilterMsg('filterkeyword'); // 添加當前頁日志標簽(便於搜索) log.setFilterMsg('addfilterkeyword')// 添加當前頁日志標簽(便於搜索)
如何查看打印的日志?(只能在手機上調試才有日志輸出,ide上的模擬器是不會上傳日志的)
登錄小程序管理后台,從“開發->運維中心->實時日志”進入日志查詢頁面。開發者可通過設置時間、微信號/OpenID、頁面鏈接、FilterMsg內容(基礎庫2.7.3及以上支持setFilterMsg)等篩選條件查詢指定用戶的日志信息。(微信原話)
講到這里,相信大家已經對小程序的實時日志有個大概的了解和知道怎么使用它了。
最后,貼上官方鏈接,方便繼續探索:https://developers.weixin.qq.com/miniprogram/dev/framework/realtimelog/