第一次数据交互

我们在前面两篇文档 第一个扩展包 和 第一个面板 中介绍了怎么创建扩展，怎么在扩展中定义面板，接下来我们通过本篇文档来尝试一下它们之间的互相通讯。

在描述文件 package.json 内定义消息

首先我们需要在 contributions.messages 中增加一条消息 "increasing"，交给 browser 处理。再增加一条 "hello-world:increasing" 消息，交给 default 面板处理：

  1. {
  2.     "name": "hello-world",
  3.     "version": "1.0.0",
  4.     "main": "./browser.js",
  5.     "description": "一份简单的扩展",
  6.     "panels": {
  7.         "default": {
  8.             "title": "simple panel",
  9.             "main": "./panels/default.js"
  10.         }
  11.     },
  12.     "contributions": {
  13.         "menu": [
  14.             {
  15.                 "path": "Develop",
  16.                 "label": "test",
  17.                 "message": "log"
  18.             }, {
  19.                 "path": "i18n:menu.panel/Custom",
  20.                 "label": "Open Hello World",
  21.                 "message": "open-panel"
  22.             }
  23.         ],
  24.         "messages": {
  25.             "log": {
  26.                 "methods": ["log"]
  27.             },
  28.             "open-panel": {
  29.                 "methods": ["openPanel"]
  30.             },
  31.             "increasing": {
  32.                 "methods": ["increasing"]
  33.             },
  34.             "query-num": {
  35.                 "methods": ["queryNum"]
  36.             },
  37.             "hello-world:increasing": {
  38.                 "methods": ["default.increasing"]
  39.             }
  40.         }
  41.     }
  42. }

hello-world:increasing 是指我们监听了一个 hello-world 上的 increasing 消息。”default.increasing” 指的是交给 default 面板的 “increasing” 方法处理。

panel 字段含义可以参考 编写面板。

在 browser.js 里增加 increasing

然后需要在 browser.js 的 methods 中新增一个 increasing 方法，负责记录一个 num，并在每次触发的时候递增并广播出去：

  1. 'use strict';
  3. let num = 0;
  4. // 扩展内定义的方法
  5. exports.methods = {
  6.     log() {
  7.         console.log('Hello World');
  8.     },
  9.     openPanel() {
  10.         Editor.Panel.open('hello-world');
  11.     },
  12.     queryNum() {
  13.         return num;
  14.     },
  15.     increasing() {
  16.         num++;
  17.         Editor.Message.broadcast('hello-world:increasing', num);
  18.     },
  19. };
  21. // 当扩展被启动的时候执行
  22. exports.load = function() {};
  24. // 当扩展被关闭的时候执行
  25. exports.unload = function() {};

在 panel 里增加 increasing 按钮以及广播处理

接下来在界面上增加一个 increasing 按钮，以及展示 num 的区域和接受 num 变化的广播消息：

  1. 'use strict';
  3. // 面板的内容
  4. exports.template = `
  5. <div>Hello</div>
  6. <div><ui-button>increasing</ui-button></div>
  7. <div><span>Num: </span><span class="num">-</span></div>
  8. `;
  10. // 面板上的样式
  11. exports.style = 'div { color: yellow; }';
  13. // 快捷选择器
  14. exports.$ = {
  15.     elem: 'div',
  16.     button: 'ui-button',
  17.     num: '.num',
  18. };
  20. exports.methods = {
  21.     increasing(num) {
  22.         this.$.num.innerHTML = num;
  23.     },
  24. };
  26. // 面板启动后触发的钩子函数
  27. exports.ready = async function() {
  28.     this.$.elem.innerHTML = 'Hello World';
  30.     this.$.button.addEventListener('confirm', () => {
  31.         Editor.Message.send('hello-world', 'increasing');
  32.     });
  34.     this.$.num.innerHTML = await Editor.Message.request('hello-world', 'query-num');
  35. };
  37. // 面板关闭后的钩子函数
  38. exports.close = function() {};

刷新扩展

以上修改完成并保存后，再次打开 Cocos Creator，找到并打开顶部菜单栏中的 扩展 -> 扩展管理器，在面板上选择扩展位置（全局 或者 项目）。然后找到对应插件并点击刷新按钮，Creator 便会重新加载插件内容使之生效。

然后便可以在顶部菜单栏的 面板 -> Custom 中看到新增了 Open Hello World 选项，点击即可打开。