WWW.lllT.neT这篇文章内容给我们介绍一下VSCode中Webview的操作方法。有一定的实用价值,有须要的小伙伴可以参照一下,期待对各位有些协助。

探讨VSCode中Webview的操作方法

实际上VSCode也是根据electron架构的电脑软件,换句话说,你在VSCode里见到的全部的页面本便是网页页面。那在网页页面里再表明网页怎么做?相信你也想起了,便是iframe。【建议学习培训:《vscode教程》】

调节Webview

VSCode指令控制面板中,键入Open Webview Developer Tools 后可以开启Webview的控制面板

探讨VSCode中Webview的操作方法

果真是iframe~

你的软件务必用Webview吗?

官方英文文本文档详细地址:https://code.visualstudio.com/api/extension-guides/webview

VSCode官方网精英团队期待软件开发人员好好思考如下所示问题:

  • 这一作用确实必须在VS Code中应用吗?做为独立的应用软件或网址会更好吗?
  • 应用Webview是完成原理的唯一方式吗?您可以改成基本的VS Code API吗?

建立WebviewPanel

探讨VSCode中Webview的操作方法

const panel = vscode.window.createWebviewPanel(
  'webview',
  "检测webview",
  vscode.ViewColumn.One
);
panel.webview.html = `<html><body>您好,我是Webview</body></html>`

那样就能建立一个Webview,3D渲染html具体内容。

探讨VSCode中Webview的操作方法

看起来应用非常简单是对是错,但在具体应用Webview开展软件开发设计的环节中,或是碰到了许多坑的:

1号坑:应用当地网络资源

在VSCode中的Webview没法立即应用绝对路径的当地网络资源。例如下边这一段编码,大家引进了一个css,一个js,在body中有一张图片。

探讨VSCode中Webview的操作方法

立即那样写是没法载入到这种网络资源的

探讨VSCode中Webview的操作方法

探讨VSCode中Webview的操作方法

  • 解决方案1

根据一个独特的协义头vscode-resource:网络资源文档相对路径,为了更好地不会影响我们一切正常开展网站开发,我们可以封装形式一个方式,从本地文件载入html具体内容,统一更换全部信息的途径后再取值给panel.webview.html

function getWebViewContent(context, templatePath) {
	const resourcePath = path.join(context.extensionPath, templatePath);
	const dirPath = path.dirname(resourcePath);
	let html = fs.readFileSync(resourcePath, 'utf-8');
    html = html.replace(/(<link. ?href="|<script. ?src="|<iframe. ?src="|<img. ?src=")(. ?)"/g, (m, $1, $2) => {
		if($2.indexOf("https://")<0)return $1   vscode.Uri.file(path.resolve(dirPath, $2)).with({ scheme: 'vscode-resource' }).toString()   '"';
		else return $1   $2 '"';
	});
	return html;
}

那样我们在开发设计网页页面的情况下就一切正常写绝对路径就好了。

探讨VSCode中Webview的操作方法

探讨VSCode中Webview的操作方法

常见问题:假如你应用Vue或是别的前端框架来开展软件Webview的开发设计,就需要留意网络资源的引进。以上封装形式的方式只对网页页面中hardcode的网络资源开展了更换。

  • 解决方案2

应用iframe引进当地途径html,但是VSCode的webview对iframe的限定也尤其大,几乎便是除开表明网页页面,和node自然环境互动就不要想了。

2号坑:容许应用Javascript

默认设置不兼容Javascript

  • 解决方案

加上option,将enableScritps设定为true,它的默认设置是false。

探讨VSCode中Webview的操作方法

3号坑:cookie和localstorage

cookie和localStorage可以用,可是!!!

当VSCode重新启动后,就统统清除了,因此相当于不能用。

  • 解决方案

读取VSCode的node自然环境来储存,这儿必须让webview和VSCode软件自然环境开展通信。

4号坑:Webview具体内容被释放出来

当Webview所属的tab pannel进到后台管理时(例如切到其他tab了),webview里的信息便会被消除,内存占用被释放出来。再度切回的时候会重新加载html具体内容。

  • 解决方案

开启retainContextWhenHidden

探讨VSCode中Webview的操作方法

信息通信

1、软件发信息,Webview接受信息

  • 软件里的JS
panel.webview.postMessage({text: '您好,我是软件'});
  • Webview里的JS
window.addEventListener('message',function(e){
  console.log(e.data.text);
})

2、Webview发信息,软件接受信息

  • Webview里的JS
//复位vscode软件api,没有什么尤其的作用,关键便是postMessage
var vscode = acquireVsCodeApi();

vscode.postMessage({
  text: '您好,我是Webview'
})
  • 软件里的JS
panel.webview.onDidReceiveMessage(function(data) {
  console.log(data.text);
});

例如前边看到的cookie和localstorage,就可以封装形式一下信息通信,根据软件node自然环境来储存到当地

var vscode = acquireVsCodeApi();
function setLocalStorage(k,v){
  vscode.postMessage({
    command: 'setLocalStorage',
    key:k,
    value:v
  })
}
panel.webview.onDidReceiveMessage(function(data) {
  if(data.command == 'setLocalStorage'){
    //应用lowdb
    lowdb.set(data.key,data.value).write();
  }
});

官方网Demo

  • https://github.com/microsoft/vscode-extension-samples/tree/master/webview-sample
  • https://github.com/microsoft/vscode-extension-samples/tree/master/webview-view-sample

大量程序编写有关专业知识,请浏览:编程视频!!

以上便是探讨VSCode中Webview的操作方法的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:探讨VSCode中Webview的操作方法发布于2021-12-11 10:54:02