一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

小程序调试工具开发小记

前提

我们进行uniapp的小程序开发,大部分情况是在开发工具中,进行接口联调。

在开发H5的时候,用的是腾讯的Vconsole插件,可以看到接口相关的报错信息以及接口信息。但是开发微信小程序,是使用真机调试。当接口出现问题,只能使用小程序本身的调试模式,而小程序自带的调试工具,只能看到一些打印的vconsole信息;
小程序调试工具开发小记

增加自定义vconsole

文件结构目录

小程序调试工具开发小记
目前是有4个功能点:

  • GoH5:小程序内跳转h5页面;
  • NetWork: 查看当前网络请求;
  • PageInfo: 查看当前小程序路由;
  • Vconsole: 查看当前控制台打印信息;

这次主要介绍主要的NetWorkVconsole这两个功能的开发思路和实现方式;

开发

NetWork

主要实现是通过监听request接口请求,将数据存储在本地缓存,达到获取请求记录;
这里我分别定义了两个key,以当前的时间戳作为数据的id,方便展示的时候进行查找:

  • devtool_requests: 代表发送的接口请求;
    小程序调试工具开发小记

  • devtool_responses: 代表接口返回的数据;
    小程序调试工具开发小记
    之后在页面初始化的时候,通过uni提供的apiaddInterceptor,拦截 uni.request()请求,主要操作是在两个回调方法里执行:

  • invoke: 拦截前触发;

  • success: 成功回调拦截;

uni.addInterceptor("request", {
  invoke(args) {
    id = _this.addRecord(args);
  },
  complete(res) {
    _this.addResponse(id, res);
  },
});

这里在触发接口请求之前,获取请求参数中的url, data, header, method, dataType等信息,区分请求参数的数据类型结构,并将这些数据存储到缓存中去,获取该条记录的id,也就是时间戳;

export const formatRequest = (options) => {
    let { url, data, header, method, dataType } = options
    const id = Date.now()
    const reqDataType = typeof data
    if (data && reqDataType !== 'string' && reqDataType !== 'object') {
        data = '非文本或json'
    }

    return {
        url,
        data,
        header,
        method,
        dataType,
        id,
        startTime: +new Date()
    }
}
// 记录请求信息的id
addRecord(options) {
    ...
    const record = formatRequest(options);
    records.unshift(record);
    uni.setStorageSync(REQUESTS_STORAGE_KEY, records);
    return record.id;
    ...
},

之后在接口请求成功返回数据的时候,在addInterceptorsuccess回调中,传递刚才记录请求的记录id以及返回的结构,,并对数据进行存储;

 // 记录返回信息
addResponse(id, res) {
    ...
    const allResponse = uni.getStorageSync(RESPONSES_STORAGE_KEY) || {};
    const response = JSON.parse(JSON.stringify(res));
    uni.setStorageSync(RESPONSES_STORAGE_KEY, allResponse);
    ...
},

在存储返回数据结构的时候,重新获取一下时间,计算接口请求总共耗时多久,更新该条记录idtime信息。

const now = +new Date();
const record = records.find((record) => record.id === id);
if (record) {
  Object.assign(record, options, {
    time: now - record.startTime,
  });
  uni.setStorageSync(REQUESTS_STORAGE_KEY, records);
}

ps: 因为数据是通过setStorageSync存储到本地的,所以会存在内存溢出的情况。调用getStorageInfoSync的api,获取当前的currentSizelimitSize,如果当前占用的空间大小超过了限制的空间大小的一半,就直接把本地缓存里的数据删除一半;

const { currentSize, limitSize } = uni.getStorageInfoSync();
if (currentSize > limitSize * 0.5) {
  const records = getAll();
  const deletedRecords = records.splice(records.length / 2);
  const allResponse = uni.getStorageSync(RESPONSES_STORAGE_KEY) || {};
  deletedRecords.forEach((record) => {
    delete allResponse[record.id];
  });
  uni.setStorageSync(REQUESTS_STORAGE_KEY, records);
  uni.setStorageSync(RESPONSES_STORAGE_KEY, allResponse);

pps: 接口请求信息支持长按复制;

VConsole

主要实现是通过覆盖console.log的function,自定义控制台打印;

console.log = function () {
  const args = Array.from(arguments);
  // 将对象转换为JSON字符串,以便展开查看
  const formattedArgs = args.map((arg) => {
    return typeof arg === "object" ? JSON.stringify(arg, null, 2) : arg;
  });
  logs.push(formattedArgs.join(" "));
  originalLog.apply(console, args);
};

最终效果

具体插件我放在了插件市场,求赞!!!

小程序调试工具开发小记

本地开发

步骤一:
将你的uniapp项目导入到HBuilder X

步骤二:
uni-app项目根目录下,创建uni_modules目录,在HBuilderX中可以项目右键菜单中点击新建uni_modules目录
小程序调试工具开发小记

  • 如果是vue-cli项目,uni_modules目录,位于src下,即src/uni_modules

步骤三:
HBuilderXuni_modules目录右键点击新建uni_modules插件
小程序调试工具开发小记
小程序调试工具开发小记

  • 格式为:’作者ID-插件英文名称’,示例:’xx-yy’,其中作者ID和插件英文名称只能包含英文、数字
  • 作者ID由插件作者自定义,不能使用’DCloud’、’uni’等关键字,长度要求至少2位字符
  • 插件名称需直观表达插件的作用,例如:tag、button等

步骤四:
本地开发

发布插件

HBuilderX中插件目录右键点击发布到插件市场,填写插件信息
小程序调试工具开发小记
小程序调试工具开发小记

引用插件

步骤一:
将你的uniapp项目导入到HBuilder X

步骤二:
按照引用组件的方式使用

原文链接:https://juejin.cn/post/7312421872415080475 作者:换个名字不能让人发现我在摸鱼

(0)
上一篇 2023年12月15日 下午4:16
下一篇 2023年12月15日 下午4:26

相关推荐

发表评论

登录后才能评论