Win32 範例應用程式

WebView2APISample 應用程式示範如何使用 WebView2 控制項與 WebView2 API 為 Win32 C++ 應用程式新增功能。這是 Win32 的主要範例，包含最新功能與 API 的測試網頁，以及數百個選單項目用來測試各種 API。

範例名稱： WebView2APISample
Repo directory： WebView2APISample
解決方案檔案： WebView2Samples.sln (位於父目錄，) \SampleApps\
專案名稱在方案總管中：WebView2APISample

WebView2APISample 在 Win32 原生應用程式中嵌入 WebView2 控制項。

本範例在 WebView2 環境中使用 C++ 及 HTML/CSS/JavaScript。

WebView2APISample 展示了 WebView2 的一系列事件處理程式與 API 方法，讓原生 Win32 應用程式能直接與 WebView2 控制項互動，反之亦然。

WebView2APISample 應用程式正在運行

這個範例及其解答檔案是獨一無二的：它包含了其他取樣的副本，存放在方案總管中。

WebView2APISample 是一個混合式應用程式，採用 Microsoft Edge WebView2 控制項;也就是說，這個應用程式結合了原生端和瀏覽器網頁端。請參閱《Microsoft Edge WebView2導論》中的混合應用方法。

執行中的 WebView2APIsample 應用程式視窗會顯示 WebView2 SDK 版本，以及 WebView2 執行時版本與路徑。有許多實用的選單和選單項目可以用來測試和展示 WebView2 API。

文章順序

要開始學習 WebView2，請參考以下建議的文章與範例專案序列：

請取得這篇 WebView2API 範例 ，利用本文來建立並執行，即使你自己的應用程式是針對不同平台的。
如果你對 Win32 以外的平台最感興趣，請參考你平台的範例文章;請參見範例應用程式。
請使用你感興趣平台的「入門指南」文章;請參閱使用者入門教學。

步驟 1：安裝 Visual Studio 2022

按下 Windows 鍵，輸入 Visual Studio 2022，然後點擊開啟。

Visual Studio 開啟最近的對話 框。

本範例不支援 Microsoft Visual Studio Code。
如果沒有安裝 Visual Studio 2022，請進入 Visual Studio 2022 ，然後使用 下載 Visual Studio 組合按鈕。

繼續下一步，步驟 2：複製 WebView2Samples 倉庫。

舊版 Visual Studio

同時也支援 Visual Studio 2019 和 2017。

Visual Studio 2019

此範例是使用 Visual Studio 2019 製作的，作為 Visual Studio 2019 專案。要直接開啟這個範例的專案，可以使用 Visual Studio 2019。

Visual Studio 2017

如果你想用 Visual Studio 2017 開啟這個範例：

在 Visual Studio 2017 中開啟解決方案。
在 專案屬性、 > 配置屬性 > 、一般 > 平台工具組中更改專案的平台工具組。
你可能還需要在電腦上安裝一個最新的 Windows SDK。

步驟 2：克隆 WebView2Samples 儲存庫

按下 Windows + E。

檔案總管視窗會打開。
請前往你複製或計劃複製 WebView2Samples 倉庫的地方。

範例路徑：

C:\Users\localAccount\GitHub\WebView2Samples
如果還沒做，請將倉庫複製 WebView2Samples 到你的本地硬碟。在另一個視窗或分頁中，請參考「為 WebView2 設定你的開發環境，Clone the WebView2Samples repo」。請依照該部分的步驟操作，然後返回此頁繼續下方。
如果還沒開啟，請開啟 git bash 指令提示字元：按下 Windows 鍵，然後輸入 git bash。

拉取提交
切換到複製的倉庫目錄：
```
cd C:/Users/localAccount/GitHub/WebView2Samples`
```
替換你克隆 WebView2Samples 倉庫的路徑。
將最新的提交資料拉到你本地的倉庫副本：
```
git pull
```
建立一個運作中的分支
建立一個運作中的分支，並切換到它：
```
git checkout -b test
```
退貨： Switched to branch 'test'

你現在可以自由修改工作分支中的程式碼，而不用修改倉庫「主」分支的程式碼。之後你可能會想切回「主」分支，例如拉取新的提交，或是根據「主」分支建立另一個分支。

步驟 3：在 Visual Studio 中開啟解決方案

打開並建立樣本會改變樣本。最佳做法是避免更改「主」分支裡的程式碼，透過建立並切換到一個可用的分支，這可以在 Visual Studio 裡完成。

按下 Windows 鍵，輸入 Visual Studio 2022，然後點擊開啟。

Visual Studio 開啟的最近對話 框會開啟：
點擊右下角 的「繼續無程式碼」。
在 Visual Studio 2022 中，選擇 「檔案>開啟>專案/解決方案」。

開啟專案 /解決方案 對話框。
進入檔案， WebView2Samples\SampleApps\WebView2Samples.sln 然後點擊開啟按鈕。

範例路徑：
```
C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
```
與其他一些取樣不同，取樣倉庫目錄中沒有專門 .sln 的檔案包含這個取樣的 Readme。取樣的檔案 (.sln 包含其他範例專案，) 位於父目錄中。

檢視 專案與解決方案變更 對話框可能會開啟：
點擊確定按鈕。

解決方案可在 Visual Studio 開啟：

步驟四：更新工具組

接續上述：審查 解決方案行動：重新定向專案 對話框可能會開啟：

「檢視解決方案行動」對話框

這張截圖顯示：

Windows SDK 版本：10.0 (最新安裝版本)
Platform Toolset：Upgrade to v143

以下專案列出這些選項：

WebView2APISample.vcxproj - 現在，主要樣本。
WebView2APISampleWinComp.vcxproj ——不同的樣本。

如果該對話框開啟，請點擊確定按鈕。

Visual Studio 的輸出面板會顯示結果，例如：

Upgrading project 'WebView2APISample'...
Configuration 'Debug|ARM64': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Debug|Win32': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Debug|x64': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Release|Win32': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Release|ARM64': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Release|x64': changing Platform Toolset to 'v143' (was 'v142').
Upgrading project 'WebView2SampleWinComp'...
Configuration 'Debug|Win32': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Debug|x64': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Release|Win32': changing Platform Toolset to 'v143' (was 'v142').
Configuration 'Release|x64': changing Platform Toolset to 'v143' (was 'v142').
Retargeting End: 2 completed, 0 failed, 0 skipped

在瀏覽器中，會開啟一個 遷移報告 頁面，例如： file:///C:/Users/localAccount/GitHub/WebView2Samples/SampleApps/UpgradeLog.htm

步驟五：更新 .NET

接著說：在 Visual Studio 右上角的方案總管中，可能會出現訊息：此專案針對未安裝的 .NET 版本。

如果你收到那則訊息，請點擊訊息旁的安裝連結。

Visual Studio 安裝程式對話框會開啟：
點擊安裝按鈕。

使用者 帳號控制 對話框會打開。
點擊 「是」 按鈕。

Visual Studio 安裝程式對話框會顯示下載和安裝進度，然後顯示安裝已完成。
點擊關閉按鈕。

Visual Studio 安裝程式對話框關閉。

方案總管顯示時不會顯示「未安裝」訊息。

步驟 6：安裝 Visual Studio 的 C++ 工作負載

接著說：如果你在嘗試建置專案時被要求安裝工作負載：

在 Visual Studio 中，選擇 「工具>」「取得工具與功能」。

會打開 Visual Studio 安裝程式對話框，接著是修改對話框。
在 Workloads 標籤中，選擇 桌面開發卡（Desktop development with C++ ），卡片上會出現勾選標記。
在右側 的安裝細節 中，展開 「Desktop Development with C++」。
點擊更新或安裝按鈕。

安裝商關閉。

另請參閱:

步驟 4 - 在 Win32 應用程式中「開始使用 WebView2」時，若有安裝工作負載。
在 Windows Studio 安裝 Visual Studio 工作負載，設定你的開發環境以支援 WebView2。

你不需要安裝 WiX 才能繼續;那是另一個專案的解答檔案。 WiX 安裝包含在 WiX Burn Bundle 中，以部署 WebView2 執行環境。

步驟 7：使用舊版 SDK 建置並執行

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

在 解決方案設定下 拉選單中，選擇除錯。
在 解決方案平台 下拉選單中，選擇 x64。
在方案總管中，右鍵點擊 WebView2APISample 專案，然後選擇建置。

此時會建立專案檔案 SampleApps/WebView2APISample/WebView2APISample.vcxproj。
選擇除錯>開始除錯 (F5) 。

WebView2APISample 應用程式視窗會開啟：
關閉範例應用程式視窗。

步驟 8：更新預發布版的 WebView2 SDK

這個範例的 repo 版本安裝了 WebView2 SDK 的預發布版本。以下將 WebView2 SDK 更新為最新的預發布版本，除非) (已安裝最新預發布 SDK 。預發布 SDK 支援最新的實驗性 API 及最新的「Stable in Prerelease」API。

請查看 GitHub 上 WebView2APISample 應用程式倉庫副本中預發布 SDK 的版本號：詳見 packages.config。

例如：

<package id="Microsoft.Web.WebView2" version="1.0.2950-prerelease" targetFramework="native" />
<package id="Microsoft.Windows.ImplementationLibrary" version="1.0.220201.1" targetFramework="native" />

請參考 WebView2 SDK 的最新預釋版本號。
在 Visual Studio 的 方案總管，右鍵點擊 WebView2APISample 專案， (非) 其上方的解決方案節點，然後選擇管理 NuGet 套件。

在 Visual Studio 開啟 NuGet 套件管理器 面板。
在 NuGet 套件管理器中，點選 已安裝 標籤：
在搜尋文字框右側，選擇 「包含預釋」 勾選框。
在左側選擇 Microsoft.Web.WebView2。
在右側的版本下拉選單中，選擇最新的 預發布 版本。
在版本下拉選單右側，點擊更新按鈕。

預覽變更對話框會開啟：
點擊 「申請 」按鈕。
重複上述步驟來更新 Microsoft.Windows.Implementation.Library，但你可以選擇最新的版本，而不是最新的預發布版本。

本專案已安裝最新 WebView2 SDK 預發布版本。

另請參閱:

關於 WebView2 SDK 發布說明中新增 API 的階段。

步驟 9：使用更新版的 SDK 建置並執行

假設你更新了 WebView2 SDK 的預發布版本，請重新編譯並執行範例：

在方案總管中，右鍵點擊 WebView2APISample 專案，然後選擇建置。
選擇除錯>開始除錯 (F5) 。

WebView2APISample 應用程式視窗會開啟：
關閉範例應用程式視窗。

你取得、更新、建置並執行 Win32 範例應用程式。

步驟10：研究樣本

以下章節說明樣本的運作方式。

查看專案檔案

這些步驟假設你已經取得、更新、建置並執行了 Win32 範例應用程式。

WebView2APISample 範例與專案是 Win32 的主要範例。

在 Visual Studio 開啟 WebView2Samples.sln 。

範例路徑：
```
C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
```
此解答檔案包含 WebView2APISample) (的主要範例及其他範例：
在方案總管中，展開 WebView2APISample 專案：

混合式應用程式架構

WebView2APISample 應用程式是一個混合式應用程式的範例，包含 Win32 原生部分與 WebView 部分：

混合式應用程式

Win32 部分可以直接存取原生 Windows API。 WebView2APISample 應用程式的頂端是用 C++ 撰寫的 Win32 元件。這個應用程式部分會接收使用者的 UI 輸入，並用來控制 WebView。
WebView 是一個容器，可容納標準網頁技術 (HTML、CSS 及 JavaScript) 。 WebView2APISample 應用程式的主要部分是一個 WebView，可利用標準網頁技術 (HTML/CSS/JavaScript) 重新利用。 WebView 可導向網站或本地內容。

這種混合方式讓你能利用網頁技術更快地創建和迭代，同時仍能利用原生功能。 WebView2APISample 應用程式展示了 Win32 元件與 WebView 元件如何互動。

這個範例應用程式包含超過 100 個選單項目，展示了許多 Win32/C++ 框架下的 WebView2 API。以下章節將聚焦於混合式應用程式實施的基礎。

專案檔案

本節簡要說明倉庫中的一些關鍵檔案。 WebView2APISample 應用程式是以垂直方式劃分成元件，而非水平劃分至層。每個元件都實作了一類範例功能的整個工作流程，從監聽選單指令到呼叫 WebView API 方法來實作。

App.cpp

這是執行 WebView2APISample 應用程式的頂層檔案。它讀取命令列選項、建立程序環境，並處理應用程式的執行緒模型。

此檔案實作應用程式視窗，方式如下：

設定好所有 Win32 控制項。
初始化 WebView 環境與 WebView。
在 WebView 中新增事件處理器，並建立所有處理應用程式各種功能的元件。

這個 AppWindow 類別會從範例應用程式的視窗選單中處理指令。

此檔案在下方 AppWindow.cpp關鍵功能中有更詳細描述。

此元件負責 檔案選單 中的指令 (除退出) 外， DocumentTitleChanged 以及事件處理。

此元件負責從腳本選單中執行指令，這些指令包括透過注入 JavaScript、發布 WebMessage、在網頁中新增原生物件，或使用 DevTools 協定與網頁溝通來與 WebView 互動。

此元件負責處理程序選單中的指令，這些指令涉及與瀏覽器程序的互動。它也會處理 ProcessFailed 事件，以防瀏覽器程序或其渲染程序當機或無反應。

這個元件負責從設定選單中執行指令。此元件同時負責在建立新 WebView 時，從舊的 WebView 複製設定。大部分與 ICoreWebView2Settings 介面互動的程式碼都在這裡找到。

此元件負責處理檢視選單中的指令，以及與 WebView 大小調整和可見性相關的任何功能。當應用程式視窗被調整大小、最小化或還原時， ViewComponent WebView 會相應調整大小、隱藏或顯示。它也會回應事件。ZoomFactorChanged

當你選擇情境>網路訊息選單項目時，該ScenarioWebMessage元件會被建立。此元件實作一個範例應用程式，包含 C++ 部分與 HTML + JavaScript 部分，兩者透過非同步發布與接收訊息彼此通訊。

此元件在下方的 ScenarioWebMessage (.html、.cpp 及 .h) 中有更詳細的描述。

這個元件會在你選擇情境>主機物件 選單項目時建立。它展示了原生應用程式與 HTML 網頁之間的通訊，透過主機物件注入。宿主物件的介面在中HostObjectSample.idl宣告，物件本身則以實作。HostObjectSampleImpl.cpp

另請參閱:

從網頁端程式碼呼叫原生端程式碼

AppWindow.cpp 的主要功能

AppWindow.cpp 透過以下操作實作應用程式視窗：

設定好所有 Win32 控制項。
初始化 WebView 環境與 WebView。
在 WebView 中新增事件處理器，並建立所有處理應用程式各種功能的元件。

這個 AppWindow 類別會從範例應用程式的視窗選單中處理指令。以下是中 AppWindow.cpp的一些關鍵函數。

初始化WebView ()

在 AppWindow.cpp中，函 InitializeWebView() 式使用 CreateCoreWebView2EnvironmentWithOptions 建立 WebView2 環境。

要查看這些 API 呼叫的運作，請檢視以下程式碼：InitializeWebView()

HRESULT hr = CreateCoreWebView2EnvironmentWithOptions(
    subFolder, nullptr, options.Get(),
    Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
        this, &AppWindow::OnCreateEnvironmentCompleted)
        .Get());
if (!SUCCEEDED(hr))
{
    if (hr == HRESULT_FROM_WIN32(ERROR_FILE_NOT_FOUND))
    {
        MessageBox(
            m_mainWindow,
            L"Couldn't find Edge installation. "
            "Do you have a version installed that's compatible with this "
            "WebView2 SDK version?",
            nullptr, MB_OK);
    }
    else
    {
        ShowFailure(hr, L"Failed to create webview environment");
    }
}

OnCreateEnvironmentCompleted ()

建立環境後，我們會使用 CreateCoreWebView2Controller。

OnCreateEnvironmentCompleted回調函數會傳入 CreateCoreWebView2EnvironmentWithOptions 。InitializeWebView() 回調會儲存環境指標，然後用它來建立新的 WebView：

HRESULT AppWindow::OnCreateEnvironmentCompleted(
    HRESULT result, ICoreWebView2Environment* environment)
{
    CHECK_FAILURE(result);

    m_webViewEnvironment = environment;

    CHECK_FAILURE(m_webViewEnvironment->CreateCoreWebView2Controller(
        m_mainWindow, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                            this, &AppWindow::OnCreateCoreWebView2ControllerCompleted)
                            .Get()));
    return S_OK;
}

OnCreateCoreWebView2ControllerCompleted ()

OnCreateCoreWebView2ControllerCompleted回調函數會傳入 CreateCoreWebView2Controller 。InitializeWebView() 這段回顧：

初始化與 WebView 相關的狀態。
註冊一些事件處理程序。
建立應用程式元件。

RegisterEventHandlers ()

該 RegisterEventHandlers 函數在中稱為 CreateCoreWebView2Controller。它會設定應用程式使用的一些事件處理器，並將其加入 WebView。

欲了解更多關於 WebView2 事件處理程序的資訊，請參閱 ICoreWebView2。

以下是來自 RegisterEventHandlers()的程式碼片段，我們在那裡為事件設定了一個事件 NewWindowRequested 處理器。當網頁中的 JavaScript 呼叫 window.open()時，會觸發此事件。 ICoreWebView2NewWindowRequestedEventHandler產生新AppWindow視窗，並將新視窗的 WebView 傳回瀏覽器，讓它能從window.open()通話中回傳。與我們呼叫 CreateCoreWebView2EnvironmentWithOptionsCreateCoreWebView2Controller和不同，我們沒有提供回調方法，而是直接提供一個 C++ lambda 格式：

CHECK_FAILURE(m_webView->add_NewWindowRequested(
    Callback<ICoreWebView2NewWindowRequestedEventHandler>(
        [this](
            ICoreWebView2* sender,
            ICoreWebView2NewWindowRequestedEventArgs* args) {
            wil::com_ptr<ICoreWebView2Deferral> deferral;
            CHECK_FAILURE(args->GetDeferral(&deferral));

            auto newAppWindow = new AppWindow(L"");
            newAppWindow->m_isPopupWindow = true;
            newAppWindow->m_onWebViewFirstInitialized = [args, deferral, newAppWindow]() {
                CHECK_FAILURE(args->put_NewWindow(newAppWindow->m_webView.get()));
                CHECK_FAILURE(args->put_Handled(TRUE));
                CHECK_FAILURE(deferral->Complete());
            };

            return S_OK;
        })
        .Get(),
    nullptr));

ScenarioWebMessage (.html、.cpp 和 .h)

這些 ScenarioWebMessage 檔案展示了 Win32 主機如何修改 WebView、WebView 如何修改 Win32 主機，以及 WebView 如何透過存取 Win32 主機的資訊來自我修改。這是非同步完成的。

當你選擇情境>網路訊息選單項目時，該ScenarioWebMessage元件會被建立。該 ScenarioWebMessage 元件實作了一個範例應用程式，包含 C++ 部分與 HTML+JavaScript 部分，兩者透過非同步發佈與接收訊息來彼此通訊：

網路訊息：張貼與接收訊息

以下章節將示範每個離散函式如何使用 WebView2APISample 應用程式運作，並說明如何實作此功能。

首先，前往範例應用程式中的 ScenarioWebMessage 網頁應用程式：

開啟 () WebView2APISample 應用程式執行。
在情境選單中，選擇「網路訊息」。

WebView 顯示一個名為 WebMessage 範例頁面 的網頁 (ScenarioWebMessage.html) ：

要探索此功能 ScenarioWebMessage ，您可以依照頁面上的指示操作，或依照以下步驟操作。

從 Win32 主機向 WebView 發布訊息

以下步驟說明 Win32 主機如何修改 WebView。在這個範例中，你會將文字變成藍色：

如上所述， (ScenarioWebMessage.html) 開啟 WebMessage 範例頁面。
在腳本選單中，選擇「發佈網頁訊息 JSON」。

會出現包含預寫程式碼 {"SetColor":"blue"} 的對話框。
按一下確定。

頁面「 發布訊息 」區塊的文字由黑色變為藍色。

運作方式

在 ScriptComponent.cpp中，呼叫 PostWebMessageAsJson 會向網頁應用程式發布使用者輸入 ScenarioMessage.html ：

// Prompt the user for some JSON and then post it as a web message.
void ScriptComponent::SendJsonWebMessage()
{
   TextInputDialog dialog(
      m_appWindow->GetMainWindow(),
      L"Post Web Message JSON",
      L"Web message JSON:",
      L"Enter the web message as JSON.",
      L"{\"SetColor\":\"blue\"}");
   if (dialog.confirmed)
   {
      m_webView->PostWebMessageAsJson(dialog.input.c_str());
   }
}

在網頁應用程式中，事件監聽器用於接收並回應網路訊息。以下程式碼摘錄來自 ScenarioWebMessage.html。事件監聽器若參數為「SetColor」，則會改變文字顏色：
```
window.chrome.webview.addEventListener('message', arg => {
   if ("SetColor" in arg.data) {
      document.getElementById("colorable").style.color = arg.data.SetColor;
   }
});
```

從 WebView 收到訊息 (到 Win32 主機)

以下步驟說明 WebView 如何透過更改 Win32 應用程式的標題來修改 Win32 主機應用程式：

如上所述， (ScenarioWebMessage.html) 開啟 WebMessage 範例頁面。
請注意 WebView2APISample 應用程式的標題，顯示在視窗左上角圖示旁。最初是 WebView2APISample - Microsoft Edge WebView2。
在頁面的 「接收訊息 」區塊，輸入新標題，然後點擊 「發送 」按鈕。
請注意 WebView2APISample 應用程式標題欄中顯示的新標題。

運作方式

在 ScenarioWebMessage.html中， windows.chrome.webview.postMessage () 將使用者輸入傳送給主機應用程式：

function SetTitleText() {
   let titleText = document.getElementById("title-text");
   window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);
}

在 ScenarioWebMessage.cpp中，我們使用 add_WebMessageReceived 來註冊事件處理器。當我們收到事件後，驗證輸入後，會將應用程式視窗的標題改 (m_appWindow) ：

// Setup the web message received event handler before navigating to
// ensure we don't miss any messages.
CHECK_FAILURE(m_webview->add_WebMessageReceived(
   Microsoft::WRL::Callback<ICoreWebView2WebMessageReceivedEventHandler>(
      [this](ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args)
{
   wil::unique_cotaskmem_string uri;
   CHECK_FAILURE(args->get_Source(&uri));

   // Always validate that the origin of the message is what you expect.
   if (uri.get() != m_sampleUri)
   {
      return S_OK;
   }
   wil::unique_cotaskmem_string messageRaw;
   CHECK_FAILURE(args->TryGetWebMessageAsString(&messageRaw));
   std::wstring message = messageRaw.get();

   if (message.compare(0, 13, L"SetTitleText ") == 0)
   {
      m_appWindow->SetTitleText(message.substr(13).c_str());
   }
   return S_OK;
}).Get(), &m_webMessageReceivedToken));

往返訊息 (從 WebView 發送到主機，再到 WebView)

以下步驟說明 WebView 如何從 Win32 主機取得資訊，並透過顯示 Win32 應用程式大小來修改自身。

如上所述， (ScenarioWebMessage.html) 開啟 WebMessage 範例頁面。
在頁面的往返區塊，點擊 GetWindowBounds 按鈕。

按鈕下方的文字框顯示 WebView2APISample 應用程式的範圍。

運作方式

當點擊 Get window bounds 按鈕時， GetWindowBounds 會呼叫中的 ScenarioWebMessage.html 函式。 GetWindowBounds 呼叫 window.chrome.webview.postMessage () 以傳送訊息給主機應用程式：
```
function GetWindowBounds() {
    window.chrome.webview.postMessage("GetWindowBounds");
}
```

在 ScenarioWebMessage.cpp中，我們使用 add_WebMessageReceived 來註冊接收到的事件處理程序。驗證輸入後，事件處理器會從應用程式視窗取得視窗邊界。 PostWebMessageAsJson 會將邊界傳送給網頁應用程式：

if (message.compare(L"GetWindowBounds") == 0)
{
   RECT bounds = m_appWindow->GetWindowBounds();
   std::wstring reply =
      L"{\"WindowBounds\":\"Left:" + std::to_wstring(bounds.left)
      + L"\\nTop:" + std::to_wstring(bounds.top)
      + L"\\nRight:" + std::to_wstring(bounds.right)
      + L"\\nBottom:" + std::to_wstring(bounds.bottom)
      + L"\"}";
   CHECK_FAILURE(sender->PostWebMessageAsJson(reply.c_str()));
}

在 ScenarioWebMessage.html中，事件監聽者回應 WindowBounds 訊息並顯示視窗的界限：

window.chrome.webview.addEventListener('message', arg => {
   if ("WindowBounds" in arg.data) {
      document.getElementById("window-bounds").value = arg.data.WindowBounds;
   }
});

另請參閱

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-11-27

共用方式為

Win32 範例應用程式

文章順序

步驟 1：安裝 Visual Studio 2022

舊版 Visual Studio

Visual Studio 2019

Visual Studio 2017

步驟 2：克隆 WebView2Samples 儲存庫

步驟 3：在 Visual Studio 中開啟解決方案

步驟四：更新工具組

步驟五：更新 .NET

步驟 6：安裝 Visual Studio 的 C++ 工作負載

步驟 7：使用舊版 SDK 建置並執行

步驟 8：更新預發布版的 WebView2 SDK

步驟 9：使用更新版的 SDK 建置並執行

步驟10：研究樣本

查看專案檔案

混合式應用程式架構

專案檔案

App.cpp

AppWindow.cpp (視窗選單)

FileComponent.cpp (檔案選單)

ScriptComponent.cpp (腳本選單)

ProcessComponent.cpp (製程選單)

SettingsComponent.cpp (設定選單)

ViewComponent.cpp (查看選單)

ScenarioWebMessage.cpp 與 ScenarioWebMessage.html (劇情選單)

ScenarioAddHostObject.cpp 和 ScenarioAddHostObject.html (劇本選單)

AppWindow.cpp 的主要功能

初始化WebView ()

OnCreateEnvironmentCompleted ()

OnCreateCoreWebView2ControllerCompleted ()

RegisterEventHandlers ()

ScenarioWebMessage (.html、.cpp 和 .h)

從 Win32 主機向 WebView 發布訊息

運作方式

從 WebView 收到訊息 (到 Win32 主機)

運作方式

往返訊息 (從 WebView 發送到主機，再到 WebView)

運作方式

另請參閱

意見反應

其他資源