调用 vscode 扩展从 webview 获取数据

Question

我有一个列表，必须从扩展程序返回到我的 webview 页面的输入框。

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

Answer 1

WebView 类有一个向 WebView 内容发送消息的方法和一个从中接收消息的事件。请参阅vscode 文档中有关消息传递的章节。

在您的 webview 代码中，您可以通过以下方式接收消息：

        // 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' });