CocosCreator编辑器扩展3-自定义一个简单的面板
我们写编辑器扩展一般都是想在主菜单里点击弹出一个面板，然后在面板里操作然后看到效果，那么我们继续跟着文档走看下定义一个简单的编辑器面板是什么样的。
首先我们在packages目录下面新建一个名为simple-package的文件夹，然后创建一个main.js和package.json,package.json内容如下：
"name": "simple-package",
"main": "main.js",
"main-menu": {
"Panel/Simple Panel": {
"message": "simple-package:open"
}
},
"panel": {
"main": "panel/index.js",
"type": "dockable",
"title": "Simple Panel",
"width": 400,
"height": 300
}
panel就是定义的面板在package里的描述。
注意type有两种：
dockable：可停靠面板，打开该面板后，可以通过拖拽面板标签到编辑器里，实现扩展面板嵌入到编辑器中。下面我们介绍的面板入口程序都是按照可停靠面板的要求声明的。
simple：简单 Web 面板，不可停靠到编辑器主窗口，相当于一份通用的 HTML 前端页面。详细情况请见 定义简单面板。
两种面板布局写法不一样，但是本质还都是一样的个人理解一个可以拖拽到引擎里，一个不可以，可能我说的不够清楚，自己理解吧，其实没啥卵用，看个人喜好那个都行。main的字段是panel的路径。接下来我们看下main.js
'use strict';
module.exports = {
load () {
},
unload () {
},
messages: {
open() {
Editor.Panel.open('simple-package');
},
},
};
入口程序在加载完成后收到一个open的消息，打开面板，参数就是包名,然后就是最重要的panel部分，我们在simple-package文件夹下面创建一个panel文件夹,然后在panel文件夹下创建一个index.js或者一个html文件都可以，例如：
// panel/index.js
Editor.Panel.extend({
style: `
:host { margin: 5px; }
h2 { color: #f90; }
`,
template: `
<h2>标准面板</h2>
<ui-button id="btn">点击</ui-button>
<hr />
<div>状态: <span id="label">--</span></div>
`,
$: {
btn: '#btn',
label: '#label',
},
ready () {
this.$btn.addEventListener('confirm', () => {
//面板按钮点击事件、按钮点击label会显示“你好”
this.$label.innerText = '你好';
setTimeout(() => {
this.$label.innerText = '--';
}, 500);
});
},
});
或者一个html文件也可以，例如：
<html>
<head>
<title>Simple Panel Window</title>
<meta charset="utf-8">
<style>
body {
margin: 10px;
}
h1 {
color: #f90
}
</style>
</head>
<body>
<h1>A simple panel window</h1>
<button id="btn">Send Message</button>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
Editor.log('on button clicked!');
});
</script>
</body>
</html>
至此就跟着文档完成了一个简单的自定义面板，点击panel下的simplepanel我们看下效果：
看到效果了吧，这个面版可以理解 为一个渲染进程，之后我们就可以进行进程之间的通信做一些我们想做的事情了，其中编辑器panel布局的地方我不在赘述，因为文档里面太多了，我说不完，只是先跑一个大概流程，然后想研究的小伙伴请去文档好好看看https://docs.cocos.com/creator/manual/zh/extension/writing-your-panel.html。