浅谈VSCode中Webview的使用方法(2)-木庄网络博客

当前第2页返回上一页

当VSCode重启后，就全都清空了，所以等于不能用。

解决方法

调用VSCode的node环境来保存，这里需要让webview和VSCode插件环境进行通讯。

4号坑：Webview内容被释放

当Webview所在的tab pannel进入后台时（比如切到别的tab了），webview里的内容就会被清除，内存占用被释放。再次切回时会重新加载html内容。

解决办法

启用retainContextWhenHidden

消息通讯

1、插件发消息，Webview接收消息

插件里的JS

1	`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的使用方法的详细内容，更多文章请关注木庄网络博客！

返回前面的内容