vscode插件与webview相互通信

webview发送消息给插件

插件js和ts都可以(webview需要引入vscode,可以通过
然后test-webview.js里面加入const testMode = false; const vscode = testMode ? {} : acquireVsCodeApi();

webview发送消息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function openHint() {
vscode.postMessage({
command: 'openHint',
text: '试着输入 helloword '
})

}

function openNext() {
vscode.postMessage({
command: 'openNext',
text: '准备好进入下一关了么? '
})

}

function openCheck() {
vscode.postMessage({
command: 'openCheck',
text: '恭喜你,回答正确!!! '
})

}

插件接收消息并处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
panel.webview.onDidReceiveMessage(message => {
switch (message.command) {

case 'openHint':
vscode.window.showInformationMessage(message.text, {
modal: true
});
break;
case 'openNext':
vscode.window.showInformationMessage(message.text, {
modal: true
});
break;
case 'openCheck':
vscode.window.showInformationMessage(message.text, {
modal: true
});
break;
default:

}

}, undefined, context.subscriptions);

最终结果点击按钮在vscode中弹出框

插件发送消息给webview

在创建webview的时候,创建panel的时候利用panel发送消息

1
2
var panel;
panel.webview.postMessage({ command: value });

webview接收数据并处理

1
2
3
4
5
6
7
8
9
10
11
window.addEventListener('message', event => {
const message = event.data;
if (message.command == undefined || !message.command) {
// console.log('---------------------------message:aaaa');
return;
}
// console.log('---------------------------message:' + message.command);
courseId = message.command;
//下面可以作自己的处理

});

文章目录
  1. 1. webview发送消息给插件
  2. 2. 插件发送消息给webview