cocos 扩展插件的制作

Posted 2022-01-27 暮志未晚Webgl

在cocos里面创建一个新的扩展，会生成两个文件，一个是package.json 和 browser.js 。json文件就是来写配置的，里面主要是配置当前的扩展如何打开，以及扩展的一些名称，描述，版本限制，作者，以及事件触发js文件，默认就是那个browser.js。
最重要的还是contributions配置，里面两个属性是menu和messages两个，两个属性参数都是数组对象，代表我们可以定义多个列表按钮，以及多个事件。
menu里面定义的是扩展触发的按钮，一般情况下，扩展的使用基本上都是需要我们主动触发，然后生成一个面板进行操作，所以，我们需要一个位置，在menu属性里面，有一个path属性，就是定义在编辑器的菜单栏的名称，另一个label就是显示的按钮名称，message的值就是在messages里面对应的属性的值。
点击按钮以后，就会触发在messages里面相应属性的配置项的内容，这个消息如果将public属性设置为true，那就不单单只可以通过menu按钮触发了，其它消息也可以触发它。设置public为true，编辑器在顶部菜单 “开发者” - “消息列表” 里，预置了一个消息管理面板，面板里可以显示每个功能定义的公开消息及其说明。里面还会显示你设置的名字，文档以及描述相关内容，如果触发此消息，那么，你在methods里面设置的事件也将被触发，这个事件在定义的browser.js的exports.methods对象内书写。

package里面还有一个重要的属性，就是panels属性，这个属性值是一个对象类型，以键值对的形式，key代表面板的名字，value代表面板的配置。面板的配置属性有：

title:面板的标题
main: 面板的入口文件
icon：面板的图标
type：面板的类型 dockable代表面板可以停靠在ide内，simple代表不行
size:  是面板尺寸，可以填固定宽高和最小宽高
flags：有两个属性，resizable是限制面板尺寸后，用户是否还可以修改面板尺寸，true为是。save是否需要保存修改后的尺寸。

既然每个面板都有一个主入口文件，那么，我们面板的显示内容都是从这个入口内设置书写。注意要和主配置的入口文件分开，主配置的入口文件里面主要和触发的事件相关，以及整个扩展的生命周期。而面板只是针对于面板的。

面板的主入口文件配置
官方提供了默认的文件内容：

'use strict';

// 面板的内容
exports.template = '<div>Hello</div>';

// 面板上的样式
exports.style = 'div  color: yellow; ';

// 快捷选择器
exports.$ = 
    elem: 'div',
;

// 面板上的方法
exports.methods = ;
// 面板上触发的事件
exports.listeners = 
    /**
     * 面板隐藏的时候触发
     */
    hide() 
        console.log(this.hidden);
    ,
    /**
     * 面板显示的时候触发
     */
    show() 
        console.log(this.hidden);
    ,
    /**
     * 面板大小更改的时候触发
     */
    resize() 
        console.log(this.clientHeight);
        console.log(this.clientWidth);
    ,
;

// 面板启动后触发的钩子函数
exports.ready = function() 
    this.$.elem.innerhtml = 'Hello World';
;

// 尝试关闭面板的时候触发
exports.beforeClose = async function() ;
// 当面板实际关闭后触发
exports.close = async function() ;

在这里，熟悉web前端的朋友们应该可以明白，其实面板就是编写前端页面的过程，html+css+js一条龙服务。

这里重要的是，对外事件必须要写到methods里面，那么能够使用的事件去哪里找呢，可以编辑器面板里面找到开发者，里面有个Export.d.ts，点击可以选择一个文件夹导出所有编辑器包含的内部方法，里面找到editor文件夹，里面就是所有可以使用的方法，随便打开一个文件，比如panel文件夹下面的index.d.ts，里面的文件内容是：

export declare const Panel: 
    _kitControl: any;
    /**
     * 打开一个面板
     * Open up a panel
     *
     * @param name
     * @param args
     */
    open(name: string, ...args: any[]): any;
    /**
     * 关闭一个面板
     * Close a panel
     *
     * @param name
     */
    close(name: string): any;
    /**
     * 将焦点传递给一个面板
     * Pass focus to a panel
     *
     * @param name
     */
    focus(name: string): any;
    /**
     * 检查面板是否已经打开
     * Check that the panel is open
     *
     * @param name
     */
    has(name: string): Promise<boolean>;
    /**
     * 查询当前窗口里某个面板里的元素列表
     * @param name
     * @param selector
     */
    querySelector(name: string, selector: string): Promise<any>;
;

这是一个调用panel的一个方法，如果我们在panel里面关闭外部的某个panel，就可以：

Editor.Panel.open('面板名称', '额外配置');

面板的内容和样式是通过html和css实现的，所以，我们可以将其内容额外的写到单独的文件夹内，通过nodejs的文件获取方法，来获取相应的文件内容并设置。
假设我们将html文件放到面板主入口文件的文件夹内，命名为main.html，将css内容创建一个main.css文件，我们可以通过以下方法去获取：

const fs = require("fs");


// 面板的内容
exports.template = fs.readFileSync(__dirname + "/main.html", "utf8");

// 面板上的样式
exports.style = fs.readFileSync(__dirname + "/main.css", "utf8");