feat(plugin-network): network plugin support

packages/plugin-network/.npmignore

@@ -0,0 +1,11 @@
+.DS_Store
+.idea
+.vscode
+node_modules
+
+snippet
+src
+typings
+.gitignore
+gulpfile.js
+tsconfig.json

packages/plugin-network/README.md

@@ -0,0 +1,34 @@
+# we-debug network plugin
+
+we-debug 网络相关插件
+
+## 安装
+
+这是一个 we-debug 内置插件，开发者无需额外安装
+
+## 使用
+
+```javascript
+import weDebug from '@we-debug/core/libs/index'
+
+// 通过 init 方法初始化路由信息收集插件
+weDebug.init({
+ plugin: {
+ network: {
+ // 配置项
+ }
+ }
+})
+```
+
+## 配置
+
+参数 | 说明 | 类型 | 默认值 | 版本
+-|-|-|-|-|
+networkCallee | 网络调用方法 | `Array` | `['request', 'downloadFile', 'uploadFile']` | - |
+
+## 示例
+
+```javascript
+weDebug.init()
+```

packages/plugin-network/package.json

@@ -0,0 +1,16 @@
+{
+ "name": "@we-debug/plugin-network",
+ "version": "0.1.0",
+ "description": "network plugin for we-debug",
+ "main": "dist/index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [
+ "we-debug"
+ ],
+ "author": {
+ "name": "dlhandsome"
+ },
+ "license": "MIT"
+}

packages/plugin-network/src/index.js

@@ -0,0 +1,112 @@
+import requestManage from './networkManage';
+
+const Network = {};
+const _request = wx.request;
+
+wx.onAppRoute(() => {
+ // 路由信息更新时，请求队列清空
+ requestManage.clear();
+});
+
+/**
+ * weDebug: weDebug 实例
+ * networkCallee: 网络请求方式
+ *
+ * @class NetworkPlugin
+ */
+class NetworkPlugin {
+ constructor(weDebug, options = {}) {
+ this.weDebug = weDebug;
+ this.networkCallee = options.networkCallee || ['request', 'downloadFile', 'uploadFile'];
+
+ this._store = {
+ infoRuleState: weDebug.createCache('__infoRuleState__')
+ };
+
+ this._proxyRule = null;
+ }
+
+ /**
+ * 创建界面
+ *
+ * @memberof NetworkPlugin
+ */
+ createUI() {
+ const that = this;
+ const { createFormRule, addFormRule } = that.weDebug;
+
+ // 创建网络环境规则表单
+ that._networkRule = createFormRule({
+ title: '调试抓包',
+ desc: '获取本页面所有请求的抓包信息',
+ type: 'button',
+ handler: {
+ bindTap() {
+ wx.setClipboardData({
+ data: JSON.stringify(requestManage.get())
+ });
+ }
+ }
+ });
+
+ // 添加表单到视图
+ addFormRule([that._networkRule]);
+ }
+ /**
+ * 劫持实现逻辑
+ *
+ * @returns
+ * @memberof NetworkPlugin
+ */
+ createProxy() {
+ this.networkCallee.forEach(method => {
+ Object.defineProperty(wx, method, {
+ get: () => (opt = {}) => this.proxyHandler(method, opt)
+ });
+ });
+ }
+
+ proxyHandler(method, opt = {}) {
+ const that = this;
+ const { isFunc } = that.weDebug.util;
+
+ let out = Object.assign({}, opt);
+
+ if (!out.header) {
+ out.header = {};
+ }
+
+ if (!out.data) {
+ out.data = {};
+ }
+
+ out.success = function (res) {
+ requestManage.add({
+ request: opt,
+ response: res
+ });
+
+ isFunc(opt.success) && opt.success.apply(this, arguments);
+ };
+
+ out.fail = function (err) {
+ requestManage.add({
+ request: opt,
+ response: err
+ });
+
+ isFunc(opt.fail) && opt.fail.apply(this, arguments);
+ };
+
+ return _request.call(this, out);
+ }
+}
+
+Network.install = function (weDebug, options = {}) {
+ const ins = new NetworkPlugin(weDebug, options);
+
+ ins.createUI();
+ ins.createProxy();
+};
+
+export default Network;

packages/plugin-network/src/networkManage.js

@@ -0,0 +1,25 @@
+// 请求队列管理
+const requestManage = {
+ _requestQueue: [],
+ get() {
+ return this._requestQueue;
+ },
+ add(task) {
+ this._requestQueue.push(task);
+ },
+ remove(task) {
+ let i = this._requestQueue.length;
+ while (i--) {
+ let tmp = this._requestQueue[i];
+ if (tmp === task) {
+ this._requestQueue.splice(i, 1);
+ break;
+ }
+ }
+ },
+ clear() {
+ this._requestQueue = [];
+ }
+};
+
+export default requestManage;