当前位置：首页 > news >正文

【VS Code插件开发】消息通信（四）

news 2025/7/7 9:01:23

🐱 个人主页：不叫猫先生，公众号：前端舵手
🙋‍♂️ 作者简介：前端领域优质作者、阿里云专家博主，共同学习共同进步，一起加油呀！
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼(文末有我wx或者私信)

在这里插入图片描述

消息从扩展传递到Webview

1、reveal用法

在使用面板的时候，会用到reveal先方法，先讲解一下reveal的用法：

reveal 是一个方法，用于将 Webview 面板显示在用户界面中的特定编辑器列（比如：左侧编辑器、右侧编辑器等）。比如下面的代码中currentPanel.reveal(vscode.ViewColumn.One) 是用来显示已经创建的面板 currentPanel 并将其显示在 vscode.ViewColumn.One 编辑器列中。

总结一下：currentPanel 在已经创建 Webview 面板时存在，而 reveal是将已创建的 Webview 面板显示在用户界面的指定编辑器列的方法。

2、案例

消息从扩展传递到Webview，可以通过下面的代码逻辑实现：

注册命令demoPlugin.doRefactor
执行该命令时，通过webview.postMessage({ command: 'refactor' })向 Webview 发送消息指令或者数据信息
Webview 通过window.addEventListener('message', callback)监听到扩展发送的指令或者数据，然后执行相应的逻辑

export function activate(context: vscode.ExtensionContext) {// Only allow a single Cat Coderlet currentPanel: vscode.WebviewPanel | undefined = undefined;context.subscriptions.push(vscode.commands.registerCommand('demoPlugin.start', () => {if (currentPanel) {currentPanel.reveal(vscode.ViewColumn.One);} else {currentPanel = vscode.window.createWebviewPanel('catCoding','Cat Coding',vscode.ViewColumn.One,{enableScripts: true});currentPanel.webview.html = getWebviewContent();currentPanel.onDidDispose(() => {currentPanel = undefined;},undefined,context.subscriptions);}}));// new commandcontext.subscriptions.push(vscode.commands.registerCommand('demoPlugin.doRefactor', () => {if (!currentPanel) {return;}// Send a message to our webview.// You can send any JSON serializable data.currentPanel.webview.postMessage({ command: 'refactor' });}));
}
//1ms对count加1，然后乘0.5再向上取整，将最终结果通过操作dom显示在页面中
function getWebviewContent() {return `<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cat Coding</title>
</head>
<body><img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" /><h1 id="lines-of-code-counter">0</h1><script>const counter = document.getElementById('lines-of-code-counter');let count = 0;setInterval(() => {counter.textContent = count++;}, 100);// Handle the message inside the webviewwindow.addEventListener('message', event => {const message = event.data; // The JSON data our extension sentswitch (message.command) {case 'refactor':count = Math.ceil(count * 0.5);counter.textContent = count;break;}});</script>
</body>
</html>`;
}

3、展示

其中的数字就是执行了 doRefactor 与 Webview 进行了通信，Webview 监听到传过来的指令是自己需要的，然后执行相应的逻辑来展示数字变化
在这里插入图片描述

消息从 Web 视图传递到扩展

Webview 还可以将消息传递回其扩展程序。这是通过使用 postMessageweb 视图内的特殊 VS Code API 对象上的函数来完成的。要访问 VS Code API 对象，可以在 Webview 调用acquireVsCodeApi方法。每个会话只能调用该函数一次。您必须保留此方法返回的 VS Code API 实例，并将其分发给需要使用它的任何其他函数。

1、acquireVsCodeApi

acquireVsCodeApi是VS Code 内置的方法，他在 Webview 内部获取一个可以用来与 VS Code 宿主环境进行通信的 API 对象，以实现 Webview 与扩展代码之间的交互。

用法如下：

Webview 发送数据

   const vscode = acquireVsCodeApi();vscode.postMessage({command: '指令',text: '你的数据'})

扩展接收数据

2、onDidReceiveMessage

onDidReceiveMessage 是 Webview 对象的一个方法，用于注册一个事件监听器，以接收从宿主环境（扩展代码）发送过来的消息。

语法：panel.webview.onDidReceiveMessage(listener, this?, disposables?)

参数：

listener: 监听回调函数，监听从宿主环境发送来的消息。消息通常为一个或多个字段的对象，然后根据消息的字段来执行不同的操作。
第二个参数是一个可选的 this 上下文
context.subscriptions: 类型为数组，用于保存资源的引用，以便在扩展被停用时进行清理，防止内存泄漏。

用法：

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

3、案例

count每1ms加1，当随机数（大于0小于1）小于 count * 0.01 的时候，就向扩展程序发送消息，扩展程序通过onDidReceiveMessage监听消息。

export function activate(context: vscode.ExtensionContext) {context.subscriptions.push(vscode.commands.registerCommand('demoPlugin.start', () => {const panel = vscode.window.createWebviewPanel('catCoding','Cat Coding',vscode.ViewColumn.One,{enableScripts: true});panel.webview.html = getWebviewContent();// Handle messages from the webviewpanel.webview.onDidReceiveMessage(message => {switch (message.command) {case 'alert':vscode.window.showErrorMessage(message.text);return;}},undefined,context.subscriptions);}));
}function getWebviewContent() {return `<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cat Coding</title>
</head>
<body><img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" /><h1 id="lines-of-code-counter">0</h1><script>(function() {const vscode = acquireVsCodeApi();const counter = document.getElementById('lines-of-code-counter');let count = 0;setInterval(() => {counter.textContent = count++;// Alert the extension when our cat introduces a bugif (Math.random() < 0.001 * count) {vscode.postMessage({command: 'alert',text: '🐛  on line ' + count})}}, 100);}())</script>
</body>
</html>`;
}

目录