一、前言
在上一节的结论中,我们知道Eruda的Network请求捕获功能是调用了chobitsu协议工具,现在我们clone下Dokit Web项目,可以参考其他同学的源码目录分析,它的目录结构是一个标准的lerna项目的结构。本节开始着手进行自己的请求捕获插件实现,并将它的功能入口展现在Dokit Web的页面容器中。
关于项目结构,可以参考该文章,此处不再赘述,下面直接记录添加一个新插件的步骤,都在Web/packages目录中进行操作。
二、添加Network插件的菜单项
关于上面提到的文章中剖析源码整体结构的提要:
- /core/src/index.js:整个项目的入口文件/playground/index.html只引用了web/dist/dokit.js,项目核心代码利用rollup打包在目录packages/web/下,而查看rollup.config.js可以看到,上面的dokit.js便是打包的输出文件,输入文件为/core/src/index.js,其中定义了Dokit全局组件。
- /web/feature.js中注册系统中的插件。
- /core/components/home.vue:Dokit菜单页面的完整结构,包括三个components:TopBar,Card,VersionCard。每个features中注册的插件作为一个card显示在菜单页面中。
根据以上线索,添加新的菜单项步骤如下:
- 在web/src/plugins下新建新插件network的文件夹,先仿照app-info、demo-plugin目录,在其中新建两个文件index.js和ToolHelloWorld.vue,后面会在这个目录中编写插件的实现代码。这里先在index.js中配置RouterPlugin,并引入Vue组件。
//web/src/plugins/network/index.js
import HelloWorld from './ToolHelloWorld.vue'
import {RouterPlugin} from '@dokit/web-core'
export default new RouterPlugin({
nameZh: '请求捕获',
name: 'network',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
component: HelloWorld
})
- 在web/src/feature.js中首先import插件,再在BasicFeatures.list中添加引入的Network模块。
//web/src/feature.js
import Network from './plugins/network/index'
export const BasicFeatures = {
title: '常用工具',
list: [Console, AppInfo, DemoPlugin, DemoSinglePlugin, H5DoorPlugin, Network]
}
上面有提到/web/dist/dokit.js是打包的输出文件,输入文件为/core/src/index.js,果然在此处注册了Network插件后,打开/web/dist/dokit.js,自动生成了如下的new RouterPlugin()语句:
此时运行项目就可以看到新插件显示在菜单中:
注:很多情况下safari与chrome的运行情况都会不同,此时safari就看不到新的菜单项。
三、编写请求捕获插件的页面组件
首先需要确定插件的页面功能都有哪些,功能很清晰,与前面调研的Eruda类似,可以参考Eruda的demo,主要包括显示拦截到的请求列表、显示请求详情这两个页面,类似下图。
话不多说我们开始写页面组件。
- 首先编写请求列表的页面组件,新建request-item.vue编写请求条目的页面组件
六、本节总结
本节的主要结论是