入门示例-扩展间通信

    • 怎么创建扩展
    • 怎么在扩展中定义菜单
    • 怎么在扩展中定义消息
    • 怎么在扩展中定义面板

    本文主要演示两个扩展之间如何通信,将涉及到三个话题:

    • 如何打开另一个扩展的面板
    • 如何向另一个扩展发送消息
    • 如何发送和监听广播消息

    有时候我们需要在自己写的扩展中打开另一个扩展,接下来我们就试着对 入门示例-菜单 中的扩展示例进行改造,使它可以打开 入门示例-面板

    修改后的 如下:

    我们修改了 contributions.menu,新增了 open other 菜单项,并且把此扩展的菜单都放到了 Develop/HelloWorld 下。 刷新扩展后,可以在顶部菜单栏找到如下图所示的菜单内容:

    contributions.messages 中,我们新增了一个 open-other 消息,并让 main.ts 里的 openOther 函数处理此消息。

    入门示例-面板 中的扩展名为 first-panel,因此我们使用 Editor.Panel.open('扩展名') 来打开它的默认面板,如下所示:

    1. Editor.Panel.open('first-panel');
    2. }

    点击 Develop -> HelloWorld -> open other 菜单项,即可以看到示例面板被打开。

    与其他扩展通信

    在上面的示例中, 我们在 hello-world 中通过 Editor.Panel.open('扩展名') 来打开 first-panel 的面板。 但如果我们是想做其他操作,这种方案就不行了。

    当一个扩展想要调用另一个扩展的功能时,可以通过以下函数向某个扩展发送消息来实现:

    1. Editor.Message.send(extensionName:string,messasge:string,...args:any[])

    每一个扩展的 contributions.messages 中定义的消息,默认都是可以对外的。在 first-panel 中我们找到了 消息,它用于打开自己的默认面板。为了简单起见,我们将 hello-worldmain.tsopenOther 函数改为如下内容:

    重新编译 hello-world 扩展并刷新后,再次点击 Develop -> HelloWorld -> open other 菜单项,可以看到 first-panel 的默认面板被打开了。

    广播通信

    当一个扩展想要向整个系统所有扩展通知某个事件完成的时候,可以通过以下函数广播一条消息来实现:

    1. Editor.Message.broadcast(message:string, ...args:any[])`

    接下来我们定义一个叫 first-panel:open 的广播消息,由 first-panel 扩展来广播,由 hello-world 扩展来监听。

    1. {
    2. "messages": {
    3. "log": {
    4. "methods": [
    5. "log"
    6. ]
    7. },
    8. "methods": [
    9. ]
    10. },
    11. "first-panel:open":{
    12. "methods": [
    13. "onFirstPanelOpen"
    14. ]
    15. }
    16. }
    17. }

    然后在 hello-worldmain.ts 增加如下处理函数:

    作为监听方的改造就完成了,接下来我们修改一下广播方 first-panel

    first-panel 项目的 src/panels/default/index.ts :ready 函数中加入如下广播消息代码:

      ready 函数会在 first-panel 的默认面板打开时调用,此时会对 first-panel:open 消息进行广播。

      分别编译并刷新两个扩展,再次点击 Develop -> HelloWorld -> open other 菜单项,除了可以看到示例面板被打开,还能在 Cocos Creator 的控制台窗口中看到如下打印:

      1. hello-world knows first-panel is open

      这就表示 hello-world 扩展收到了 扩展的广播消息。