VS Code插件开发教程--树视图+网页视图--完整demo+图--3

简介

你好！

本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方，还请各位指正。谢谢。

本文定位为初次接触vs code插件开发的小伙伴，开始有详细的教程如何一步一步的运用基础的插件开发

接下来会用完成的 demo 教大家 treeView 和 webView 的初级完成开发流程。小伙伴耐心跟着代码敲一遍能学会的哈。

先给小伙伴们看一下本文的目录架构：

• 一、介绍
• 二、安装
• 三、初识 VS code 插件 demo
• 四、treeView: 重识 package.json
• 五、treeView: 在视图中显示想要的 item
• 六、创建 webView 并嵌入百度页面
• 七、不同 item 显示不同的页面(数据传递: VS code -> html)
• 八、iframe 页面的数据传递指 VS code(iframe -> html -> vscode)

此文章为第三部分，如需从头开始阅读，请移步第一部分 或 第二部分

六、不同 item 显示不同的页面(数据传递: VS code -> html)

现在我们可以起一个 React 或者 Alita 项目

创建好3个页面,命名分别为 pig1, pig2, pig3。当然你要随意命名也可以，只不过这样子会比较方便。

那么接下来启动 React 或者 Alita 项目。

修改 WebView.ts 文件下的内容

<iframe id='iframe1' class="iframeDiv" src="http://localhost:8000/#/${label}" scrolling="auto"></iframe>

把 iframe 路径改成项目路径。

那么现在去启动一下插件吧。

是不是发现了一个问题，webView 只展示第一次选中的项，当你切换其他项时，路径并没有改变。这是为什么呢？

因为这里的参数 ${label} 是从 getIframeHtml(label) 方法中传递进来的。

这个方法只有在 webViewPanel 为 undefined 时才执行。所以 ${label} 永远都是创建 webView 时传递进来的参数。

那么现在有没有什么办法将点击事件的参数传递进 html 页面呢？有的。

介绍一个重要的方法：

postMessage(message): 将消息发布到webview内容。仅当Webview可见时才会传递消息。

接下来我们将继续修改 WebView.ts 文件

...//此处省略重复代码
if(webviewPanel === undefined) {
   

... //此处省略重复代码

webviewPanel.webview.html = getIframeHtml(label);

} else {
   

    webviewPanel.title =