WebView2 平台的元件

若要將 WebView2 新增到您的應用程式，請在開發機器上使用 WebView2 SDK，並將 WebView2 執行階段散發到使用者機器。

詳細內容：

Dev 電腦和使用者電腦上的元件

若要將 WebView2 新增到您的應用程式，請在開發機器上使用 WebView2 SDK，並將 WebView2 執行階段散發到使用者機器。

頂層 WebView2 元件

簡寫詞 描述
應用程式 適用於任何架構或平台，包含 WebView2 控制項執行個體的任何應用程式。 應用程式可以有使用 WebView2 控制項執行個體的區域，也可以有其他不使用控制項的區域。
SDK WebView2 SDK。 當您應用程式的一部分使用 WebView2 時，該程式碼可以搭配 WebView2 控制項的執行個體調用這些 API。 發行 SDK 會提供給使用者，且僅包含穩定的 API。 發行前版本 SDK 僅供開發人員使用，並包含一些實驗性 API。
Control WebView2 控制項的執行個體。 在應用程式中， 通常顯示為矩形區域，而不是包含 Web 內容。
執行階段 WebView2 執行階段，這是瀏覽器引擎。 安裝在使用者電腦上，以及開發和測試電腦上。
預覽頻道 Microsoft Edge 的預覽通道，Beta (接近穩定的) 、Dev 或 Canary (最新版本;每日) 。 僅適用於開發和測試機器，不適用於使用者機器。

WebView2 控制項、SDK 和執行階段

WebView2 控制項、WebView2 SDK 和 WebView2 執行階段具有下列角色：

元件 角色
WebView2 SDK 提供 API 供開發人員在應用程式的程式碼中使用。 Dev 在撰寫應用程式程式碼時在本機使用。 兩個版本：用於本機開發測試的預發行 SDK，以及用於為使用者開發可發佈程式碼的發行 SDK。
WebView2 控制項 您將 WebView2 控制項內嵌在應用程式中。 裝載執行階段;做為顯示 Web 內容的可見區域。
WebView2 執行階段 在 Dev 的測試電腦和使用者電腦上。 或者，在使用發行前版本 SDK 時，開發人員可以使用 Microsoft Edge 預覽通道進行本機測試，而非使用執行階段。

高階 WebView2 元件的圖表

下圖顯示開發機器和使用者機器上的高階 WebView2 元件：

開發機器和使用者機器上的應用程式

開發人員電腦

本節說明上圖的左欄。

用於開發 WebView2 應用程式的開發人員電腦由下列元件組成：

  • Visual Studio 專案 - 使用 Visual Studio 專案範本建立標準平台應用程式，然後將 WebView2 SDK 以 NuGet 套件的形式新增至專案。

    • 版面配置設計工具 - 在 Visual Studio 中配置您的控制項。

      • WebView2 控制項執行個體 - 應用程式的 Web 內容區域。 應用程式的網頁端程式碼會在此控制項中執行。

      • 原生控制項執行個體 - 應用程式的原生控制項和窗格。

    • WebView2 SDK。

      • 每個平台的 WebView2 API，包括 CoreWebView2、 CoreWebView2Controller和 CoreWebView2Environment。 主要由原生程式碼呼叫。

      • AddHostObjectToScript - 啟用將平台 API 和 WebView2 API 公開給 JavaScript 程式碼。 請參閱原生程式碼與 Web 程式碼的互通性

      • JavaScript API (WebView2Script 套件) - 由網頁端程式碼呼叫，用來與主應用程式通訊。

    • 平台 API - Web 平台提供的非 WebView2 API;供 Web 端程式碼使用。

  • WebView2 執行階段 - 包含 WebView2 API 並執行網頁端程式碼的 Microsoft Edge 瀏覽器元件。

使用者電腦

本節說明上圖的右側欄。

在使用者電腦上，執行 WebView2 應用程式時包含下列元件：

  • 使用者已安裝並正在使用的主機應用程式。

    • WebView2 原生程式碼：使用 WebView2 API 的原生程式碼。

    • Web 程式碼：在 WebView2 控制項執行個體中執行的 Web 端程式碼。

    • WebView2 控制項執行個體：WebView2 應用程式的網頁端程式碼會在 WebView2 控制項中執行。

    • 非 WebView2 原生程式碼。

    • 非 WebView2 Web 程式碼。

    • 原生控制項執行個體。

  • WebView2 執行階段。

具有預覽執行階段的發行前 SDK，或具有穩定執行階段的發行 SDK

您可以使用任一組合：

  • WebView2 發行前版本 SDK 搭配 Microsoft Edge (Beta、Dev 或 Canary) 的預覽通道，其中包含 WebView2 預覽執行階段。
  • 搭配 WebView2 執行階段的 WebView2 發行 SDK。
WebView2 SDK 類型 轉譯器平台 案例
發行前版本 SDK WebView2 預覽執行階段，包含在 Microsoft Edge (Beta、Dev 或 Canary) 的預覽通道中 若要針對即將進行的變更試驗和測試您的應用程式，請在開發人員電腦上。
發行 SDK WebView2 穩定執行階段 將您的應用程式運送給終端使用者。

WebView2 控制項、執行階段和 SDK

此圖表顯示下圖大綱：

WebView2 發行前版本 SDK：

  • .NET/C# API，包括實驗性 API。
  • WinRT/C# API，包括實驗性 API。
  • Win32/C++ API，包括實驗性 API。
  • WebView2Script 套件 (JavaScript API) 。

發行前版本 SDK 使用 Microsoft Edge 的預覽通道，其中包含：

  • WebView2 預覽執行階段。
  • WebView2Script 套件 (JavaScript API) 。

WebView2 發行 SDK：

  • .NET/C# API 的支援。
  • WinRT/C#。
  • Win32/C++。
  • WebView2Script 套件 (JavaScript API) 。

發行 SDK 使用 WebView2 Runtime (WebView2 Stable Runtime) 。

  • 執行階段包含 WebView2Script 套件 (JavaScript API) 。

您可以定期從 NuGet 下載最新的 SDK。 NuGet 連結位於 WebView2 SDK 的版本資訊中。

SDK 包含套件中的 WebView2Script JavaScript API。

另請參閱:

搭配 Microsoft Edge 預覽通道使用發行前 SDK 和實驗性 API

若要使用實驗性 API 開發應用程式的發行前版本，或針對即將推出的 SDK 變更測試您的應用程式：

  • 在開發人員電腦上的 Visual Studio 專案中，安裝 SDK NuGet 套件的Microsoft.Web.WebView2發行前版本。 撰寫使用 實驗性 API (和 Stable API) 的程式碼。
  • 在您的開發人員電腦上，安裝並使用 Microsoft Edge 的預覽通道。

若要將發行前版本應用程式發佈到測試電腦：

  • 在您的測試電腦上，安裝 Microsoft Edge 的預覽通道。

另請參閱:

搭配使用發行 SDK 和穩定 API 搭配執行階段

若要開發應用程式的發行版本：

  • 在開發人員電腦上的 Visual Studio 專案中，安裝 SDK NuGet 套件的Microsoft.Web.WebView2發行版本。 撰寫只使用 穩定 API 的程式碼。
  • 在您的開發人員電腦上，使用 WebView2 執行階段 (SDK 套件) 的一部分。

WebView2 執行階段就像是瀏覽器引擎，可做為應用程式中的元件使用。

有數種方法可以將您的應用程式和 Runtime 發佈給使用者。 請參閱上方在 使用者電腦上散發、安裝和更新 Runtime 的方法 。

另請參閱:

WebView2 應用程式的設計架構

主應用程式包含下列類別的元件：

  • 原生控制項執行個體。
  • WebView2 控制項執行個體。

主應用程式也包含下列程式碼類別：

  • 原生程式碼，會呼叫原生平台 API。
  • 呼叫 WebView2 API 的原生程式碼。
  • Web 程式碼 (JavaScript) ，其會呼叫 WebView2Script API、公開的原生 API 和 Web 平台 API。

WebView2 應用程式的設計架構

在使用者電腦上散發、安裝和更新 Runtime 的方法

有數種方法可隨應用程式散發 WebView2 執行階段：

散發 WebView2 執行階段的方法

分發方法名稱 描述 附註
連結至 Evergreen 執行階段啟動程序 在應用程式的安裝程式中，連結至 Evergreen Runtime 啟動載入器。 讓應用程式的安裝程式使用此連結，以程式設計方式將 Evergreen 啟動程序下載並安裝到使用者的電腦上。 然後叫用啟動載入器，為使用者的裝置安裝適當的執行階段。 適用於有線上連線的使用者。 Evergreen 啟動程序是一個微型安裝程序，它使用互聯網連接為用戶的 CPU 安裝正確的運行時。
封裝 Evergreen Runtime 啟動程序 將 Evergreen 啟動程序下載到您的 Dev 電腦。 與您的應用程式安裝程式一起封裝並散發 Evergreen 啟動程序。 然後，您的應用程式安裝程式會叫用啟動程序，在使用者的電腦上安裝 Runtime。 對於沒有可靠引導程式 CDN 網站連線的使用者。
封裝 Evergreen 執行階段獨立安裝程式 將 Evergreen 獨立安裝程式下載到您的 Dev 電腦，並將其與應用程式一起封裝。 將 Evergreen 獨立安裝程式與您的應用程式安裝程式一起封裝。 然後，應用程式的安裝程式會叫用 Evergreen 獨立安裝程式，在使用者的裝置上安裝 Runtime。 適用於離線使用者。 適用於離線使用者的大型獨立 Evergreen Runtime 安裝程式，其中包括 Evergreen Runtime。
封裝固定版本執行階段 將特定於版本、特定於 CPU 的執行階段下載至您的 Dev 電腦。 使用應用程式的安裝程式封裝並散發修正版本 Runtime。 應用程式的安裝程式會在使用者的電腦上安裝特定的修正版本 Runtime。 特殊案例，適用於當您需要特定版本的 API 時;避免測試最新的 API 是否可供使用。

上述方法的列出順序與 Microsoft Edge WebView2 頁面的 [下載 WebView2 執行階段] 一節中的順序相同，從輕量到重量級方法。 偏愛輕量級方法;如果有特殊案例需要，請使用重量級方法。

您的應用程式的安裝程式指 的是應用程式的安裝程式/更新程式，可以與您的應用程式分開，也可以是應用程式的一部分。

另請參閱:

與 HTTP 伺服器通訊

WebView2 控制項可作為主機應用程式與 HTTP 伺服器之間通訊的中繼。

主應用程式、WebView2 控制項和 HTTP 伺服器

另請參閱

developer.microsoft.com：

WebView2 應用程式開發的資源：

  • Last updated on