具有 Visual Composition 的 Win32 範例應用程式

發行項
11/07/2024

此 WebView2 範例會在 Win32 原生應用程式內嵌 WebView2 控制件。

範例名稱： WebView2SampleWinComp
存放庫目錄： WebView2SampleWinComp
方案檔： WebView2SampleWinComp.sln

此範例是建置為 Win32 Visual Studio 2019 專案。它會在 WebView2 環境中使用 C++ 和 HTML/CSS/JavaScript。

此範例使用 Windows 執行階段組合 API (也稱為視覺層) ，以利用 Windows UI 功能，並在 C++ Win32 應用程式中建立更好的外觀、風格和功能。

此範例展示 WebView2 的事件處理程式和 API 方法的選取範圍，可讓原生 Win32 應用程式直接與 WebView 互動，反之亦然。

如果這是您第一次使用 WebView，建議您先遵循在 Win32 應用程式中開始使用 WebView2 教學課程，這會說明如何建立 WebView2，並逐步解說一些基本的 WebView2 功能。

另請參閱 WebView2SampleWinComp 的自述檔。

步驟 1 - 安裝具有C++支援的 Visual Studio

Microsoft需要 Visual Studio。此範例不支援Microsoft Visual Studio Code。

此範例是建置為 Win32 Visual Studio 2019 專案。

如果尚未安裝 Visual Studio (最低必要版本) ，請在個別的視窗或索引標籤中，參閱在設定 WebView2 的開發環境中安裝 Visual Studio。遵循該節中的步驟，然後返回此頁面並繼續執行下列步驟。
如果您想要使用 Visual Studio 2017，請在 [專案屬性設定] 屬性 > [一般>平臺工具組] 中變更專案的 > [平臺工具組]。您可能也需要將 Windows SDK 變更為您可用的最新版本。

其他必要條件

WebView2 SDK - 此範例專案中已安裝 WebView2 SDK 的發行前版本。以下是選擇性地更新 SDK 的步驟。
Windows 10 SDK - 根據預設，此範例應用程式會使用安裝在您電腦上的最新 Window 10 SDK 版本。不過，Windows 10 SDK 版本 2004 (10.0.19041.0) 發生問題，導致此範例應用程式無法建置。以下提供步驟來安裝相容版本的 Windows 10 SDK。

步驟 2 - 複製或下載 WebView2Samples 存放庫

如果尚未完成，請將存放庫複製或下載 WebView2Samples 到本機磁碟驅動器。在個別的視窗或索引標籤中，請參閱為 WebView2 設定開發環境中的下載 WebView2Samples 存放庫。請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。

步驟 3 - 開啟方案並設定 Windows SDK 目標

在本機磁碟驅動器上 .sln ，在 Visual Studio 的目錄中開啟檔案：
- <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln
或：
- <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln
[檢閱解決方案動作] 對話方塊可能會開啟，提示您已安裝 Windows SDK 將項目複位目標為：
在 [Windows SDK 版本] 下拉式清單中，選取 10.0.20348.0 或更新版本，或 10.0.18362.0 或更早版本;請勿選取 10.0.19041.0。然後按下 [ 確定] 按鈕。 If those versions aren't available, do the steps in the "Install the Windows SDK" section below. 否則，請跳至下面的區段。

如果解決方案已開啟，您可以變更目標，如下所示：

在 方案總管 中，以滑鼠右鍵按兩下 WebView2SampleWinComp 專案 (不是解決方案) ，然後按兩下 [複位目標專案]。

步驟 4 - 安裝 Windows SDK

根據預設，此範例應用程式會使用您已安裝的最新 Window 10 SDK 版本。 Windows 10 SDK 版本 2004 (10.0 發生問題。19041.0) ，這會阻止此範例應用程式建置。如果您遇到此問題，請安裝 (，並將此項目複位為使用) 更新版本，例如 Windows 10 SDK 2104 (10.0 版。20348.0) 或舊版，例如 10.0。18362.1。

若要安裝 Windows 10 SDK：

移至 Windows SDK 和模擬器封存。
在下列其中一個數據列上，按兩下 [安裝 SDK] 連結：
- Windows 10 SDK 版本 2104 (10.0.20348.0) (或更新版本)
- Windows 10 SDK 版本 1903 (10.0.18362.1)
的版本特定複本 winsdksetup.exe 會下載到您的 Downloads 目錄。
在您的 Downloads 目錄中，開啟您剛才下載的 winsdksetup.exe 複本。
Windows SDK 設定視窗隨即開啟：
按兩下 [ 下一步 ] 按鈕，然後遵循提示。您可以接受預設值。安裝結束時，您所選取版本的 [Windows SDK 歡迎使用] 畫面隨即出現：
按兩下 [ 關閉] 按鈕。

執行上一個步驟：「開啟解決方案並設定 Windows SDK 目標」。或者，如果方案已開啟，請在 方案總管 中，以滑鼠右鍵按兩下 WebView2SampleWinComp 專案 (不是方案) ，然後按兩下 [複位目標專案]。

步驟 5 - 出現提示時安裝工作負載

如果出現提示，請安裝任何要求的Visual Studio工作負載。在個別的視窗或索引標籤中，請參閱為 WebView2 設定開發環境中的安裝 Visual Studio 工作負載。請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。

步驟 6 - 建置並執行專案

在上述的 Visual Studio (中開啟方案) 並回應任何安裝或安裝提示之後，專案會在 Visual Studio 中開啟，並在方案總管中顯示 WebView2SampleWinComp 專案：

Visual Studio 中的 WebView2SampleWinComp 專案

在 Visual Studio 頂端設定建置目標，如下所示：

在 [ 方案組態] 下拉式清單中，選取 [ 偵錯] 或 [ 發行]。
在 [ 解決方案平臺] 下拉式清單中，選取 [x86]、 [x64] 或 [ARM64]。
在 方案總管 中，以滑鼠右鍵按兩下 WebView2SampleWinComp 專案，然後選取 [建置]。

這會建置項目檔 SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxproj。
選 取 [偵錯>開始偵 錯] (F5) 。

範例應用程式視窗隨即開啟：
在 Visual Studio 中，選取 [ 偵錯>停止偵錯]。 Visual Studio 會關閉應用程式。

步驟 7 - 更新已安裝的套件

這是選擇性的步驟。此範例已預安裝：

WebView2 發行前版本 SDK 的版本。
WIL) (Windows 實作連結庫的版本。

在 方案總管 中，以滑鼠右鍵按兩下 WebView2SampleWinComp 專案， ([方案] 節點) ，然後選取 [管理 NuGet 套件]。 [NuGet 套件管理員] 索引標籤隨即開啟。
選取 [ 包含發行前版本] 複 選框。
按兩下 [ 已安裝] 索引標籤 。針對每個套件，請注意目前版本 (是否列出兩個版本，以及可用的更新版本號碼) 。
按兩下 [匯報] 索引標籤。
如果列出 Microsoft.Web.WebView2 SDK 的較新發行前版本，您可以選擇性地按兩下 [ 更新 ] 按鈕。發行前版本具有“-prerelease” 後綴，例如 1.0.1248-prerelease。如果您想要查看此步驟的詳細數據，請在個別的視窗或索引標籤中，參閱在設定 WebView2 的開發環境中安裝或更新 WebView2 SDK。請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。
如果列出了較新版本的 Windows 實作連結庫 (WIL) ，您可以選擇性地按兩下 [ 更新 ] 按鈕。
依照提示繼續更新套件。
再次建置並執行專案，現在使用更新的套件。

步驟 8 - 檢查程序代碼

在 Visual Studio 程式代碼編輯器中，檢查程式代碼：

共用方式為