[VS Code插件开发]Webview面板(三)

作者：小教学发布时间：2023-09-17分类：程序开发学习浏览：81

导读：🐱个人主页：不叫猫先生，公众号：前端舵手🙋‍♂️作者简介:前端领域优质作者、阿里云专家博主，共同学习共同进步，一起加油呀！📢资料领取:前端进阶资料可以找我免费领取🔥摸鱼学习交流：我...

🐱个人主页：不叫猫先生，公众号：前端舵手
🙋‍♂️作者简介:前端领域优质作者、阿里云专家博主，共同学习共同进步，一起加油呀！
📢资料领取:前端进阶资料可以找我免费领取
🔥摸鱼学习交流：我们的宗旨是在“工作中摸鱼，摸鱼中进步”，期待大佬一起来摸鱼(文末有我WX或者私信)

VS代码插件开发系列专栏

文章
(入门篇(一)
(通用功能(二)
Webview面板(三)
(消息通信(四)
(状态栏(五)
(自定义侧边栏、视图(六)
(常见自定义命令(七)

Webview面板

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

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

一、创建Webview面板

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

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

参数详解：

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

二、Webview案例

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

声明图片

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

注册命令以及创建面板

		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

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进行配置.

"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面板被关闭.

语法：

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

参数详解：

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

		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();
		})

最终结果如下所示：

[VS Code插件开发]Webview面板(三)

三、主题化Webview内容(主题化视图内容)

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

Vscode-light：浅色主题
VScode-Dark：黑暗主题
VScode-高对比度：高对比度主题

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

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>`;
}