移动端--自定义vConsole插件

依据鹅厂开源的移动端调试工具vConsole，进行二次开发，加入一些小功能，方便调试。

在vConsole插件中自开发，先确定需要开发的功能种类，对面板的划分有一个大致方向。

步骤

1. 准备工作

第一步：下载源码

github地址：github.com/Tencent/vCo…

第二步：项目启动

yarn
yarn run dev

2. 开发项目

第一步：新增面板

1、在dev\plugin.html，新增一个newTabRouter函数

function newTabRouter() {
}

2、实例化插件

var tab = new VConsole.VConsolePlugin('tab6', 'Tab6');

• tab6 为插件id，必填字段，唯一，不能与其它插件冲突
• Tab6 为插件name，可选字段，展示为面板的名字

3、绑定插件事件

tab
  .on('renderTab', function(callback) {
    var html = '<div>Click the tool button below!</div>';
    callback(html);
  })
  .on('addTool', function(callback) {
    var button = {
      name: 'Reload',
      onClick: function(event) {
        location.reload();
      }
    };
    callback([button]);
  });
  

注意：插件初始化过程中，就会触发renderTab事件。若不绑定renderTab，那么 vConsole 就不会添加新 tab。

4、添加到 vConsole

vConsole.addPlugin(tab);

第二步：页面展示

1、在src目录下新建一个文件夹（router），用来存放面板的显示内容

2、在新建的文件夹下新建路由文件router.js，页面tabbox.html 文件结构如下：

3、引入插件编写工具。在router.js中添加：

import VConsolePlugin from "../lib/plugin.js";
import tplTabbox from "./tabbox.html";

import * as tool from "../lib/tool.js";
import $ from "../lib/query.js";

class VConsoleRouterTab extends VConsolePlugin {
  constructor(...args) {
    super(...args);

    this.$tabbox = $.render(tplTabbox, {});
  }

export default VConsoleRouterTab;

4、编写html结构：

<div class="vc-table">
  <div class="vc-log"></div>
  <div class="vc-cmd vc-filter">
    <button class="vc-cmd-btn vc-cmd-btn-refresh" type="button">Refresh</button>
    <span class="vc-cmd-span"></span>
  </div>
</div>

5、在core.js中，引入新建的路由，

import VConsoleRouterPlugin from '../router/router.js';

this.option = {
  defaultPlugins: ['system', 'network', 'element', 'storage', 'router']
};

const plugins = {
  'system': {proto: VConsoleSystemPlugin, name: 'System'},
  'network': {proto: VConsoleNetworkPlugin, name: 'Network'},
  'element': {proto: VConsoleElementPlugin, name: 'Element'},
  'storage': {proto: VConsoleStoragePlugin, name: 'Storage'},
  'router': {proto: VConsoleRouterPlugin, name: 'Router'},
};

6、编写页面功能。

onRenderTab(callback) {
    callback(this.$tabbox);
  }

onAddTool(callback) {    // 添加前进、后退两个按钮
    let toolList = [
      {
        name: "Back",
        global: false,
        onClick: function (event) {
          history.back(-1);
        },
      },
      {
        name: "Forward",
        global: false,
        onClick: function (event) {
          history.forward();
        },
      },
    ];
    callback(toolList);
}

onReady() {
    const that = this;
    that.isReady = true;

    let $refreshTab = $.one('.vc-cmd-btn-refresh', this.$tabbox);    //  为Refresh按钮绑定刷新事件
    $.bind($refreshTab, 'click', function (e) {
        e.preventDefault();
        location.reload();
    });
}

onShow() {
this.renderRouter();
}

//  展示页面路径
renderRouter() { 
let $url = $.one('.vc-cmd-span', this.$tabbox);    
$url.innerHTML = location.href;
}

第三步：打包部署

项目只有在运行build之后才会在浏览器中有变化。

项目打包后的文件是vconsole.min.js。

需要使用到的时候只需要引入min.js文件即可。