Aplicativo de exemplo Win32

O aplicativo WebView2APISample demonstra como usar o controle WebView2 e as APIs WebView2 para adicionar recursos a um aplicativo Win32 C++.

• Nome da amostra: WebView2APISample
• Diretório de repositório: WebView2APISample
• Arquivo da solução: WebView2Samples.sln (localizado no diretório pai, \SampleApps\)
• Nome do projeto no Gerenciador de Soluções: WebView2APISample

O WebView2APISample insira um controle WebView2 em um aplicativo nativo do Win32.

Este exemplo é criado como um projeto do Win32 Visual Studio 2019. Ele usa C++ e HTML/CSS/JavaScript no ambiente WebView2.

O WebView2APISample mostra uma seleção de manipuladores de eventos e métodos de API do WebView2 que permitem que um aplicativo nativo do Win32 interaja diretamente com um controle WebView2 e vice-versa.

Este exemplo e seu arquivo de solução são exclusivos: ele contém uma cópia de outros exemplos, em Gerenciador de Soluções.

WebView2APISample é um aplicativo híbrido criado com o controle WebView2 do Microsoft Edge; ou seja, esse aplicativo combina um lado nativo e um lado do aplicativo Web do navegador. Consulte Abordagem de aplicativo híbrido em Introdução ao Microsoft Edge WebView2.

A janela de aplicativo WebView2APISample em execução mostra a versão do SDK do WebView2 e também a versão e o caminho do WebView2 Runtime. Há muitos menus e menus úteis fornecidos para você:

Se essa for sua primeira vez usando o WebView, recomendamos primeiro seguir o tutorial Introdução ao WebView2 em aplicativos Win32, que aborda como criar um aplicativo WebView2 e percorre algumas funcionalidades básicas do WebView2. Esse tutorial específico não começa com você criando um novo projeto Win32 usando um modelo de projeto; Em vez disso, ele começa com um projeto concluído no repositório WebView2Samples e orienta você através do código WebView2 adicionado.

Para obter detalhes de eventos e manipuladores de API no WebView2, consulte Referência de API do WebView2.

Etapa 1 – Instalar um canal de visualização do Microsoft Edge

Em seguida, verifique se há um canal de visualização do Microsoft Edge no instalado, em um sistema operacional com suporte. Atualmente, recomendamos a versão mais recente do canal canário.

1. Se um canal de visualização do Microsoft Edge (Beta, Dev ou Canary) ainda não estiver instalado, em uma janela ou guia separada, consulte Instalar um canal de visualização do Microsoft Edge em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 2 – Instalar o Visual Studio

O Microsoft Visual Studio é necessário (versão mínima: Visual Studio 2019). Não há suporte para o microsoft Visual Studio Code para este exemplo. Este exemplo de repositório é um projeto do Visual Studio 2019. O exemplo também pode ser aberto usando o Visual Studio 2022.

1. Se o Visual Studio ainda não estiver instalado com suporte ao C++, em uma janela ou guia separada, consulte Instalar o Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção para instalar o Visual Studio com suporte do C++ e, em seguida, retorne a esta página e continue as etapas abaixo.

Se você quiser usar o Visual Studio 2017, depois de abrir a solução no Visual Studio 2017, altere o conjunto de ferramentas de plataforma do projeto nas propriedades de Configuração de Propriedades > do Projeto Conjunto geral > de ferramentas > da plataforma.

Para usar o Visual Studio 2017, talvez você também precise instalar um SDK recente do Windows em seu computador.

Etapa 3 – Clonar o repositório WebView2Samples

1. Se ainda não tiver sido feito, clone o WebView2Sample repositório para sua unidade local. Em uma janela ou guia separada, confira Baixar o repositório WebView2Samples em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue abaixo.

2. Se você clonou anteriormente o repositório, puxe os commits mais recentes para sua cópia local do repositório.

Etapa 4 – Abrir a solução no Visual Studio

1. Em sua unidade local, abra o .sln arquivo no Visual Studio:

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2Samples.sln

   ou:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2Samples.sln

O exemplo e o projeto do WebView2APISample são o exemplo main Win32.

Ao contrário de alguns outros exemplos, não há um arquivo dedicado .sln no diretório de repositório de exemplo que contenha o Readme deste exemplo. Em vez disso, o .sln arquivo desse exemplo (incluindo outros projetos de exemplo também) está no diretório pai.

Etapa 5 – Instalar cargas de trabalho se solicitado

1. Cargas de trabalho do Visual Studio – se solicitado, instale todas as cargas de trabalho do Visual Studio solicitadas. Em uma janela ou guia separada, consulte Instalar cargas de trabalho do Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue abaixo.

Continue as etapas abaixo.

Etapa 6 – Exibir o projeto aberto

1. Em sua unidade local, abra novamente a solução WebView2Samples na mesma versão do Visual Studio que você configurou:

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2Samples.sln

   ou:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2Samples.sln

2. Clique no botão OK . A caixa de diálogo Projetos de Retarget pode ser aberta:

   

   Exemplo de versões instaladas:

   

3. Clique no botão OK .

Gerenciador de Soluções mostra vários projetos, incluindo o projeto WebView2APISample:

Etapa 7 – Criar o projeto usando a versão do SDK instalada

Na parte superior do Visual Studio, defina o destino de build da seguinte maneira:

1. Na lista suspensa Configurações da Solução , selecione Depuração ou Versão.

2. Na lista suspensa Plataformas de Solução , selecione x86, x64 ou ARM64.

3. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2APISample e selecione Compilar.

   

   Isso cria o arquivo SampleApps/WebView2APISample/WebView2APISample.vcxprojde projeto .

Etapa 8 – Executar (depuração) o projeto

1. Selecione Depurar>Iniciar Depuração (F5).

   Solução de problemas: se você ignorar a etapa de build e selecionar imediatamente Depurar>Iniciar Depuração (F5), uma caixa de diálogo poderá aparecer: "Não é possível iniciar o programa: não é possível localizar o caminho especificado":

   

   Para corrigir esse problema: em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2APISample e selecione Compilar.

   A janela do aplicativo WebView2APISample é aberta:

   

2. No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha o aplicativo.

Etapa 9 – Atualizar o SDK do WebView2 pré-lançamento

Em seguida, você atualizará o SDK do WebView2 e, em seguida, compilará novamente o projeto.

Se você quiser ver rapidamente qual versão do SDK do WebView2 está instalada na cópia do repositório do aplicativo WebView2APISample no GitHub, consulte packages.config.

A versão de repositório deste exemplo tem uma versão de pré-lançamento do SDK do WebView2 instalado. Abaixo, você o atualizará para a versão de pré-lançamento mais recente do SDK do WebView2 ou confirmará que o SDK mais recente está instalado. O uso de um SDK de pré-lançamento fornece acesso à funcionalidade mais recente.

Examine e, possivelmente, atualize os pacotes do NuGet instalados da seguinte maneira:

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2APISample (não no nó de solução acima dele) e selecione Gerenciar Pacotes NuGet.

   O painel Gerenciador de Pacotes do NuGet é aberto no Visual Studio.

2. À direita da caixa de texto de pesquisa, selecione a caixa Incluir marcar de pré-lançamento.

3. No Gerenciador de Pacotes do NuGet, clique na guia Instalado. No lado direito de cada pacote, marcar se há um número de versão mais recente listado, bem como o número de versão existente.

4. Clique na guia Atualizar . Se as atualizações estiverem disponíveis para pacotes WebView2 ou WIL, se desejar, você poderá atualizar o pacote aqui.

5. À direita, na lista suspensa Versão , verifique se o pré-lançamento mais recente está selecionado, se você quiser poder experimentar as APIs mais recentes:

   

6. Clique no botão Atualizar .

   A caixa de diálogo Alterações de Visualização é exibida:

   

   A imagem acima é de outro projeto, mas é semelhante.

7. Clique no botão OK .

A versão mais recente do SDK do WebView2 agora está instalada para este projeto.

Etapa 10 – Criar e executar o projeto com o SDK atualizado

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2APISample e selecione Compilar.

   

2. Selecione Depurar>Iniciar Depuração (F5).

   A janela do aplicativo WebView2APISample é aberta:

   

3. Use o aplicativo WebView2APISample .

4. No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha o aplicativo.

Isso conclui as etapas numeradas para criar e executar o aplicativo de exemplo Win32. Em seguida, no editor de código do Visual Studio, inspecione o código, de acordo com as seções a seguir.

Arquitetura de aplicativo híbrido

O aplicativo WebView2APISample é um exemplo de aplicativo híbrido, com uma parte nativa do Win32 e uma parte do WebView.

• A parte Do Win32 pode acessar diretamente APIs nativas do Windows.
• O WebView é um contêiner para tecnologias Web padrão (HTML, CSS e JavaScript).

• Seção 1: A parte superior do aplicativo WebView2APISample é um componente Win32 escrito em C++. Essa parte do aplicativo usa entradas da interface do usuário e as usa para controlar o WebView.

• Seção 2: O main parte do aplicativo WebView2APISample é um WebView que pode ser reaproveitado usando tecnologias Web padrão (HTML/CSS/JavaScript). Ele pode ser navegado para sites ou conteúdo local.

Essa abordagem híbrida permite que você crie e itere mais rapidamente usando tecnologias web, ao mesmo tempo em que pode aproveitar a funcionalidade nativa. O aplicativo WebView2APISample demonstra como o componente Win32 e o componente WebView podem interagir entre si.

Este amplo aplicativo de exemplo cresceu para incluir mais de 150 menuitems, demonstrando muitas APIs Do WebView2 na estrutura Win32/C++. As seções a seguir se concentram nos conceitos básicos da implementação do aplicativo híbrido.

Arquivos do Projeto

Esta seção explica brevemente alguns arquivos-chave no repositório. O aplicativo WebView2APISample é dividido verticalmente em componentes, em vez de horizontalmente em camadas. Cada componente implementa todo o fluxo de trabalho de uma categoria de recursos de exemplo, desde escutar comandos de menu até chamar métodos de API do WebView para implementá-los.

App.cpp

Este é o arquivo de nível superior que executa o aplicativo WebView2APISample . Ele lê opções de linha de comando, configura o ambiente do processo e manipula o modelo de threading do aplicativo.

AppWindow.cpp (menu Janela)

Este arquivo implementa a janela do aplicativo, fazendo o seguinte:

1. Configure todos os controles Win32.

2. Inicialize o Ambiente do WebView e o WebView.

3. Adicione manipuladores de eventos ao WebView e crie todos os componentes que lidam com vários recursos do aplicativo.

A AppWindow classe manipula comandos do menu Janela do aplicativo de exemplo.

Este arquivo é descrito com mais detalhes em Funções-chave em AppWindow.cpp, abaixo.

FileComponent.cpp (menu Arquivo)

Esse componente manipula comandos do menu Arquivo (exceto saída), bem como do DocumentTitleChanged evento.

ScriptComponent.cpp (menu Script)

Esse componente manipula comandos do menu Script , que envolvem interagir com o WebView injetando JavaScript, postando WebMessages, adicionando objetos nativos à página da Web ou usando o protocolo DevTools para se comunicar com a página da Web.

ProcessComponent.cpp (menu Process)

Esse componente manipula comandos do menu Processo , que envolvem interação com o processo do navegador. Ele também manipula o ProcessFailed evento, caso o processo do navegador ou um de seu processo de renderização falhe ou não responda.

ConfiguraçõesComponent.cpp (menu Configurações)

Esse componente manipula comandos do menu Configurações . Esse componente também é responsável por copiar configurações de um WebView antigo quando um novo é criado. A maioria dos códigos que interagem com a ICoreWebView2Settings interface é encontrada aqui.

ViewComponent.cpp (menu Exibir)

Esse componente manipula comandos do menu Exibir e qualquer funcionalidade relacionada ao dimensionamento e à visibilidade do WebView. Quando a janela do aplicativo for redimensionada, minimizada ou restaurada, ViewComponent redimensionará, ocultará ou mostrará o WebView em resposta. Ele também responde ao ZoomFactorChanged evento.

ScenarioWebMessage.cpp e ScenarioWebMessage.html (menu Cenário)

O ScenarioWebMessage componente é criado quando você seleciona o item de menuDe mensagens Webde cenário>. Esse componente implementa um aplicativo de exemplo com uma parte C++ e uma parte HTML + JavaScript, que se comunicam entre si postando e recebendo mensagens de forma assíncrona.

Esse componente é descrito com mais detalhes em ScenarioWebMessage (.html, .cpp e .h), abaixo.

ScenarioAddHostObject.cpp e ScenarioAddHostObject.html (menu Cenário)

Esse componente é criado quando você seleciona o item de menuObjetos host de cenário>. Ele demonstra a comunicação entre o aplicativo nativo e a página da Web HTML por meio da injeção de objeto host. A interface do objeto host é declarada em , e o objeto em HostObjectSample.idlsi é implementado em HostObjectSampleImpl.cpp.

Veja também:

• Chamar código nativo do código do lado da Web

Principais funções em AppWindow.cpp

AppWindow.cpp implementa a janela do aplicativo, fazendo o seguinte:

1. Configure todos os controles Win32.

2. Inicialize o Ambiente do WebView e o WebView.

3. Adicione manipuladores de eventos ao WebView e crie todos os componentes que lidam com vários recursos do aplicativo.

A AppWindow classe manipula comandos do menu Janela do aplicativo de exemplo. A seguir estão algumas das principais funções em AppWindow.cpp.

InitializeWebView()

No AppWindow.cpp, a InitializeWebView() função cria o ambiente WebView2 usando CreateCoreWebView2EnvironmentWithOptions.

Para ver essas chamadas de API em ação, inspecione o seguinte código de 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()

Depois de criar o ambiente, criamos o WebView usando CreateCoreWebView2Controller.

A OnCreateEnvironmentCompleted função de retorno de chamada é passada para CreateCoreWebView2EnvironmentWithOptions em InitializeWebView(). O retorno de chamada armazena o ponteiro do ambiente e o usa para criar um novo 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()

A OnCreateCoreWebView2ControllerCompleted função de retorno de chamada é passada para CreateCoreWebView2Controller em InitializeWebView(). Este retorno de chamada:

• Inicializa o estado relacionado ao WebView.
• Registra alguns manipuladores de eventos.
• Cria os componentes do aplicativo.

RegisterEventHandlers()

A RegisterEventHandlers função é chamada dentro de CreateCoreWebView2Controller. Ele configura alguns dos manipuladores de eventos usados pelo aplicativo e os adiciona ao WebView.

Para obter mais informações sobre manipuladores de eventos no WebView2, consulte ICoreWebView2.

Abaixo está um snippet de código de RegisterEventHandlers(), em que configuramos um manipulador de eventos para o NewWindowRequested evento. Esse evento é disparado quando JavaScript na página da Web chama window.open(). ICoreWebView2NewWindowRequestedEventHandler faz um novo AppWindow e passa o WebView da nova janela de volta para o navegador, para que ele possa devolvê-lo da window.open() chamada. Ao contrário de nossas chamadas para CreateCoreWebView2EnvironmentWithOptions e CreateCoreWebView2Controller, em vez de fornecer um método para o retorno de chamada, apenas fornecemos um lambda C++ naquele momento e ali:

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 e .h)

Os ScenarioWebMessage arquivos mostram como o host Win32 pode modificar o WebView, como o WebView pode modificar o host Win32 e como o WebView pode modificar a si mesmo acessando informações do host Win32. Isso é feito de forma assíncrona.

O ScenarioWebMessage componente é criado quando você seleciona o item de menuDe mensagens Webde cenário>. O ScenarioWebMessage componente implementa um aplicativo de exemplo com uma parte C++ e uma parte HTML+JavaScript, que se comunicam entre si postando e recebendo mensagens de forma assíncrona:

As seções a seguir demonstram como cada função discreta funciona usando o aplicativo WebView2APISample e explica como implementar essa funcionalidade.

Primeiro, acesse o aplicativo Web ScenarioWebMessage no aplicativo de exemplo:

1. Abra (execute) o aplicativo WebView2APISample .

2. No menu Cenário , selecione Mensagens da Web.

   O WebView exibe uma página da Web intitulada página de exemplo WebMessage (ScenarioWebMessage.html):

   

Para explorar a ScenarioWebMessage funcionalidade, você pode seguir as instruções na página ou seguir as etapas abaixo.

Postar mensagens do host Win32 no WebView

As etapas a seguir mostram como o Host Win32 pode modificar um WebView. Neste exemplo, você transformará o texto em azul:

1. Abra a página de exemplo do WebMessage (ScenarioWebMessage.html) conforme descrito acima.

2. No menu Script , selecione Postar JSON da Mensagem Da Web.

   Uma caixa de diálogo que contém o código {"SetColor":"blue"} pré-escrito é exibida.

3. Clique em OK.

   O texto na seção Postar Mensagens da página muda de preto para azul.

Como funciona

1. No ScriptComponent.cpp, a chamada para PostWebMessageAsJson posta a entrada do usuário no ScenarioMessage.html aplicativo Web:

   // 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());
      }
   }
   

2. No aplicativo Web, os ouvintes de eventos são usados para receber e responder à mensagem da Web. O snippet de código abaixo é de ScenarioWebMessage.html. O ouvinte de eventos alterará a cor do texto se o argumento for "SetColor":

   window.chrome.webview.addEventListener('message', arg => {
      if ("SetColor" in arg.data) {
         document.getElementById("colorable").style.color = arg.data.SetColor;
      }
   });
   

Recebendo mensagens (do WebView para o host Win32)

As etapas a seguir mostram como o WebView pode modificar o Aplicativo Host Win32 alterando o título do aplicativo Win32:

1. Abra a página de exemplo do WebMessage (ScenarioWebMessage.html) conforme descrito acima.

2. Observe o título do aplicativo WebView2APISample , exibido na parte superior esquerda da janela ao lado do ícone. Inicialmente é WebView2APISample – Microsoft Edge WebView2.

3. Na seção Mensagens recebidas da página, insira um novo título e clique no botão Enviar .

4. Observe o novo título exibido na barra de título do aplicativo WebView2APISample .

Como funciona

1. Em ScenarioWebMessage.html, window.chrome.webview.postMessage() envia a entrada do usuário para o aplicativo host:

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

2. No ScenarioWebMessage.cpp, usamos add_WebMessageReceived para registrar o manipulador de eventos. Quando recebemos o evento, depois de validar a entrada, alteramos o título da Janela do Aplicativo (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));
   

Mensagens de ida e volta (do WebView para o host de volta para o WebView)

As etapas a seguir mostram como o WebView pode obter informações do Host Win32 e modificar-se exibindo o tamanho do Aplicativo Win32.

1. Abra a página de exemplo do WebMessage (ScenarioWebMessage.html) conforme descrito acima.

2. Na seção Ida e volta da página, clique no botão GetWindowBounds .

   A caixa de texto abaixo do botão exibe os limites do aplicativo WebView2APISample .

Como funciona

1. Quando o botão Obter limites de janela é clicado, a GetWindowBounds função em ScenarioWebMessage.html é chamada. GetWindowBounds chama window.chrome.webview.postMessage() para enviar uma mensagem ao aplicativo host:

   function GetWindowBounds() {
       window.chrome.webview.postMessage("GetWindowBounds");
   }
   

2. No ScenarioWebMessage.cpp, usamos add_WebMessageReceived para registrar o manipulador de eventos recebido. Depois de validar a entrada, o manipulador de eventos obtém limites de janela da Janela do Aplicativo. PostWebMessageAsJson envia os limites para o aplicativo Web:

   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()));
   }
   

3. No ScenarioWebMessage.html, um ouvinte de evento responde à WindowBounds mensagem e exibe os limites da janela:

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

Confira também

• Referência de API do WebView2
• Introdução ao WebView2 em aplicativos Win32