调用vscode Extension以从Webview获取数据

Question

我有一个列表，该列表必须从扩展名返回到Webview页面的输入框。

就像Web视图中存在的javascript事件一样，它必须调用列表的扩展名，然后使用该列表对象并在视图中显示列表数据。 我该怎么做呢？

Answer 1

WebView类具有一种将消息发送到WebView内容的方法，以及一个从中接收消息的事件。 请参阅vscode文档中有关消息传递的章节。

在您的网络视图代码中，您可以通过以下方式接收消息：

        // Handle the message inside the webview
        window.addEventListener('message', event => {

            const message = event.data; // The JSON data our extension sent

            switch (message.command) {
                case 'refactor':
                    count = Math.ceil(count * 0.5);
                    counter.textContent = count;
                    break;
            }
        });

在扩展代码中，您可以像这样处理来自Webview内容的消息：

      // Handle messages from the webview
      panel.webview.onDidReceiveMessage(
        message => {
          switch (message.command) {
            case 'alert':
              vscode.window.showErrorMessage(message.text);
              return;
          }
        },
        undefined,
        context.subscriptions
      );

要将消息发送到扩展，您必须在Webview代码中获取vscode API：

        (function() {
            const vscode = acquireVsCodeApi();
            const counter = document.getElementById('lines-of-code-counter');

            let count = 0;
            setInterval(() => {
                counter.textContent = count++;

                // Alert the extension when our cat introduces a bug
                if (Math.random() < 0.001 * count) {
                    vscode.postMessage({
                        command: 'alert',
                        text: '🐛  on line ' + count
                    })
                }
            }, 100);
        }())

最后，从扩展程序向Webview内容发送消息非常简单：

currentPanel.webview.postMessage({ command: 'refactor' });