小程序工具开发

前提

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

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

增加自定义vconsole

文件结构目录

目前是有4个功能点：

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

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

开发

NetWork

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

devtool_requests: 代表发送的接口请求；
devtool_responses: 代表接口返回的数据；之后在页面初始化的时候，通过uni提供的apiaddInterceptor，拦截 uni.request()请求，主要操作是在两个回调方法里执行：
invoke: 拦截前触发;
success: 成功回调拦截;

javascript 复制代码

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

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

javascript 复制代码

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()
    }
}

javascript 复制代码

// 记录请求信息的id
addRecord(options) {
    ...
    const record = formatRequest(options);
    records.unshift(record);
    uni.setStorageSync(REQUESTS_STORAGE_KEY, records);
    return record.id;
    ...
},

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

javascript 复制代码

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

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

javascript 复制代码

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，获取当前的currentSize和limitSize，如果当前占用的空间大小超过了限制的空间大小的一半，就直接把本地缓存里的数据删除一半；

javascript 复制代码

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，自定义控制台打印；

javascript 复制代码

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);
};