2.4 使用 Webview

WebView提供了自定义的视图能力，可以构建复杂的用户交互界面。

创建 Webview

const panel = window.createWebviewPanel(
    'libraryView', // Id
    intl.get('libraryView'), // 面板标题
    ViewColumn.Beside, // 指定 WebView 的编辑器视图
    {
      enableScripts: true, // 启用 javascript 脚本
      retainContextWhenHidden: true, // 隐藏时保存 WebView 状态
    }
);

设置 html 内容

const htmlcontent = getWebViewContent(context, 'view/material/material.html');
panel.webview.html = htmlcontent;

通信

插件与 Webview 间的通信依靠消息监听实现。

插件：

panel.webview.onDidReceiveMessage(async (message: any) => {

    // 判断 WebView 状态
    if (message.ready) {
      panel.webview.postMessage({
        warehouse: config,
        intl: intl.getAll(),
        library: blockList,
      });

      changeLibrary(blockList[0], intl);

      progress.report({ increment: 100, message: intl.get('libraryViewReady') });
    }


    if (message.blockSelected) {
        ....
    }
}, undefined, context.subscriptions);

Webview：

vscode.postMessage({ ready: true });

window.addEventListener('message', (event) => {
    if (message.library) {
        ....
    }
}