vscode插件开发（四）Webview（1）

news2024/11/26 22:27:02

上一篇详细讲解了命令，这回我们一起来看一下Webview。vscode的插件其实可以分为两种，一种是webview插件，另一种是非webview插件。

webview插件的自由度很高，可以满足开发者的各种定制化的要求；而非webview插件只能使用vscode提供的api及ui，只适合开发简单的插件。

官方的教程：https://code.visualstudio.com/api/extension-guides/webview

vscode的webview插件的开发方式和前端开发中的iframe很像，如果把插件想像成宿主页的话，那webview就是用iframe嵌入的页面，可以通过postMessage来与插件进行信息传递。

webview可以渲染几乎所有的html元素。因此在开发插件的时候我们可以把它当成一个前端项目来开发。

目前很少有不依赖前端框架的前端开发了，官方的webview教程没有用到前端框架，大家感兴趣可以看看，下面我就讲一下如何采用vue3来开发webview插件。

首先介绍Webview UI Toolkit for Visual Studio Codehttps://github.com/microsoft/vscode-webview-ui-toolkit这是微软提供的一套具有vscode风格的ui库，在开发插件的时候可以导入其中的ui组件使得插件界面的风格统一。微软为这个ui库提供了一个例子仓库https://github.com/microsoft/vscode-webview-ui-toolkit-samples里面包含了原生js/ts的例子及使用框架的例子：
在这里插入图片描述

接下来我们就把vue3的例子下载下来，在这个例子的基础上实现webview插件的开发。https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks/hello-world-vue

下载代码时可以直接git clone整个项目到电脑上然后进入hello-world-vue文件夹，也可以运行下面的命令

npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-vue hello-world

只下载vue的工程。

把代码下下来后，先装好依赖。

npm run install:all

在下载代码及安装依赖的时候可能会因为网络问题失败，可以多试几次，一直出错的话就只能挂代理了。

我们下载下来的工程包含两部分，一部分是vscode插件工程，还有一部分是vue工程。运行上面的这句脚本会把vscode插件及vue工程的依赖都装好。
在这里插入图片描述

之后运行

npm run start:webview

就会开启vue工程的调试模式，在浏览器中输http://localhost:3000就可以看到hello world页面了。
在这里插入图片描述

按钮是不是很有vscode的风格^_

整个vue工程的构建工具采用的是vite，我们对代码的改动可以几乎实时地反映在浏览器中。

webview插件的开发模式就是先调试我们的vue工程，当我们把页面的效果交互逻辑都调整满意了之后，就可以把vue工程构建打包。然后启动vscode插件的调试模式，来联调整个插件。

整个过程还是有些复杂的，如果大家写过electron的话就会比较熟悉这种开发模式了。electron的渲染进程和主进程都是独立的，如果进程间想进行信息传递的话需要借助IPC。在webview插件开发中，webview与插件进程是通过postMessage来通信的，所以我们要自己定义一种数据传输的格式，方便插件的各种功能的实现。

在Hello World插件中，点击Howdy!按钮就会向插件的主进程发送一条消息，然后插件再触发消息框显示相应的文字。

发送消息的代码：
在这里插入图片描述

接收处理消息的代码：
在这里插入图片描述

在编写插件的时候可以参考里面红框中的这种模式，在webview与插件进程间传递一个类似的包含命令名及数据的对象，在接收的时候，由不同的命令名区分不同的操作。

联调的时候，输入

npm run build:webview

对vue工程进行编译打包，然后按F5，进入vscode插件的调试模式，然后按 Ctrl/Command+Shift+P 打开命令面板，在里面输入 Hello World，就能激活这个示例插件了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Asxg3dw2-1669128090450)(:/75b7c0719615454ba7609f4cf025d739)]

点击Howdy!按钮就会弹出一个消息框。
在这里插入图片描述