cida室内设计师资格证,百度seo关键词优化公司,无锡企业建站,哪个网站做漫画可以有钱#x1f431; 个人主页#xff1a;不叫猫先生#xff0c;公众号#xff1a;前端舵手 #x1f64b;♂️ 作者简介#xff1a;前端领域优质作者、阿里云专家博主#xff0c;共同学习共同进步#xff0c;一起加油呀#xff01; #x1f4e2; 资料领取#xff1a;前端… 个人主页不叫猫先生公众号前端舵手 ♂️ 作者简介前端领域优质作者、阿里云专家博主共同学习共同进步一起加油呀 资料领取前端进阶资料可以找我免费领取 摸鱼学习交流我们的宗旨是在「工作中摸鱼摸鱼中进步」期待大佬一起来摸鱼(文末有我wx或者私信) 目录 消息从扩展传递到Webview1、reveal用法2、案例3、展示 消息从 Web 视图传递到扩展1、acquireVsCodeApi2、onDidReceiveMessage3、案例 在开发过程中扩展和 Webview 可以互相通信消息既可以从扩展传递到Webview反之也是可以的。 消息从扩展传递到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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCat Coding/title
/head
bodyimg srchttps://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif width300 /h1 idlines-of-code-counter0/h1scriptconst 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCat Coding/title
/head
bodyimg srchttps://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif width300 /h1 idlines-of-code-counter0/h1script(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;
}
