前提
我们进行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: 成功回调拦截;
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;
...
},
之后在接口请求成功返回数据的时候，在addInterceptor的success回调中，传递刚才记录请求的记录id以及返回的结构,，并对数据进行存储；
// 记录返回信息
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信息。
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，如果当前占用的空间大小超过了限制的空间大小的一半，就直接把本地缓存里的数据删除一半；
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
步骤三：
在HBuilderX中uni_modules目录右键点击新建uni_modules插件
- 格式为：’作者ID-插件英文名称’，示例：’xx-yy’，其中作者ID和插件英文名称只能包含英文、数字
- 作者ID由插件作者自定义，不能使用’DCloud’、’uni’等关键字，长度要求至少2位字符
- 插件名称需直观表达插件的作用，例如：tag、button等
步骤四：
本地开发
发布插件
在HBuilderX中插件目录右键点击发布到插件市场，填写插件信息
引用插件
步骤一：
将你的uniapp项目导入到HBuilder X中
步骤二：
按照引用组件的方式使用
原文链接：https://juejin.cn/post/7312421872415080475 作者：换个名字不能让人发现我在摸鱼
