From 445556fdd8baf893b063d9e515d933a5e45e530d Mon Sep 17 00:00:00 2001
From: dlhandsome <505441575@qq.com>
Date: Mon, 13 Apr 2020 16:13:14 +0800
Subject: [PATCH] feat(plugin-network): network plugin support

---
 packages/plugin-network/.npmignore           |  11 ++
 packages/plugin-network/README.md            |  34 ++++++
 packages/plugin-network/package.json         |  16 +++
 packages/plugin-network/src/index.js         | 112 +++++++++++++++++++
 packages/plugin-network/src/networkManage.js |  25 +++++
 5 files changed, 198 insertions(+)
 create mode 100644 packages/plugin-network/.npmignore
 create mode 100644 packages/plugin-network/README.md
 create mode 100644 packages/plugin-network/package.json
 create mode 100644 packages/plugin-network/src/index.js
 create mode 100644 packages/plugin-network/src/networkManage.js

diff --git a/packages/plugin-network/.npmignore b/packages/plugin-network/.npmignore
new file mode 100644
index 0000000..8cb4a70
--- /dev/null
+++ b/packages/plugin-network/.npmignore
@@ -0,0 +1,11 @@
+.DS_Store
+.idea
+.vscode
+node_modules
+
+snippet
+src
+typings
+.gitignore
+gulpfile.js
+tsconfig.json
\ No newline at end of file
diff --git a/packages/plugin-network/README.md b/packages/plugin-network/README.md
new file mode 100644
index 0000000..108818a
--- /dev/null
+++ b/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()
+```
diff --git a/packages/plugin-network/package.json b/packages/plugin-network/package.json
new file mode 100644
index 0000000..5afdc5e
--- /dev/null
+++ b/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"
+}
diff --git a/packages/plugin-network/src/index.js b/packages/plugin-network/src/index.js
new file mode 100644
index 0000000..c900967
--- /dev/null
+++ b/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;
diff --git a/packages/plugin-network/src/networkManage.js b/packages/plugin-network/src/networkManage.js
new file mode 100644
index 0000000..9d8c47f
--- /dev/null
+++ b/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;