Использование Webview | Серия руководств по разработке подключаемых модулей VSCode

внешний интерфейс JavaScript
Использование Webview | Серия руководств по разработке подключаемых модулей VSCode

Учебный план серии по разработке подключаемых модулей VSCode

План не поспевает за изменениями, повторяется в любое время, добро пожаловать, чтобы оставить сообщение

Недавно разработан плагин VSCode под названием «Я люблю самородки», в основном вокруг API Webview для достижения. Как интерфейсный инженер, пока мы даем вам веб-просмотр, хотя мы не можем потрясти землю, мы можем сделать много крутых плагинов. НапримерПлагин Xiaobawang,Плагин Rainbow Fart Wifeи т.п.

фактическиVSCodeтакже на основеelectronПрограммное обеспечение Framework для настольных ПК, то есть вы находитесь вVSCodeВсе интерфейсы, которые вы здесь видите, являются веб-страницами. Тогда как отобразить веб-страницу на веб-странице? Я уверен, что вы тоже об этом думали.iframe.

Отладка веб-просмотра

существуетVSCodeВ палитре команд введитеOpen Webview Developer Tools можно открыть позжеWebviewконсоль

Это действительно iframe~

Должен ли ваш плагин использовать Webview?

Официальный адрес документа на английском языке:code.visual studio.com/API/extens…

Официальная команда VSCode надеется, что разработчики плагинов задумаются над следующими вопросами:

  • Нужно ли использовать эту функцию в VS Code? Было бы лучше как отдельное приложение или веб-сайт?
  • использоватьWebviewЭто единственный способ добиться функциональности? Можете ли вы вместо этого использовать обычный API VS Code?

Создать веб-панель просмотра

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

Это создает Webview, который отображает html-контент.

Кажется, что это очень просто в использовании, верно, но в процессе реального использования Webview для разработки плагинов я все же столкнулся с множеством подводных камней:

Яма 1: Используйте местные ресурсы

Веб-просмотры в VSCode не могут напрямую использовать относительные пути к локальным ресурсам. Например, в следующем коде мы вводим css, js и изображение в теле.

Невозможно загрузить эти ресурсы напрямую, написав вот так

  • Решение 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;
}

Таким образом, мы можем нормально писать относительные пути при разработке веб-страниц.

Примечание. Если вы используете Vue или другие интерфейсные фреймворки для разработки подключаемых модулей Webview, обратите внимание на введение ресурсов. Вышеупомянутый метод инкапсуляции применим только к страницеhardcodeресурсы заменены.

  • Решение 2

Используйте iframe для импорта локального пути html, но веб-просмотр VSCode также имеет очень большие ограничения на iframe, почти не думайте о взаимодействии со средой узла в дополнение к отображению веб-страниц.

Яма 2: разрешить Javascript

Не поддерживается по умолчаниюJavascript

  • Решение

Добавить кoption,БудуenableScritpsЕсли установлено значение true, по умолчанию установлено значение false.

Яма 3: куки и локальное хранилище

Однако можно использовать файлы cookie и localStorage! ! !

Когда VSCode перезапускается, он полностью очищается, поэтому его нельзя использовать.

  • Решение

Вызовите среду узла VSCode для сохранения, здесь вам нужно разрешить веб-просмотру общаться со средой плагина VSCode.

Яма 4: содержание веб-просмотра выпущено

Когда панель вкладок, на которой находится веб-представление, переходит в фоновый режим (например, при переключении на другую вкладку), содержимое в веб-представлении будет очищено, а использование памяти будет освобождено. HTML-контент перезагружается при повторном переключении.

  • Решение

включитьretainContextWhenHidden

Новостная рассылка

  1. Плагины отправляют сообщения, Webview получает сообщения

    • JS в плагинах
    panel.webview.postMessage({text: '你好，我是插件'});
    • JS в веб-просмотре
    window.addEventListener('message',function(e){
  console.log(e.data.text);
})

  2. Webview отправляет сообщения, плагины получают сообщения

    • JS в веб-просмотре
    //初始化vscode插件api，没什么特别的功能，主要就是postMessage
var vscode = acquireVsCodeApi();

vscode.postMessage({
  text: '你好，我是Webview'
})
    • JS в плагинах
    panel.webview.onDidReceiveMessage(function(data) {
  console.log(data.text);
});

Например, вышеупомянутые файлы cookie и localstorage могут инкапсулировать обмен сообщениями и сохранять их локально через среду подключаемого узла.

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();
  }
});

Официальная демоверсия

Категории