vscode插件与webview相互通信

---

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;
			//下面可以作自己的处理

});