扩展面板

在实现一个功能的同时，很可能需要界面上的 UI 交互，Cocos Creator 3.0 也提供了扩展功能。

在扩展里声明面板

在 package.json 里可以定义 panels 字段：

  1. {
  2.     "name": "hello-world",
  3.     "panels": {
  4.         "default": {
  5.             "title": "world panel",
  6.             "type": "dockable",
  7.             "main": "./panels/default.js",
  8.             "icon": "./static/default.png"
  9.         },
  10.         "list": {
  11.             "title": "world list",
  12.             "type": "simple",
  13.             "main": "./panels/list.js",
  14.             "icon": "./static/list.png",
  16.             "flags": {},
  17.             "size": {}
  18.         }
  19.     }
  20. }

这个字段是个 object，定义如下：

  1. // panels 定义
  2. interface PanelMap {
  3.     [name: string]: PanelInfo;
  4. }
  6. // 每个 panel 的定义
  7. interface PanelInfo {
  8.     // 面板标题，支持 i18n:key 格式
  9.     title: string;
  10.     // 面板入口，一个相对路径
  11.     main: string;
  12.     // 面板图标，一个相对路径
  13.     icon?: string;
  14.     // 面板类型，默认 dockable
  15.     type?: 'dockable' | 'simple';
  17.     flags?: PanelFlags;
  18.     size?: PanelSize;
  19. }
  21. // panel 里的一些标记
  22. interface PanelFlags {
  23.     // 是否允许缩放，默认 true
  24.     resizable?: boolean;
  25.     // 是否需要保存，默认 false
  26.     save?: boolean;
  27.     // 所在窗口是否在最上方显示
  28.     alwaysOnTop?: boolean;
  29. }
  31. // panel 的一些尺寸限制
  32. interface PanelSize {
  33.     width?: number;
  34.     height?: number;
  35.     'min-width'?: number;
  36.     'min-height'?: number;
  37. }

编写面板

上面我们注册的时候定义了 panel 入口文件 panels/default.js：

  1. 'use strict';
  3. // 监听面板事件
  4. exports.listeners = {
  5.     // 面板显示的时候触发的钩子
  6.     show() {},
  7.     // 面板隐藏的时候触发的钩子
  8.     hide() {},
  9. };
  11. // 面板的内容
  12. exports.template = '<div>Hello</div>';
  13. // 面板上的样式
  14. exports.style = 'div { color: yellow; }';
  15. // 快捷选择器
  16. exports.$ = {
  17.     elem: 'div',
  18. };
  20. // 面板启动后触发的钩子函数
  21. exports.ready = function() {
  22.     this.$.elem.innerHTML = 'Hello World';
  23. };
  25. // 面板准备关闭的时候会触发的函数，return false 的话，会终止关闭面板
  26. exports.beforeClose = function() {};
  28. // 面板关闭后的钩子函数
  29. exports.close = function() {};

另外我们还定义了一个 list 面板，也需要按照上面的格式编写一个 list.js 文件。