入门示例-扩展间通信
在前面两篇文档 入门示例-菜单 和 入门示例-面板 中,我们介绍了:
- 怎么创建扩展
- 怎么在扩展中定义菜单
- 怎么在扩展中定义消息
- 怎么在扩展中定义面板
本文主要演示两个扩展之间如何通信,将涉及到三个话题:
- 如何打开另一个扩展的面板
- 如何向另一个扩展发送消息
- 如何发送和监听广播消息
打开另一个扩展的面板
有时候我们需要在自己写的扩展中打开另一个扩展,接下来我们就试着对 入门示例-菜单 中的扩展示例进行改造,使它可以打开 入门示例-面板。
修改后的 package.json
如下:
{
"package_version": 2,
"version": "1.0.0",
"name": "hello-world",
...
"contributions": {
"menu": [
{
"path": "Develop/HelloWorld",
"label": "test",
"message": "log"
},
{
"path": "Develop/HelloWorld",
"label": "open other",
"message": "open-other"
}
],
"messages": {
"log": {
"methods": [
"log"
]
},
"open-other": {
"methods": [
"openOther"
]
}
}
}
}
我们修改了 contributions.menu
,新增了 open other
菜单项,并且把此扩展的菜单都放到了 Develop/HelloWorld 下。 刷新扩展后,可以在顶部菜单栏找到如下图所示的菜单内容:
在 contributions.messages
中,我们新增了一个 open-other
消息,并让 main.ts
里的 openOther
函数处理此消息。
入门示例-面板 中的扩展名为 first-panel
,因此我们使用 Editor.Panel.open('扩展名')
来打开它的默认面板,如下所示:
openOther(){
Editor.Panel.open('first-panel');
}
在 hello-world
根目录执行 npm run build
命令后,前往 扩展管理列表 刷新 hello-world
扩展。
点击 Develop -> HelloWorld -> open other 菜单项,即可以看到示例面板被打开。
与其他扩展通信
定向通信
在上面的示例中, 我们在 hello-world
中通过 Editor.Panel.open('扩展名')
来打开 first-panel
的面板。 但如果我们是想做其他操作,这种方案就不行了。
当一个扩展想要调用另一个扩展的功能时,可以通过以下函数向某个扩展发送消息来实现:
Editor.Message.send(extensionName:string,messasge:string,...args:any[])
每一个扩展的 contributions.messages
中定义的消息,默认都是可以对外的。在 first-panel
中我们找到了 open-panel
消息,它用于打开自己的默认面板。为了简单起见,我们将 hello-world
中 main.ts
的 openOther
函数改为如下内容:
openOther(){
Editor.Message.send('first-panel','open-panel');
}
重新编译 hello-world
扩展并刷新后,再次点击 Develop -> HelloWorld -> open other 菜单项,可以看到 first-panel
的默认面板被打开了。
广播通信
当一个扩展想要向整个系统所有扩展通知某个事件完成的时候,可以通过以下函数广播一条消息来实现:
Editor.Message.broadcast(message:string, ...args:any[])`
接下来我们定义一个叫 first-panel:open
的广播消息,由 first-panel
扩展来广播,由 hello-world
扩展来监听。
在 hello-world
中,我们新增一个消息监听,并指定处理函数,修改后的 contributions.messages
如下:
{
"messages": {
"log": {
"methods": [
"log"
]
},
"open-other": {
"methods": [
"openOther"
]
},
"first-panel:open":{
"methods": [
"onFirstPanelOpen"
]
}
}
}
然后在 hello-world
的 main.ts
增加如下处理函数:
onFirstPanelOpen(){
console.log("hello-world knows first-panel is open");
}
作为监听方的改造就完成了,接下来我们修改一下广播方 first-panel
。
在 first-panel
项目的 src/panels/default/index.ts :ready
函数中加入如下广播消息代码:
Editor.Message.broadcast("first-panel:open");
ready
函数会在 first-panel
的默认面板打开时调用,此时会对 first-panel:open
消息进行广播。
注意:广播方也可以在 messages 中监听自己的广播消息,但通常没必要。
分别编译并刷新两个扩展,再次点击 Develop -> HelloWorld -> open other 菜单项,除了可以看到示例面板被打开,还能在 Cocos Creator 的控制台窗口中看到如下打印:
hello-world knows first-panel is open
这就表示 hello-world
扩展收到了 first-panel
扩展的广播消息。
更多消息相关的详细内容请参考文档 消息系统。