uniapp生成的微信小程序实时日志

小程序发布生产后，程序出现异常、漏洞等问题我们通常难以定位，微信小程序的实时日志功能就能解决此类问题，而uniapp也推出的该功能。从基础库2.7.1开始，开发者可通过提供的接口打印日志，日志汇聚并实时上报到小程序后台。

1.实时日志公共方法

//src/utils/log.ts:

let log: any = uni.getRealtimeLogManager ? uni.getRealtimeLogManager() : null;
const name = uni.getStorageSync("name");
const id = uni.getStorageSync("id");
const name_id = `${name}-${id}`;

export const Log = {
  debug() {
    if (!log) return;
    log.debug.apply(log, [name_id, ...arguments]);
  },
  info() {
    if (!log) return;
    console.log(name_id);
    console.log(arguments);

    log.info.apply(log, [name_id, ...arguments]);
  },
  warn() {
    if (!log) return;
    log.warn.apply(log, [name_id, ...arguments]);
  },
  error() {
    if (!log) return;
    log.error.apply(log, [name_id, ...arguments]);
  },
  setFilterMsg(msg: string) {
    // 从基础库2.7.3开始支持
    if (!log || !log.setFilterMsg) return;
    if (typeof msg !== "string") return;
    log.setFilterMsg(msg);
  },
  addFilterMsg(msg: string) {
    // 从基础库2.8.1开始支持
    if (!log || !log.addFilterMsg) return;
    if (typeof msg !== "string") return;
    log.addFilterMsg(msg);
  },
};

2.uniapp项目文件中引用和使用

//src/pages/notConfirm/detail/index.vue:

<template>
  ...
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Log } from "@/utils/log";

const waitSignName = ref("");
const waitSignNameBool = ref(true);

onLoad((e) => {
    const userId = uni.getStorageSync("id");
    // #ifdef MP-WEIXIN
    //@ts-ignore
    Log.error("接收的参数" + JSON.stringify(e));
    //@ts-ignore
    Log.info("userId" + userId);
    //@ts-ignore
    Log.info("waitSignName" + waitSignName.value);
    //@ts-ignore
    Log.info("waitSignNameBool" + waitSignNameBool.value);
    // #endif
}
</script>

3.小程序在手机上运行执行了上述代码后(开发时在手机上预览、体验版、生产版)，在微信公众平台的小程序管理后台查看日志

从"底部小程序名称 -> We分析 -> 性能质量 -> 实时日志 -> 去使用(未启用需要管理员授权启用)"进入日志查询页面，查看上报的日志了。

4.拓展

小程序实时日志功能
微信小程序官方文档
平台管理
微信小程序操作日志上
微信小程序操作日志下
UniApp 性能监控与错误日志上报系统