vscode插件：WebView的使用

JiaoXin2005 1/14/2022 VSCode

# webview 是什么

在 vscode 中。webview 使用 iframe 实现，用于加载用户指定的 html 内容。官方文档地址 (opens new window)

# 使用

const panel = vscode.window.createWebviewPanel(
  "webview",
  "测试webview的title",
  vscode.ViewColumn.One
);
panel.webview.html = `<html><body>Hello World</body></html>`;

1
2
3
4
5
6

在 vscode 渲染如下:

# 需要注意的地方

使用本地资源的不能写相对路径。（或者改成 https 的协议访问资源）

使用 vscode-resource 将地址修改一下。

function getWebViewContent(
  context: vscode.ExtensionContext,
  templatePath: string
) {
  const resourcePath = path.join(context.extensionPath, templatePath);
  const dirPath = path.dirname(resourcePath);
  let html = fs.readFileSync(resourcePath, "utf-8");
  html = html.replace(
    /(<link.+?href="|<script.+?src="|<iframe.+?src="|<img.+?src=")(.+?)"/g,
    (_m, $1, $2) => {
      if ($2.indexOf("https://") < 0)
        return (
          $1 +
          vscode.Uri.file(path.resolve(dirPath, $2))
            .with({ scheme: "vscode-resource" })
            .toString() +
          '"'
        );
      else return $1 + $2 + '"';
    }
  );
  return html;
}

/* 这样使用 */
webviewPanel.webview.html = getWebViewContent(context, "view_dist/index.html");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

开启 JavaScript 的功能

const panel = vscode.window.createWebviewPanel(
  "webview",
  "测试webview的title",
  vscode.ViewColumn.One,
  {
    enableScripts: true,
  }
);

1
2
3
4
5
6
7
8

webview 的内容不销毁，后台常驻。

const panel = vscode.window.createWebviewPanel(
  "webview",
  "测试webview的title",
  vscode.ViewColumn.One,
  {
    retainContextWhenHidden: true,
  }
);

1
2
3
4
5
6
7
8

# 消息通讯 - postMessage

插件发消息，Webview 接收消息

插件里的 JS

panel.webview.postMessage({ msg: "im message from extensions" });

Webview 里的 JS

window.addEventListener("message", function(e) {
  console.log(e.data.msg);
});

1
2
3

Webview 发送消息，插件接受消息

Webview 里的 JS

// 注意这里的acquireVsCodeApi只能执行一次，后续要持有vscode的引用通讯
var vscode = acquireVsCodeApi();
vscode.postMessage({
  msg: "im message from webview~~~",
});

1
2
3
4
5

插件里的 JS

panel.webview.onDidReceiveMessage(function(data) {
  console.log(data.msg);
});

1
2
3

JiaoXin2005的博客

Choose mode

vscode插件：WebView的使用

vscode插件：WebView的使用

# webview 是什么

# 使用

# 需要注意的地方

# 消息通讯 - postMessage