WebView 发送消息WebView 还可以将消息传递回我们的扩展程序。
这主要是通过使用 WebView 的 postMessage 内特殊的 VS Code API 对象上的函数来完成的。要访问 VS Code API 对象，需要在 WebView 内部调用 acquireVsCodeApi 这个函数每个会话只能调用一次。
而且必须保留此方法返回的 VS Code API 实例，并将其分发给任何其他需要使用它的函数。
我们可以使用 VS Code API 的 postMessage 方法在我们的插件中显示来自 WebView 的消息：
const vscode = acquireVsCodeApi(); // 直接使用vscode.postMessage({ // 发送消息command: 'alert',text: ' 发送成功~感谢老铁~'})我们把这个事件触发绑在了一个新的 button 上，完整的代码如下：
module.exports = (txt) => {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello GitHub</title></head><body><img src=https://www.isolves.com/it/cxkf/bk/2021-09-01/"https://cdn.jsdelivr.net/gh/521xueweihan/img_logo@main/logo/readme.gif" width="300" />

`hello`

${txt}

`}同时也需要在我们的插件代码里接收来自 WebView 的消息：

...currentPanel.webview.onDidReceiveMessage(message => {switch (message.command) {case 'alert':vscode.window.showInformationMessage(message.text);return;}},undefined,context.subscriptions);...

完整的代码如下，在打开 WebView 的时候就要将事件绑定都搞定：

... const webviewCommand = vscode.commands.registerCommand('webview.start', () => {currentPanel = vscode.window.createWebviewPanel('hgWebview','HelloGitHub webview',vscode.ViewColumn.One,{enableScripts: true});let iteration = 0;const updateWebview = () => {const key = iteration++ % 2 ? 'descripton' : 'slogon';currentPanel.title = webviewTxt[key];currentPanel.webview.html = hgWebviewFun(webviewTxt[key]);};updateWebview();// const interval = setInterval(updateWebview, 1000);currentPanel.onDidDispose(() => {// clearInterval(interval);currentPanel = undefined;},null,context.subscriptions);// 处理来自 webview 的消息currentPanel.webview.onDidReceiveMessage(message => {switch (message.command) {case 'alert':vscode.window.showInformationMessage(message.text);return;}},undefined,context.subscriptions); });...

接下来我们先看一下点击按钮前的样式：

文章插图

来看一下我们点击按钮会发生什么“神奇”的事情呢？

文章插图

四、总结那快乐的时光总是短暂的，又到了文章结束的时候啦。总的来说 WebView 就像是在 VS Code 里的 iframe，虽然可能在性能上有那么点弊端，但是却能够帮助我们实现很多丰富而又有趣的事情。
因此我们更要好好的利用这个功能，把它的力量发挥到极致。根据官网的描述，我们也要在使用的时候多注意以下几点：