与面板通信

一般情况下,我们的交互模型是 "扩展进程" 为主,"面板" 为数据展示。对位传统 web 的话,就是 "插件" 功能是服务端,"面板" 功能是客户电脑上的浏览器。

这种情况下,一般不会有直接发送数据给面板的情况,有的大部分是一些状态的同步,使用 broadcast 广播即可。

但一些简单的扩展,或者需要浏览器环境的扩展,实际功能可能放在面板上,这时候就需要向面板上发送请求。

在看这章节前,需要对 消息系统 有一定程度的了解。

定义扩展上和面板的方法

首先我们定义一份 package.json:

{
    "name": "hello-world",
    "panels": {
        "default": {
            "title": "hw",
            "main": "./panel.js"
        }
    },
    "contributions": {
        "messages": {
            "console": {
                "methods": ["default.console"]
            }
        }
    }
}

messages.console 里的 methods 定义的方法名称是 default.console。表示发给 default 面板里的 console 方法。 (发送到插件进程的话,是直接填写 methodName)

然后定义面板的 panel.js 文件:

exports.template = '';
exports.style = '';

exports.methods = {
    console(str) {
        console.log(str);
    },
};

exports.ready = async function() {};

exports.close = function() {};

发送消息

当我们定义好扩展和扩展里的面板后,就可以尝试触发这些消息。

按下 ctrl(cmd) + shift + i 打开控制台。在控制台打开面板:

 // default 可以省略,如果面板名字是非 default,则需要填写 'hello-world.xxx'
 Editor.Panel.open('hello-world');
 // 向 hello-world 插件发送一个 console 消息
 Editor.Message.send('hello-world', 'console', 'log');

hello world 插件收到消息后,会转给 panel.js 里的 methods.console 进行处理。

所以会在控制台输出一个字符串 "log"

至此,我们完成了一次与面板的交互。

条与 "" 相匹配的结果

    没有与 "" 匹配的结果