VSCode で Webview を使用する方法についての簡単な説明
本篇文章给大家介绍一下VSCode中Webview的使用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
其实VSCode也是基于electron框架的桌面软件，也就是说，你在VSCode里看到的所有的界面本就是网页。那在网页里再显示网页怎么做？相信你也想到了，就是iframe。【推荐学习：《vscode教程》】
调试Webview
在VSCode命令面板中，输入Open Webview Developer Tools 后可以打开Webview的控制台
果然是iframe~
你的插件必须用Webview吗？
官方英文文档地址：https://code.visualstudio.com/api/extension-guides/webview
VSCode官方团队希望插件开发者好好思考如下问题：
- 这个功能真的需要在VS Code中使用吗？作为单独的应用程序或网站会更好吗？
- 使用
Webview是实现功能的唯一方法吗？您可以改用常规的VS Code API吗？
创建WebviewPanel
const panel = vscode.window.createWebviewPanel( 'webview', "测试webview", vscode.ViewColumn.One ); panel.webview.html = `<html><body>你好，我是Webview</body></html>`
这样就能创建一个Webview，渲染html内容。
看上去使用很简单对不对，但在实际使用Webview进行插件开发的过程中，还是遇到了不少坑的：
1号坑：使用本地资源
在VSCode中的Webview无法直接使用相对路径的本地资源。比如下面这段代码，我们引入了一个css，一个js，在body中有一张图片。
直接这样写是无法加载到这些资源的
- 解决方法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.+?|<img src="/static/imghw/default1.png" data-src="|<iframe.+?src=" class="lazy" .+?/g, (m, $1, $2) = alt="VSCode で Webview を使用する方法についての簡単な説明" > {
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的webview对iframe的限制也特别大，几乎就是除了显示网页，和node环境交互就别想了。
2号坑：允许使用Javascript
默认不支持Javascript
- 解决方法
添加option，将enableScritps设置为true，它的默认是false。
3号坑：cookie和localstorage
cookie和localStorage可以用，但是！！！
当VSCode重启后，就全都清空了，所以等于不能用。
- 解决方法
调用VSCode的node环境来保存，这里需要让webview和VSCode插件环境进行通讯。
4号坑：Webview内容被释放
当Webview所在的tab pannel进入后台时（比如切到别的tab了），webview里的内容就会被清除，内存占用被释放。再次切回时会重新加载html内容。
- 解决办法
启用retainContextWhenHidden
消息通讯
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 を使用する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1659
14
1415
52
1310
25
1258
29
1232
24
VSCODEに必要なコンピューター構成
Apr 15, 2025 pm 09:48 PM
VSコードシステムの要件：オペレーティングシステム：オペレーティングシステム：Windows 10以降、MACOS 10.12以上、Linux Distributionプロセッサ：最小1.6 GHz、推奨2.0 GHz以上のメモリ：最小512 MB、推奨4 GB以上のストレージスペース：最低250 MB以上：その他の要件を推奨：安定ネットワーク接続、XORG/WAYLAND（Linux）
vscodeのヘッダーファイルを定義する方法
Apr 15, 2025 pm 09:09 PM
ビジュアルスタジオコードを使用してヘッダーファイルを定義する方法は？ヘッダーファイルを作成し、.hまたは.hpp接尾辞名（クラス、関数、変数など）を使用してヘッダーファイルにシンボルを宣言し、#includeディレクティブを使用してプログラムをコンパイルして、ソースファイルにヘッダーファイルを含めます。ヘッダーファイルが含まれ、宣言された記号が利用可能になります。
vscode端子使用チュートリアル
Apr 15, 2025 pm 10:09 PM
VSCODEビルトインターミナルは、エディター内でコマンドとスクリプトを実行して開発プロセスを簡素化できるようにする開発ツールです。 VSCODE端子の使用方法：ショートカットキー（CTRL/CMD）で端子を開きます。コマンドを入力するか、スクリプトを実行します。 Hotkeys（Ctrl Lなどの端子をクリアするなど）を使用します。作業ディレクトリ（CDコマンドなど）を変更します。高度な機能には、デバッグモード、自動コードスニペット完了、およびインタラクティブコマンド履歴が含まれます。
vscodeでコードを書く場所
Apr 15, 2025 pm 09:54 PM
Visual Studioコード（VSCODE）でコードを作成するのはシンプルで使いやすいです。 VSCODEをインストールし、プロジェクトの作成、言語の選択、ファイルの作成、コードの書き込み、保存して実行します。 VSCODEの利点には、クロスプラットフォーム、フリーおよびオープンソース、強力な機能、リッチエクステンション、軽量で高速が含まれます。
vscode中国の注釈が疑問符になるという問題を解決する方法
Apr 15, 2025 pm 11:36 PM
Visual Studioコードで中国のコメントが疑問符になるという問題を解決する方法：ファイルのエンコーディングを確認し、「BOMなしでUTF-8」であることを確認します。フォントを「歌のスタイル」や「Microsoft Yahei」などの漢字をサポートするフォントに変更します。フォントを再インストールします。 Unicodeサポートを有効にします。 VSCODEをアップグレードし、コンピューターを再起動し、ソースファイルを再作成します。
VSCODE端子の共通コマンド
Apr 15, 2025 pm 10:06 PM
VSコード端子の一般的なコマンドには、端子画面のクリア（クリア）、現在のディレクトリファイル（LS）のリスト、現在のワーキングディレクトリ（CD）、現在のワーキングディレクトリパス（PWD）の印刷、新しいディレクトリ（MKDIR）の作成、空のディレクトリ（RMDIR）の削除、新しいファイルの作成（RM）の削除（RM）、COPのコピー（RM）、 （MV）ファイルコンテンツの表示（CAT）ファイルコンテンツを表示してスクロール（より少ない）ファイルコンテンツを表示するだけです（その他）ファイルの最初の数行（ヘッド）を表示する
VSCODE端子コマンドは使用できません
Apr 15, 2025 pm 10:03 PM
VSコード端末コマンドの原因とソリューションは使用できません：必要なツールはインストールされていません（Windows：WSL; MACOS：XCODE LINEツール）パス構成が間違っています（パス環境変数に実行可能ファイルを追加）許可問題（管理者としてのコードの実行）ファイアウォールまたはプロキシ制限制限（チェック設定、無制限） （再インストールまたは更新）端子構成は互換性がありません（異なる端子タイプまたはコマンドを試してください）特定の環境変数が欠落しています（必要な環境変数を設定します）
VSCODE前の次のショートカットキー
Apr 15, 2025 pm 10:51 PM
VSコードワンステップ/次のステップショートカットキー使用法：ワンステップ（後方）：Windows/Linux：Ctrl←; macOS：CMD←次のステップ（フォワード）：Windows/Linux：Ctrl→; macOS：CMD→
