title: vscode插件与webview相互通信
date: 2019-04-03 13:37:37
tags: “vscode”
1.webview发送消息给插件
插件js和ts都可以(webview需要引入vscode,可以通过)
然后test-webview.js里面加入const testMode = false; const vscode = testMode ? {} : acquireVsCodeApi();
webview发送消息
function openHint() {
vscode.postMessage({
command: 'openHint',
text: '试着输入 helloword '
})
}
function openNext() {
vscode.postMessage({
command: 'openNext',
text: '准备好进入下一关了么? '
})
}
function openCheck() {
vscode.postMessage({
command: 'openCheck',
text: '恭喜你,回答正确!!! '
})
}
插件接收消息并处理
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中弹出框
2.插件发送消息给webview
在创建webview的时候,创建panel的时候利用panel发送消息
var panel;
panel.webview.postMessage({ command: value });
webview接收数据并处理
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;
//下面可以作自己的处理
});