浅谈VSCode中Webview的使用方法-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下VSCode中Webview的使用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

其实VSCode也是基于electron框架的桌面软件，也就是说，你在VSCode里看到的所有的界面本就是网页。那在网页里再显示网页怎么做？相信你也想到了，就是iframe。【推荐学习：《vscode教程》】

调试Webview

在VSCode命令面板中，输入Open Webview Developer Tools 后可以打开Webview的控制台

果然是iframe~

你的插件必须用Webview吗？

官方英文文档地址：https://code.visualstudio.com/api/extension-guides/webview

VSCode官方团队希望插件开发者好好思考如下问题：

这个功能真的需要在VS Code中使用吗？作为单独的应用程序或网站会更好吗？
使用Webview是实现功能的唯一方法吗？您可以改用常规的VS Code API吗？

创建WebviewPanel

const panel = vscode.window.createWebviewPanel(
  'webview',
  "测试webview",
  vscode.ViewColumn.One
);
panel.webview.html = `<html><body>你好，我是Webview</body></html>`

这样就能创建一个Webview，渲染html内容。

看上去使用很简单对不对，但在实际使用Webview进行插件开发的过程中，还是遇到了不少坑的：

1号坑：使用本地资源

在VSCode中的Webview无法直接使用相对路径的本地资源。比如下面这段代码，我们引入了一个css，一个js，在body中有一张图片。

直接这样写是无法加载到这些资源的

解决方法1

通过一个特殊的协议头vscode-resource:资源文件绝对路径，为了不影响咱们正常进行网页开发，我们可以封装一个方法，从本地文件读取html内容，统一替换所有资源的路径后再赋值给panel.webview.html

function getWebViewContent(context, templatePath) {
    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;
}