CocosCreator插件-初探编辑器扩展
作者：互联网
相关内容来源：
Cocos扩展编辑器文档：https://docs.cocos.com/creator/manual/zh/extension/
1、创建第一个拓展包
在cocos编辑器内点击 扩展->创建新扩展插件->全局扩展
在弹出窗口中输入文件名（插件包名）这里我取名test_plugin，点击创建扩展包；之后再控制台中看到log信息，即表示拓展包创建成功，并成功加载到编辑器
这时再点击扩展按钮就可以看到刚创建的插件已经被加载并可以使用了
2、查看插件模板内容
全局插件安装路径是：
Windows 为 C:\Users\${你的用户名}\.CocosCreator\packages
项目专用插件安装路径是：
${你的项目路径}/packages
找到文件夹位置，我们发现插件主要有main.js，package.json，和panel文件夹里的index.js组成；我们将这三个文件用编译器打开，挨个查看一下都有什么内容：
package.json:
package.json文件描述了插件的用途，cocos通过它知道这个插件扩展的是什么内容
里面内容的解释：
name：定义了插件的名字
version：插件的版本
description：插件的描述信息
author：插件的作者
main：入口程序 ————>指向的main.js
main-menu：主菜单
panel：定义了一个面板，这个面板主要是面向使用、用来交互的作用；
main：指向了panel/index.js文件；index.js决定了面板的样式和交互逻辑
type：面板的样式；有dockable和simple两种可选；
dockable：可停靠面板，打开该面板后，可以通过拖拽面板标签到编 辑器里，实现扩展面板嵌入到编辑器中。
simple：简单 Web 面板，不可停靠到编辑器主窗口，相当于一份通用的 HTML 前端页面。
title：面板标题
width、height：面板宽高
在main-menu里的内容：
给插件生成了两个扩展菜单open和hello,分别执行了main.js里的两个ipc消息，可以认为是两个方法，打开main.js入口程序查看一下ipc消息的内容：
main.js:
这里看出main.js里注册了三个ipc消息，
'open' 消息—>执行了Editor.Panel.open('test-plugin');
Editor.Panel.open方法是在cocos编辑器中打开一个面板，传入面板ID：'test-plugin'
测试一下；点击open按钮，弹出面板
'say-hello'消息—>执行Editor.log()；此方法是在cocos编辑器控制台中输出信息
Editor.Ipc.sendToPanel();Editor.Ipc是cocos对IPC进行的一层封装，扩展了主进程（main.js）和渲染进程(index.js)之间消息收发的方法；
详细内容：https://docs.cocos.com/creator/manual/zh/extension/introduction-to-ipc.html
index.js:
Editor.Panel.extend() 接口传入的参数是一个包括特定字段的对象，用来描述整个面板的外观和功能。
在这份对象代码中，定义了面板的样式（style）和模板（template），并通过定义选择器 $ 获得面板元素，最后在 ready 初始化回调函数中中对面板元素的事件进行注册和处理。
通过在主进程（入口程序）调用 Editor.Panel.open('simple-package') 激活我们的面板窗口。
代码中$：{}定义了两个面板元素 btn-按钮和label-标签
在ready中给btn按钮添加了监听事件：Editor.Ipc.sendToMain()；此方法通过ipc给主进程main.js传送'test_plugin:clicked'消息和对应参数；
IPC工作流程详细内容：
https://docs.cocos.com/creator/manual/zh/extension/ipc-workflow.html
点击面板中sendToMain按钮
主程序中接收到'test_plugin:clicked'消息，然后执行了Editor.log('Button Clicked')方法
执行结果：
3、总结
个人目前认为编辑器扩展是个对技术栈要求比较广且比较玄学的东西（主要文档API有时候看不懂，希望cocos官方能更新），个人也是初学者，很多相关知识都不太懂，也是在学习的路上。。。
插件开发技能树：（下图来源于许彦峰大佬，也感谢大佬提供的帮助）
Web基础和nodejs npm的知识（稍有了解
）；Electron（目前完全不懂
）。
不过值得高兴的是，通过一段时间的摸索，踩了一些小坑（也是还没资格遇到大坑
）；自己也做出了第一款插件，功能比较单一、简单；算是稍有进步吧~
图文预告：CocosCreator插件-编写插件进行项目文件的替换和删除
———————————————————————————————
更多内容：
CocosCreator小技巧-修改TypeScript默认模板
标签：插件,面板,cocos,js,CocosCreator,编辑器,Editor,main 来源： https://blog.csdn.net/qq_39014369/article/details/114782658