如何深入理解VsCode中WebView与前端代码的通信机制？

本文共计2815个文字，预计阅读时间需要12分钟。

之前在文章中介绍了VsCode插件开发的基础，通过插件实现通信。这次，我依然是通过插件来完成，但主要方式是在ts文件中使用webview进行通信。此外，在此声明中，一定要仔细阅读细节。

之前我在这篇文章VsCode插件开发之插件初步通信

通过插件完成通信，这回我还是通过插件，只不过方式主要以在ts文件里面使用webview来进行通信。

另外在此声明，一定要好好看仔细看官方文档，国内关于VsCode相关的开发，少之又少，虽然有一个叫小茗同学写的相对较全面，但是大家可以仔细看，其实他的内容大多也来自官方，同时有部分也加上自己的理解和想法。个人建议，关于VsCode插件相关的，最好是跑一跑VsCode相关官方例子，这样有助于对VsCode插件开发有一个大致的思路和全局认识，换言之有一个感性的认识。

官方文档地址:code.visualstudio.com/api

官方插件例子:github.com/Microsoft/vscode-extension-samples

引用官方的说明:

webview API允许扩展在Visual Studio Code中创建完全可自定义的视图。例如，内置的Markdown扩展程序使用Web视图来呈现Markdown预览。Web视图还可用于构建复杂的用户界面，超出VsCode的本机API支持。

将webview视为iframe扩展程序控制的Vs代码内部。webview几乎可以呈现此框架中的任何HTML内容，并使用消息传递与扩展进行通信。这种自由使得webview非常强大，并开辟了一系列全新的扩展可能性。