初识vscode插件开发(四)-webview api

通俗点说：webview即web视图，使用webview api 你可以在vscode中打开一个完整的的html，该视图就跟嵌入页面一样，用html语法就可以渲染；而且还可以调用一些vscode的原生api做一些复杂的交互；

跟着官网实现几个小例子，后续可以自己实现一些具体复杂功能

1 新建一个扩展文件

        本节不用默认的extension.js,在src目录下创建一个extension_webview.ts文件；

        然后修改package.json中主文件为该文件

    "main": "./out/extension_webview.js",  

2 实现一个webview

        实现一个空webview，也就是没有任何内容的webview；

（1）在extension_webview.ts中添加如下代码；

	/**
	 * 1 webview1  
	 * 一个空白的webview
	 */
	context.subscriptions.push(
		vscode.commands.registerCommand('geojsonviewer.webview1', () => {
		  // 创建并显示一个新的webview
		  const panel = vscode.window.createWebviewPanel(
			'Test', // 标识webview的类型
			'webview1', // 展示给用户的面板的标题
			vscode.ViewColumn.One, // 显示webview面板以编辑器新列的方式.
			{} // webview其他的选项
		  );
		})
	  );

 基本思路跟我们之前写过的基本命令添加方式一样:

第一步:创建一个命令；

第二步:在命令回调函数中定义主体；可以是d出窗口，可以是webview等等

第三步:将命令添加到订阅数组；

（2）在package.json中添加启动命令

有两处位置需要添加

第一:在activationEvents中添加

	"activationEvents": [
		"onCommand:geojsonviewer.webview1"
	],

第二:在command中添加如下

	"contributes": {
		"commands": [
			{
				"command": "geojsonviewer.webview1",
				"title": "webview1",
				"category": "webview1"
			}
		]
	}

 （3）到此就可以运行了；F5运行；新打开一个扩展宿主环境窗口

        ctrl+shift+p打开命令输入框，输入webview1，然后点击

 新打开一个webview1的面板，如下

 

 3 给webview添加内容

webview的内容，通过返回html内容即可；内容定义的方式跟html一样，没有任何区别；

通过panel.webview.html 设置webview的内容；如下

	 /**
	 * 2 webview2  
	 * 有内容的webview
	 */
	  context.subscriptions.push(
		vscode.commands.registerCommand('geojsonviewer.webview2', () => {
		  // 创建并显示一个新的webview
		  const panel = vscode.window.createWebviewPanel(
			'Test', // 标识webview的类型
			'webview2', // 展示给用户的面板的标题
			vscode.ViewColumn.One, // 显示webview面板以编辑器新列的方式.
			{} // webview其他的选项
		  );
		  panel.webview.html = getWebviewContent();
		  function getWebviewContent() {
			return `
		  
		  
			  
			  
			  
		  
		  
			  
		  
		  `;
		  }
		})
	  );

 上面添加一个gif图片；这里直接借鉴官网的实例图片。

同样在package.json中添加启动命令；F5运行查看效果

 4 给webview动态传值更新webview的内容

这里引用官方的例子

	  /**
	 * 3 webview3
	 * 可以给webview传值，动态改变内容的webview
	 */
	   context.subscriptions.push(
		vscode.commands.registerCommand('geojsonviewer.webview3', () => {
			const cats = {
				'Coding Cat': 'http://www.kaotop.com/file/tupian/20220518/giphy.gif',
				'Compiling Cat': 'http://www.kaotop.com/file/tupian/20220518/giphy.gif'
			  };
		  // 创建并显示一个新的webview
		  const panel = vscode.window.createWebviewPanel(
			'Test', // 标识webview的类型
			'webview2', // 展示给用户的面板的标题
			vscode.ViewColumn.One, // 显示webview面板以编辑器新列的方式.
			{} // webview其他的选项
		  );

		  let iteration = 0;
		  const updateWebview = () => {
			const cat = iteration++ % 2 ? 'Compiling Cat' : 'Coding Cat';
			panel.title = cat;
			panel.webview.html = getWebviewContent(cat);
		  };
	
		  // Set initial content
		  updateWebview();
		  setInterval(updateWebview, 1000);
		  
		  function getWebviewContent(cat:keyof typeof cats) {
			return `
		  
		  
			  
			  
			  
		  
		  
		  	
		  
		  `;
		  }

		})
	  );

上面主要是通过setInterval函数间隔更新视图；其中需要注意getWebviewContent函数在接受形参的时候使用keyof typeof cats的方式；这意味着形参类型只能属于cats对象所有参数里；参数名没有的话就会报错；

在package.json中增加启动命令；F5运行

 5 加载本地资源

上面的例子，gif图片是在线地址；如果要加载本地资源，该如何将地址传给webview呢；我们直接在return 返回的html里面设置本地资源地址是无效的；这里我们需要借助两个api

第一个:vscode.Uri.file,通过该api获取资源的所在磁盘地址

第二个: panel.webview.asWebviewUri,将其转换为vscode-resource地址；然后将该地址传给html即可。

代码如下：

	  /**
	   * 4 webview4 
	   * 从本地加载gif图像
	   */
	   context.subscriptions.push(
		vscode.commands.registerCommand('geojsonviewer.webview4', () => {
		  const panel = vscode.window.createWebviewPanel(
			'catCoding',
			'Cat Coding',
			vscode.ViewColumn.One,
			{}
		  );
	
		  // Get path to resource on disk
		  const onDiskPath = vscode.Uri.file(
			path.join(context.extensionPath, 'media', 'cat.webp')
		  );
			console.log("context.extensionPath",context.extensionPath);
		  // And get the special URI to use with the webview
		  const catGifSrc = panel.webview.asWebviewUri(onDiskPath)+"";
		  console.log("catGifSrc",catGifSrc);
		  panel.webview.html = getWebviewContent(catGifSrc);
		  function getWebviewContent(_src:string) {
			return `
		  
		  
			  
			  
			  
		  
		  
		  	
		  
		  `;
		  }

		})
	   )

其中path.join(context.extensionPath, 'media', 'cat.webp') ；“media”是资源的目录，“cat.webp”是资源名称；

 最后增加启动命令运行即可；

	"activationEvents": [
		"onCommand:geojsonviewer.webview1",
		"onCommand:geojsonviewer.webview2",
		"onCommand:geojsonviewer.webview3",
		"onCommand:geojsonviewer.webview4"
	],
	"main": "./out/extension_webview.js",  
	
	"contributes": {
		"commands": [
			{
				"command": "geojsonviewer.webview1",
				"title": "webview1",
				"category": "webview1"
			},
			{
				"command": "geojsonviewer.webview2",
				"title": "webview2",
				"category": "webview2"
			},
			{
				"command": "geojsonviewer.webview3",
				"title": "webview3",
				"category": "webview3"
			},
			{
				"command": "geojsonviewer.webview4",
				"title": "webview4",
				"category": "webview4"
			}
		]
	},