🐱 个人主页：不叫猫先生 ，公众号：前端舵手

🙋‍♂️ 作者简介：前端领域优质作者、阿里云专家博主，共同学习共同进步，一起加油呀！

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼(文末有我wx或者私信)

前言

Webview API 允许扩展在 VS Code 中创建完全可自定义的视图。例如，内置的 Markdown 扩展使用 webview 来渲染 Markdown 预览。Webview 还可以用于构建超出 VS Code 原生 API 支持范围的复杂用户界面。在视图中，会将 Webview 视为iframe。

Webview官方文档讲解
 Webview官方案例

一、createWebviewPanel

vscode.window.createWebviewPanel 是 VS Code 扩展 API 中的一个方法，用于创建和管理 Webview 面板。Webview 面板允许您在 VS Code 的用户界面中嵌入一个基于 Web 技术的交互式内容。具体用法如下：

javascript 复制代码

vscode.window.createWebviewPanel(
    viewType: string,        // 唯一的视图类型标识符，用于在插件中识别不同的 Webview 面板
    title: string,           // 面板的标题
    viewColumn: vscode.ViewColumn, // 面板要显示在哪一列
    options?: vscode.WebviewPanelOptions & { enableScripts?: boolean } // 配置选项
): vscode.WebviewPanel;

参数详解：

viewType：唯一的视图类型标识符，用于在插件中区分不同的 Webview 面板。可以在插件的不同部分使用这个标识符来识别和操作特定的面板
title：面板的标题，显示在面板的顶部
viewColumn：是一个枚举类型，表示面板显示在编辑器中的第几列，枚举包括下面几个选项
- ViewColumn.One：在第一列显示面板
- ViewColumn.Two：在第二列显示面板
- ViewColumn.Three：在第三列显示面板
- ViewColumn.Active：在当前活动的列显示面板
- ViewColumn.Beside：在当前列的旁边显示面板
options：可选的配置选项，设置Webview面板的各种属性，其中
- enableScripts：是一个布尔值，表示是否在Webview中运行JS

二、Webview案例

使用registerCommand注册一个启动面板的命令（demoPlugin.start），然后创建一个面板。案例实现了创建一个带有猫的图片面板：面板的唯一标识catCoding，面板的标题为Cat Coding ，面板展示在编辑器中的第一列，配置选项为一个空对象。注意我们这里设置的webview.html会被视为iframe

声明图片

javascript 复制代码

const cats = {
	'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
	'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif'
};

注册命令以及创建面板

javascript 复制代码

		vscode.commands.registerCommand('demoPlugin.start', () => {
			// Create and show a new webview
			const panel = vscode.window.createWebviewPanel(
				'catCoding', // Identifies the type of the webview. Used internally
				'Cat Coding', // Title of the panel displayed to the user
				vscode.ViewColumn.One, // Editor column to show the new webview panel in.
				{} // Webview options. More on these later.
			);
			const cat = "Coding Cat";
			//panel.title = cat; 重新定义面板的标题
			panel.webview.html = getWebviewContent(cat);
})

面板具体的Html

javascript 复制代码

function getWebviewContent(cat: keyof typeof cats) {
	return `<!DOCTYPE html>
  <html lang="en">
  <head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Cat Coding</title>
	  <style>
	  /* 根据主题更改文本颜色 */
	  body.vscode-light {
		color: #ff0;
	  }

	  body.vscode-dark {
		color: white;
	  }

	  body.vscode-high-contrast {
		color: red;
	  }
	  </style>
  </head>
  <body>
	  <img src="${cats[cat]}" width="300" />
  </body>
  </html>`;
}

package.json中，需要在contributes中的commands进行配置。

javascript 复制代码

"contributes": {
   "commands": [
     {
        "command": "demoPlugin.start",
        "title": "Start new cat coding session",
        "category": "Cat Coding"
      }
   ]
}

展示
最后我们就可以cmd/ctrl+shift+p在命令列表中选择配置的Cat Coding:Start new cat coding session命令。

面板动态切换

我们设置一秒对面板的内容和标题进行切换。这里是用定时器，1s切换面板的内容，并且在面板关闭时（使用onDidDispose监听）清除更新内容的定时器，避免内存泄漏。getWebviewConten方法还是上面的不变。

其中解释一下onDidDispose，该方法用于监听 Webview 面板被关闭。

语法：

javascript 复制代码

currentPanel.onDidDispose(() => { 
// 这里是面板关闭要执行的逻辑 
}, undefined, context.subscriptions)

参数详解：

第一个参数是一个函数，表示面板被关闭时要执行的逻辑。在这个例子中，函数体内的代码将 currentPanel 设置为 undefined，以表示面板已经被关闭。
第二个参数是一个可选的 this 上下文，这里设置为 undefined。
第三个参数 context.subscriptions 是一个数组，通常包含了注册的事件和资源的句柄。在扩展被停用时，VS Code 将会自动清理这些资源，避免内存泄漏。

javascript 复制代码

		vscode.commands.registerCommand('demoPlugin.start', () => {
			// Create and show a new webview
			const panel = vscode.window.createWebviewPanel(
				'catCoding', // Identifies the type of the webview. Used internally
				'Cat Coding', // Title of the panel displayed to the user
				vscode.ViewColumn.One, // Editor column to show the new webview panel in.
				{} // Webview options. More on these later.
			);
			panel.webview.html = getWebviewContent(cat);
			const cat = "Coding Cat";
			let iteration = 0;
			const updateWebview = () => {
				const cat = iteration++ % 2 ? 'Compiling Cat' : 'Coding Cat';
				panel.title = cat;
				panel.webview.html = getWebviewContent(cat);
			};
			// And schedule updates to the content every second
			const interval = setInterval(updateWebview, 1000);
			panel.onDidDispose(
				() => {
					// When the panel is closed, cancel any future updates to the webview content
					clearInterval(interval);
				},
				null,
				context.subscriptions
			);
			// Set initial content
			updateWebview();
		})

最终结果如下所示：

三、Theming webview content（主题化视图内容）

Webview 可以使用 CSS 根据 VS Code 的当前主题更改其外观。VS Code 将主题分为三类，并向body元素添加一个特殊的类来指示当前主题：

vscode-light：浅色主题
vscode-dark：黑暗主题
vscode-high-contrast：高对比度主题

在Web.html中添加主题样式，如下

javascript 复制代码

function getWebviewContent(cat: keyof typeof cats) {
	return `<!DOCTYPE html>
  <html lang="en">
  <head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Cat Coding</title>
	  <style>
	  /* 根据主题更改文本颜色 */
	  body.vscode-light {
		color: blue;
	  }
  
	  body.vscode-dark {
		color: green;
	  }
  
	  body.vscode-high-contrast {
		color: yellow;
	  }
	  </style>
  </head>
  <body>
	  <img src="${cats[cat]}" width="300" />
  </body>
  </html>`;
}

body.vscode-light
body.vscode-dark
body.vscode-high-contrast

【VS Code插件开发】Webview面板（三）

目录

前言

一、createWebviewPanel

二、Webview案例

面板动态切换

三、Theming webview content（主题化视图内容）