Webview

如果您需要呈現超出 VS Code API 支援範圍的自訂功能,可以使用Webview,它們具有高度的可自訂性。請務必理解,只有在絕對必要時才應使用 Webview。

✔️ 建議做法

  • 僅在絕對必要時使用 Webview
  • 僅在情境合適時才啟用您的擴充功能
  • 僅為當前視窗開啟 Webview
  • 確保檢視中的所有元素皆支援佈景主題(請參閱 webview-view-sample色彩語法 (color tokens) 文件)
  • 確保您的檢視遵循無障礙指引(色彩對比、ARIA 標籤、鍵盤導航)
  • 在工具列與檢視中使用指令動作

❌ 不建議做法

  • 用於推廣(升級、贊助商等)
  • 用於設定精靈 (wizards)
  • 在每個視窗開啟
  • 在擴充功能更新時開啟(請改用通知來詢問使用者)
  • 新增與編輯器或工作區無關的功能
  • 重複現有的功能(歡迎頁面、設定、組態等)

Webview 範例

Simple Browser

此擴充功能會在編輯器旁開啟瀏覽器預覽。

Weview sample - Browser

此範例展示如何在 VS Code 內部開發 VS Code Web。它使用 Webview 面板來呈現類似瀏覽器的視窗。

Pull Request

此擴充功能會在自訂樹狀檢視中顯示工作區儲存庫的 Pull Request,並使用 Webview 來呈現 Pull Request 的詳細檢視。

Webview sample - Pull Request

Webview 檢視

您也可以將 Webview 放入任何檢視容器(側邊欄或面板)中,這些元素稱為 Webview 檢視。同樣的 Webview 指引也適用於 Webview 檢視。

Webview View

此 Webview 檢視顯示用於建立 Pull Request 的內容,其中使用了下拉式選單、輸入欄位與按鈕。

© . This site is unofficial and not affiliated with Microsoft.