入门示例-面板

在文档 入门示例-菜单 中讲解了怎么创建一个最简单的扩展,接下来我们看看如何创建一个面板并与之通信。

通过模板创建

在 Cocos Creator 中创建面板最快捷的方式是通过 包含面板的扩展模板 创建,如下图所示:

extension-first-panel-create

点击 创建扩展 按钮后,可以在项目根目录下找到 extensions/first-panel 扩展。

编译、安装

在命令行工具中,定位到 extensions/first-panel 目录,并执行以下语句:

  1. npm install
  2. npm run build

命令执行完成后,回到 扩展管理器 中,找到 first-panel 扩展,启用并刷新,如下图所示:

extension-first-panel-enable

查看面板

启用并刷新扩展后,可以在 面板(Panel) 菜单中找到如下图所示的菜单项:

extension-first-panel-menu

点击 默认面板(Default panel) 菜单项,即可弹出如下所示面板:

extension-first-panel

本示例还在 开发者(Developer) 菜单中定义了另一个用于通信的菜单项,如下图所示:

extension-first-panel-sendmsg

点击上图中红色方框所示的 发送消息给面板(Send message to Default Panel) 按钮后,可以看到面板上显示的内容会发生改变。

注意:如果没有显示该菜单,请打开 扩展管理器 面板,并确认该扩展已启用。

enable-first-panel

面板讲解

接下来,我们逐一讲解面板目录结构、定义与通信机制。

面板目录结构

在项目所在目录,找到 ./extensions/first-panel 文件夹,即可以总览整个扩展的目录:

extension-first-panel-folder

如上图所示,比 hello-world 多出了 staticpanels目录。

static - 用于存放面板布局文件,如 css\html 等。

panels - 用于存放面板相关的源代码,每一个面板有一个 index.ts 入口源文件。

index.tsstyletemplate 请参考文档 编写面板

描述文件 package.json

在理解面板之前,我们先看看 package.json 中,面板相关的定义,如下所示:

  1. {
  2. "package_version": 2,
  3. "version": "1.0.0",
  4. "name": "first-panel",
  5. "description": "i18n:first-panel.description",
  6. "main": "./dist/main.js",
  7. "dependencies": {
  8. "fs-extra": "^10.0.0"
  9. },
  10. "devDependencies": {
  11. "@types/node": "^16.0.1",
  12. "@types/fs-extra": "^9.0.5",
  13. "typescript": "^4.3.4"
  14. },
  15. "panels": {
  16. "default": {
  17. "title": "first-panel Default Panel",
  18. "type": "dockable",
  19. "main": "dist/panels/default",
  20. "size": {
  21. "min-width": 400,
  22. "min-height": 300,
  23. "width": 1024,
  24. "height": 600
  25. }
  26. }
  27. },
  28. "contributions": {
  29. "menu": [
  30. {
  31. "path": "i18n:menu.panel/first-panel",
  32. "label": "i18n:first-panel.open_panel",
  33. "message": "open-panel"
  34. },
  35. {
  36. "path": "i18n:menu.develop/first-panel",
  37. "label": "i18n:first-panel.send_to_panel",
  38. "message": "send-to-panel"
  39. }
  40. ],
  41. "messages": {
  42. "open-panel": {
  43. "methods": [
  44. "openPanel"
  45. ]
  46. },
  47. "send-to-panel": {
  48. "methods": [
  49. "default.hello"
  50. ]
  51. }
  52. }
  53. },
  54. "author": "Cocos Creator",
  55. "editor": ">=3.4.2",
  56. "scripts": {
  57. "build": "tsc -b",
  58. "watch": "tsc -w"
  59. }
  60. }

panels:{} - 本扩展中定义的面板

  • default:String - 定义了一个名为 default 的面板
    • title:String - 面板标题
    • type:String - 面板类型
    • main:String - 面板源码目录
    • size:{} - 大小信息
      • min-width:Number - 最小宽度
      • min-height:Number - 最小高度
      • width:Number - 面板默认宽度
      • height:Number - 面板默认高度

更多阅读

panel 详细的面板讲解,请参考文档 面板系统

i18n 为多语言配置,请参考文档 多语言系统(i18n)

messages 完整的消息定义机制,请参考文档 自定义消息