标签：插件 面板 cocos js CocosCreator 编辑器 Editor main
相关内容来源：
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。