Mari kita bincangkan tentang sistem Log dalam program mini dan lihat cara membina dan menggunakannya.

Artikel ini akan membincangkan tentang sistem Log dalam Program Mini, memperkenalkan cara menggunakan sistem Log Program Mini, dan cara membina sistem Log Program Mini Saya harap ia akan membantu semua orang!

Biasanya, sistem pembalakan merupakan bahagian penting dalam pembangunan.

Namun, atas pelbagai sebab, adalah tidak biasa untuk melakukan pencetakan log dan sistem pelaporan dalam pembangunan bahagian hadapan.
Tetapi dalam beberapa kes tertentu, sistem pembalakan sering berfungsi dengan baik.

Sebagai contoh, masalah berikut dihadapi dalam sistem sembang:

• Semasa panggilan suara, pengguna tidak dapat mendengar bunyi
• Dalam beberapa senario, pengguna melaporkan dalam pemesejan segera bahawa mesej Tidak dapat dihantar
• Dalam pemesejan segera, apabila A membalas mesej B, kotak dialog tidak muncul sekali-sekala
• Dalam pemesejan segera, selepas A menghantar dua mesej berturut-turut kepada B, B tidak boleh menerima yang kedua Petua
• Dalam pemesejan segera, apabila menghantar mesej suara, pengguna menyangka bahawa suara itu telah dihantar, tetapi sebenarnya rakaman masih diteruskan. Pada masa ini, pengguna menyangka bahawa rangkaian itu tersekat, dan akhirnya mendapati bahawa suara dirinya dan orang lain bercakap telah dirakam

Walau bagaimanapun, ralat di atas tidak ditunjukkan dalam antara muka latar belakang. Ditambah pula dengan masalah beberapa model telefon bimbit pengguna, masalahnya sukar dikesan.
Jika kami mempunyai log di sini, kami boleh mencari kod yang bermasalah dengan cepat.
Jika ia bukan masalah kod, kami akan lebih yakin untuk membalas kepada pengguna bahawa ia bukan masalah dengan sistem kami.

Cara menggunakan sistem Log Program Mini

Sebelah Program Mini menyediakan dua antara muka Log Program Mini:

• LogManager ( Log biasa )
• RealtimeLogManager ( Log masa nyata )

Pegawai tidak memperkenalkan perbezaan khusus antara kedua-duanya. Ia hanya menekankan sifat masa nyata Masa Nyata.

Pada pendapat saya, perbezaan terbesar antara mereka ialah:

• LogManager boleh memberi pengguna rasa ketenangan fikiran, kerana LogManager ialah isu maklum balas manual daripada pengguna .
• RealtimeLogManager lebih mesra kepada pembangun Ia boleh mengumpul maklumat masalah tanpa diketahui oleh pengguna dan menyelesaikan masalah tanpa diketahui oleh pengguna.

LogManager

Antara muka log Log yang disediakan oleh applet, dapatkan contoh melalui wx.getLogManager().
Nota:

• Simpan sehingga 5J kandungan log Selepas melebihi 5J, kandungan log lama akan dipadamkan.
• Untuk program mini, pengguna boleh memuat naik log bercetak dengan menggunakan button komponen open-type="feedback".
• Untuk Permainan Mini, pengguna boleh mencipta butang untuk memuat naik log bercetak dengan menggunakan wx.createFeedbackButton.
• Pembangun boleh melihat log pencetakan berkaitan melalui menu kiri latar belakang pengurusan program mini Pengurusan Maklum Balas halaman.

Buat contoh LogManager

Anda boleh mendapatkan tika log melalui wx.getLogManager().
Parameter { level: 0 | 1 } boleh dihantar dalam kurungan untuk memutuskan sama ada hendak menulis fungsi kitaran hayat Page dan log fungsi di bawah ruang nama wx.

• 0: Tulis
• 1: Jangan tulis

 https://github.com/Kujiale-Mobile/Painter

Gunakan contoh 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])

Maklum balas pengguna memuat naik log yang direkodkan oleh LogManager

Selepas log direkodkan, pengguna boleh log masuk ke profile halaman program mini , klik Maklum Balas dan Aduan, dan klik Keabnormalan Fungsi untuk memuat naik log.

Pembangun mengendalikan maklum balas pengguna dan berkomunikasi dengan pengguna

Pembangun boleh menguruskan -> Maklum Balas Pengguna -> Fungsi tidak normal Lihat maklumat maklum balas pengguna.
Pembangun boleh mengikat perkhidmatan pelanggan WeChat di bawah Fungsi -> Perkhidmatan Pelanggan Selepas mengikat, mereka boleh berkomunikasi dengan pengguna maklum balas melalui WeChat dalam masa 48 jam .

Nota: Apabila komunikasi memerlukan maklum balas pengguna, tandai kotak: Benarkan pembangun menghubungi saya melalui mesej perkhidmatan pelanggan dalam masa 48 jam.

RealtimeLogManager

Antara muka log 实时Log yang disediakan oleh applet, dapatkan tika melalui wx.getRealtimeLogManager().
Nota:

• wx.getRealtimeLogManager() 基础库 2.7.1 开始支持
• 官方给出实时日志每条的容量上限是 5kb
• 官方对每条日志的定义：在一个页面 onShow -> onHide 之间，会聚合成一条日志上报
• 开发者可从小程序管理后台： 开发 -> 运维中心 -> 实时日志 进入小程序端日志查询页面

为了定位问题方便，日志是按页面划分的，某一个页面，在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安装方法 将会在该页面更新。
开放时间基于大家需求而定。

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

Atas ialah kandungan terperinci Mari kita bincangkan tentang sistem Log dalam program mini dan lihat cara membina dan menggunakannya.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!