Introdução ao WebView2 em aplicativos Win32

Este artigo é para aprender a escrever seu próprio código WebView2. Se você quiser executar um exemplo primeiro, consulte o aplicativo de exemplo Win32 ou outro artigo de aplicativo de exemplo.

Neste artigo, você configura suas ferramentas de desenvolvimento (se ainda não tiver terminado), aprende como adicionar código WebView2 a um projeto de aplicativo Win32 e aprende sobre os conceitos do WebView2 ao longo do caminho.

Este tutorial começa abrindo um projeto de aplicativo Win32 existente que tem o código WebView2 adicionado. O projeto usa o diretório Win32_GettingStarted (WebView2GettingStarted.sln) que faz parte do WebView2Samples repositório. Para usar este artigo, faça o seguinte:

1. Clone ou baixe o WebView2Samples repositório para sua unidade local.
2. Execute o projeto concluído.
3. Opcionalmente, exclua o código WebView2 para restaurar o aplicativo de linha de base Win32 HelloWebView.cpp .
4. Siga as etapas restantes neste artigo sobre como adicionar e compreender o código WebView2.

Este tutorial começa com o projeto concluído que está no repositório, que já tem o código WebView2 adicionado. (Este tutorial não permite que você crie um novo projeto; você não usa um modelo de projeto no Visual Studio para criar um novo projeto e, em seguida, adicionar código WebView2.)

Projeto concluído

O projeto de tutorial concluído está disponível no repositório WebView2Samples :

• Nome da amostra: Win32_GettingStarted
• Diretório de repositório: Win32_GettingStarted
• Arquivo da solução: WebView2GettingStarted.sln

Etapa 1 – Instalar o Visual Studio

Este tutorial requer o Microsoft Visual Studio, e não o Microsoft Visual Studio Visual Studio Code.

1. Se o Microsoft Visual Studio ainda não estiver instalado, em uma nova janela ou guia, consulte Instalar o Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas para fazer uma instalação padrão básica do Visual Studio.

Em seguida, retorne a esta página e continue abaixo.

Etapa 2 – Clonar ou baixar o repositório WebView2Samples

O código que você adicionar nas etapas deste tutorial já foi adicionado ao repositório de exemplo para você. Uma etapa opcional abaixo permite que você exclua o código WebView2 de HelloWebView.cpp, para que você possa adicioná-lo por conta própria, se desejar.

Para manter este tutorial focado na codificação específica do WebView2, começamos com um projeto existente do WebView2Samples Microsoft Visual Studio (WebView2GettingStarted) armazenado no repositório do GitHub. Adicionaremos recursos do WebView2 - na verdade, os recursos já foram adicionados, mas acompanhe as etapas de configuração e explicação.

O projeto existente do Visual Studio com o qual começaremos faz parte do código de exemplo de um aplicativo da área de trabalho C++ Win32 padrão. Para obter informações sobre o exemplo de aplicativo Win32 padrão subjacente, em uma nova janela ou guia, consulte Passo a passo: Criar um aplicativo tradicional da Área de Trabalho do Windows (C++).

Clone ou baixe o repositório WebView2Samples, da seguinte maneira:

1. Se você ainda não fez isso, clone (ou baixe) o WebView2Samples repositório. Para fazer isso, em uma janela ou guia separada, siga as etapas em Clonar o repositório WebView2Samples (ou em Baixar o repositório WebView2Samples), em Configurar seu ambiente de desenvolvimento para WebView2.

Em seguida, continue com as etapas abaixo.

Etapa 3 - Abra a solução finalizada (WebView2GettingStarted.sln)

Você começa com um projeto básico da área de trabalho que contém uma única janela principal. Começaremos com um projeto de aplicativo existente do repositório WebView2Samples , que você clonou ou baixou do GitHub na etapa anterior.

1. Abra o Visual Studio (não o Visual Studio Code).

2. Abra WebView2GettingStarted.sln, que está localizado no caminho: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

Etapa 4 - Instalar cargas de trabalho, se solicitado

O Visual Studio Installer pode abrir e solicitar que você instale uma carga de trabalho:

Se o Visual Studio Installer solicitar que você instale uma carga de trabalho:

1. Selecione o card Desenvolvimento Desktop com C++ para que uma marca de seleção apareça.

2. Se desejar, selecione também o .NET desktop development card (não necessário para este tutorial), para que uma marca de seleção apareça nesse card também.

3. Clique no botão Instalar .

O Instalador é fechado.

Redirecionar os projetos

A caixa de diálogo Ações da Solução de Revisão do Visual Studio pode ser exibida, perguntando se você deseja redirecionar os projetos:

1. Se essa caixa de diálogo for exibida, você poderá clicar em OK.

A solução WebView2GettingStarted é aberta no Visual Studio. A solução contém um único projeto: WebView2GettingStarted, que contém um único arquivo .cpp: HelloWebView.cpp.

Etapa 5 – Exibir o projeto aberto no Visual Studio

Se o projeto WebView2GettingStarted não estiver aberto no Visual Studio, abra-o no Visual Studio:

1. Abra WebView2GettingStarted.sln, que está localizado no caminho: <your repo directory>/WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln.

2. Em Gerenciador de Soluções, expanda o nó Origem Files e selecione HelloWebView.cpp.

   HelloWebView.cpp é aberto no editor de código do Visual Studio.

   

A captura de tela acima mostra algum código WebView2 (#include "WebView2.h"), que já está presente no arquivo imediatamente após a clonagem (download) do repositório.

Defina a solução para usar o SDK do Win10 e o conjunto de ferramentas do Visual Studio

Essa etapa só é necessária para versões mais antigas do Visual Studio, portanto, é provável que você possa ignorá-la. Mas você pode dar uma olhada nesta interface do usuário em qualquer caso:

1. No Gerenciador de Soluções do Visual Studio, clique com o botão direito do mouse no projetoWebView2GettingStarted (não a solução com o mesmo nome) e selecione Propriedades.

2. Selecione Propriedades de Configuração>Geral e, em seguida, (se ainda não for a configuração correta):

   1. Modificar a versão do SDK do Windows para usar o SDK do Win10.

   2. Modifique o conjunto de ferramentas da plataforma para usar um conjunto de ferramentas do Visual Studio.

   Essas modificações só são necessárias para versões mais antigas do Visual Studio.

   Veja uma captura de tela do Visual Studio 2017 mostrando algumas configurações válidas:

   

   A seguir está uma captura de tela do Visual Studio 2022; Os valores já estavam corretos, portanto, nenhuma alteração foi necessária:

   

Continue com as etapas abaixo.

Etapa 6 - Compilar e executar o projeto concluído do repositório

Neste ponto, seu ambiente de desenvolvimento está configurado para executar aplicativos Win32 WebView2 no modo de depuração no Visual Studio e adicionar recursos WebView2.

Para confirmar se o sistema está configurado para codificação do WebView2, execute o projeto no modo de depuração, da seguinte maneira:

1. Selecione Depurar IniciarDepuração> (F5) para compilar e executar o projeto.

   O aplicativo de exemplo primeiro abre uma janela pop-up, que exibe a URL que será carregada, juntamente com um botão OK :

   

2. Clique no botão OK para fechar a janela pop-up e prossiga para o URL:

   A janela do WebView2 agora exibe o conteúdo da página da Web: o site do Bing, http://www.bing.com.

   

3. Feche a janela de exemplo do WebView .

Etapa 7 - Atualizar ou instalar as Bibliotecas de Implementação do Windows (WIL)

O WIL já está instalado no projeto no repositório, mas siga estas etapas para aprender sobre a configuração e para marcar a instalação do projeto.

Em um momento, você instalará as Bibliotecas de Implementação do Windows (WIL) - uma biblioteca C++ somente cabeçalho para facilitar a vida dos desenvolvedores no Windows por meio de interfaces C++ legíveis e fortemente tipadas para padrões de codificação Windows COM. Você instala este pacote Microsoft.Windows.ImplementationLibrary por meio do Gerenciador de Soluções no Visual Studio, para o projeto.

Este tutorial também usa a WRL (Biblioteca de Modelos) C++ do Windows Runtime – uma biblioteca de modelos que fornece uma maneira de baixo nível de criar e usar componentes do Windows Runtime.

Instale as WWILL (Bibliotecas de Implementação do Windows) de dentro do Visual Studio, da seguinte maneira:

1. No Visual Studio, verifique se a solução WebView2GettingStarted ainda está aberta.

2. No Gerenciador de Soluções, clique com o botão direito do mouse no nó do projeto WebView2GettingStarted (não no nó da solução) e selecione Gerenciar Pacotes NuGet .

   

3. Na janela do NuGet , clique na guia Procurar .

4. Na barra de pesquisa no canto superior esquerdo, digite Microsoft.Windows.ImplementationLibrary. Ou copie e cole o bloco de código de linha única abaixo. Em seguida, selecione Microsoft.Windows.ImplementationLibrary.

   Microsoft.Windows.ImplementationLibrary
   

   Selecionando o pacote Microsoft.Windows.ImplementationLibrary no Gerenciador de Pacotes NuGet no Visual Studio:

   

   Para ampliar, clique com o botão direito do mouse >em Abrir imagem em uma nova guia.

   Se você não vir Microsoft.Windows.ImplementationLibrary listado, Marque o local de origem do NuGet, da seguinte maneira:

   1. Selecionar Ferramentas>Opções>NuGet>Package Manager Fontes de pacote.

   2. Verifique se em Fontes de pacotes há uma fonte nuget.com apontando para https://api.nuget.org/v3/index.json.

   3. Se as origens do pacote não contiverem essa fonte, insira nuget.com na caixa de texto Nome e https://api.nuget.org/v3/index.json na caixa de texto Origem . Em seguida, clique em Atualizar e OK.

5. No canto superior direito, clique no botão Instalar (ou no botão Atualizar ). O NuGet baixa a WIL (Biblioteca de Implementação do Windows) em seu computador.

As Bibliotecas de Implementação do Windows (WIL) agora estão instaladas, juntamente com Windows Runtime Biblioteca de Modelos C++ (WRL).

Continue com as etapas abaixo.

Etapa 8 - Atualizar ou instalar o SDK do WebView2

O projeto concluído no repositório já tem uma versão do SDK do WebView2 instalada para o projeto. Se você estivesse criando um projeto do zero começando usando um modelo de projeto Win32, precisaria instalar o pacote SDK do WebView para o projeto, conforme descrito aqui.

Em seguida, atualize (ou instale) o SDK do WebView2. O SDK do WebView2 inclui o controle WebView2, que é da plataforma Microsoft Edge e permite que você insira tecnologias da Web (HTML, CSS e JavaScript) nos seus aplicativos nativos.

Atualize (ou instale) o SDK do WebView2, da seguinte maneira:

1. No Visual Studio, verifique se a solução WebView2GettingStarted está aberta, conforme descrito acima.

2. No Gerenciador de Soluções, clique com o botão direito do mouse no nó do projeto WebView2GettingStarted (não no nó de solução WebView2GettingStarted) e selecione Gerenciar Pacotes NuGet .

   A guia e o painel do Gerenciador de Pacotes NuGet são abertos no Visual Studio.

   

3. Se o SDK do WebView2 já estiver instalado para o projeto, como é o caso do projeto de repositório, na janela NuGet , clique na guia Instalado ou na guia Atualizar .

4. Ou, se você estiver instalando o SDK do WebView2 em um novo projeto, clique na guia Procurar .

5. À direita da barra de pesquisa, desmarque a caixa de seleção Incluir pré-lançamento (a menos que você saiba que deseja uma versão de pré-lançamento do SDK).

6. Na barra de pesquisa no canto superior esquerdo, digite Microsoft.Web.WebView2. Ou copie e cole o bloco de código de linha única abaixo. Em seguida, selecione Microsoft.Web.WebView2.

   Microsoft.Web.WebView2
   

7. Na janela do lado direito, clique em Atualizar (ou Instalar). O NuGet baixa o SDK do WebView2 no computador.

   

8. Feche a guia Gerenciador de Pacotes NuGet .

O SDK do WebView2 agora está atualizado ou instalado, portanto, seu ambiente de desenvolvimento agora está configurado para adicionar recursos do WebView2 ao seu aplicativo Win32.

Continue com as etapas abaixo.

Etapa 9 – opcionalmente, exclua o código WebView2 do HelloWebView.cpp

Se você quiser seguir as etapas abaixo para adicionar o código WebView2 a HelloWebView.cpp si mesmo, exclua os dois blocos de código WebView2, da seguinte maneira:

1. Em HelloWebView.cpp, exclua o seguinte código:

   // include WebView2 header
   #include "WebView2.h"
   

2. Em HelloWebView.cpp, exclua as linhas de código que estão entre essas duas linhas de comentário, mas mantenha estas duas linhas de comentário:

   // <-- WebView2 sample code starts here -->
   ...
   // <-- WebView2 sample code ends here -->
   

Etapa 10 - Incluir o cabeçalho WebView2.h no HelloWebView.cpp

Acima, fizemos o seguinte:

• Clonou ou baixou o repositório de exemplos, incluindo um projeto existente que contém um aplicativo padrão da área de trabalho do Windows C++.
• Atualizou ou instalou a Biblioteca de Implementação do Windows (WIL).
• Atualizado ou instalado o SDK do WebView2 para adicionar recursos do WebView2.
• Opcionalmente excluído o código WebView2 do HelloWebView.cpp.

Em seguida, adicione os recursos do WebView2 ao aplicativo, da seguinte forma:

1. No Visual Studio, verifique se a solução WebView2GettingStarted está aberta.

2. No Gerenciador de Soluções, expanda Source Files e clique em HelloWebView.cpp.

3. Se o código a seguir ainda não estiver presente, cole o seguinte código em HelloWebView.cpp, após a última #include linha:

   // include WebView2 header
   #include "WebView2.h"
   

   Verifique se a include seção tem a seguinte aparência:

   ...
   #include <wrl.h>
   #include <wil/com.h>
   // include WebView2 header
   #include "WebView2.h"
   

4. Observe os cabeçalhos usados:

   • wrl.h- Biblioteca de Modelos C++ do Windows Runtime (WRL) – uma biblioteca de modelos que fornece uma maneira de baixo nível de criar e usar componentes do Windows Runtime.

   • wil/com.h - Bibliotecas de implementação do Windows (WIL) - Uma biblioteca C++ somente de cabeçalho para facilitar a vida dos desenvolvedores no Windows por meio de interfaces C++ legíveis e seguras para padrões de codificação comuns do Windows.

   • WebView2.h - O controle WebView2 é da plataforma Microsoft Edge e permite que você insira tecnologias da Web (HTML, CSS e JavaScript) em seus aplicativos nativos.

5. Selecione Salvar Arquivo>Tudo (Ctrl+Shift+S) para salvar o projeto.

O arquivo de código-fonte e o projeto estão prontos para uso e compilação na API WebView2.

Continue com as etapas abaixo.

Etapa 11 - Criar seu aplicativo de exemplo vazio

1. Selecione Depurar IniciarDepuração> (F5) para compilar e executar o projeto.

   O aplicativo de exemplo é aberto e exibe uma janela vazia:

   

   Agora você tem um aplicativo de área de trabalho Win32 vazio em execução com possíveis recursos do WebView2.

2. Feche a janela do aplicativo de exemplo WebView .

Continue com as etapas abaixo.

Etapa 12 - Adicionar um controle WebView2 na janela pai

Em seguida, adicione um controle WebView2 à janela principal.

Você usará o CreateCoreWebView2Environment método para configurar o ambiente e localizar o navegador Microsoft Edge que aciona o controle.

Observe que, se você quiser substituir os padrões a seguir, poderá usar a versão "com opções" desse método, CreateCoreWebView2EnvironmentWithOptions:

• Local do navegador
• Pasta de dados do usuário
• Sinalizadores do navegador

Após a CreateCoreWebView2Environment conclusão do método, você irá:

• Execute o ICoreWebView2Environment::CreateCoreWebView2Controller método dentro do retorno de ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler chamada.

• Execute o ICoreWebView2Controller::get_CoreWebView2 método para obter o controle WebView2 associado.

Agora, para fazer o acima, no retorno de chamada, você irá:

• Defina mais algumas configurações.
• Redimensione o controle WebView2 para preencher 100% da janela pai.
• Em seguida, exiba o site Bing.com no controle WebView2 no aplicativo Win32.

1. Em HelloWebView.cpp, localize o seguinte código:

      UpdateWindow(hWnd);
   
      // <-- WebView2 sample code starts here -->
   

2. Se o código a seguir ainda não estiver presente, cole-o no HelloWebView.cpp. Cole o código nas entrelinhas // <-- WebView2 sample code starts here --> e // <-- WebView2 sample code ends here -->:

   // Step 3 - Create a single WebView within the parent window
   // Locate the browser and set up the environment for WebView
   CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
      Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
         [hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT {
   
            // Create a CoreWebView2Controller and get the associated CoreWebView2 whose parent is the main window hWnd
            env->CreateCoreWebView2Controller(hWnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
               [hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {
                  if (controller != nullptr) {
                     webviewController = controller;
                     webviewController->get_CoreWebView2(&webview);
                  }
   
                  // Add a few settings for the webview
                  // The demo step is redundant since the values are the default settings
                  wil::com_ptr<ICoreWebView2Settings> settings;
                  webview->get_Settings(&settings);
                  settings->put_IsScriptEnabled(TRUE);
                  settings->put_AreDefaultScriptDialogsEnabled(TRUE);
                  settings->put_IsWebMessageEnabled(TRUE);
   
                  // Resize WebView to fit the bounds of the parent window
                  RECT bounds;
                  GetClientRect(hWnd, &bounds);
                  webviewController->put_Bounds(bounds);
   
                  // Schedule an async task to navigate to Bing
                  webview->Navigate(L"https://www.bing.com/");
   
                  // Step 4 - Navigation events
   
                  // Step 5 - Scripting
   
                  // Step 6 - Communication between host and web content
   
                  return S_OK;
               }).Get());
            return S_OK;
         }).Get());
   

3. Selecione Salvar Arquivo>Tudo (Ctrl+Shift+S) para salvar o projeto.

Crie seu aplicativo de exemplo do Bing

1. Clique em F5 para compilar e executar o projeto.

   Se você começou excluindo todo o código WebView2, neste ponto, agora você tem uma janela Win32 preenchida com um controle WebView2 preenchido com conteúdo de página da Web:

   

2. Feche a janela do aplicativo de exemplo WebView .

   Ou, se você manteve todo o código do WebView2, neste ponto, uma janela pop-up do WebView2 com uma caixa de diálogo de alerta do Bing é aberta, sobre uma janela vazia do WebView2. Clique no botão OK para fechar a caixa de diálogo do Bing. Agora o controle WebView2 é preenchido pelo conteúdo da página do Bing:

   

3. Se a janela do aplicativo de exemplo WebView estiver aberta, feche-a.

Continue com as etapas abaixo.

Etapa 13 - Eventos de navegação

Na etapa anterior, discutimos como navegar para a URL usando o ICoreWebView2::Navigate método. Durante a navegação, o WebView2 dispara uma sequência de eventos, que o host pode escutar:

1. NavigationStarting

2. SourceChanged

3. ContentLoading

4. HistoryChanged

5. NavigationCompleted

   Se você quiser mais informações agora, em uma nova janela ou guia, consulte Eventos de navegação para aplicativos WebView2.

Em casos de erro, um ou mais dos seguintes eventos podem ocorrer, dependendo se a navegação continuou para uma página da Web de erro:

• SourceChanged
• ContentLoading
• HistoryChanged

Se ocorrer um redirecionamento HTTP, haverá vários NavigationStarting eventos seguidos.

Como exemplo de uso de eventos de navegação, registre um manipulador para o NavigationStarting evento para cancelar todas as solicitações não https (não seguras), da seguinte maneira.

1. Se ele ainda não estiver presente, cole o seguinte código em HelloWebView.cpp, abaixo do código da Etapa 3:

   // Step 4 - Navigation events
   // register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigation
   EventRegistrationToken token;
   webview->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(
       [](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT {
           wil::unique_cotaskmem_string uri;
           args->get_Uri(&uri);
           std::wstring source(uri.get());
           if (source.substr(0, 5) != L"https") {
               args->put_Cancel(true);
           }
           return S_OK;
       }).Get(), &token);
   

Agora, o aplicativo não abre sites que não sejam https. Você pode usar um mecanismo semelhante para realizar outras tarefas, como restringir a navegação dentro de seu próprio domínio.

Continue com as etapas abaixo.

Etapa 14 - Script

Use aplicativos host para injetar código JavaScript em controles WebView2 em tempo de execução. Você pode encarregar o WebView2 de executar JavaScript arbitrário ou adicionar scripts de inicialização. O JavaScript injetado se aplica a todos os novos documentos de nível superior e a todos os quadros filho até que o JavaScript seja removido.

O JavaScript injetado é executado com tempo específico:

• Execute-o após a criação do objeto global.
• Execute-o antes de executar qualquer outro script incluído no documento HTML.

1. Se o código a seguir ainda não estiver presente, cole o seguinte código em HelloWebView.cpp:

   // Step 5 - Scripting
   // Schedule an async task to add initialization script that freezes the Object object
   webview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
   // Schedule an async task to get the document URL
   webview->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
       [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
           LPCWSTR URL = resultObjectAsJson;
           //doSomethingWithURL(URL);
           return S_OK;
       }).Get());
   

2. Selecione Salvar Arquivo>Tudo (Ctrl+Shift+S) para salvar o projeto.

   Agora, o WebView2 congela e Object retorna o documento da página uma vez.

Se o código precisar ser executado na ordem, use retornos de chamada

As APIs de injeção de script (e algumas outras APIs WebView2) são assíncronas. Portanto, se o código deve ser executado em uma ordem específica, você deve usar retornos de chamada.

Continue com as etapas abaixo.

Etapa 15 - Comunicação entre o host e o conteúdo da Web

O host e o conteúdo da Web também podem se comunicar entre si por meio do postMessage método. O conteúdo da Web em execução em um controle WebView2 pode postar no host por meio do método e a mensagem é manipulada window.chrome.webview.postMessage por qualquer manipulador de eventos registrado ICoreWebView2WebMessageReceivedEventHandler no host.

Da mesma forma, o host pode enviar uma mensagem ao conteúdo da Web por meio do ICoreWebView2::PostWebMessageAsString método ou ICoreWebView2::PostWebMessageAsJSON e a mensagem é capturada por manipuladores adicionados do window.chrome.webview.addEventListener ouvinte. Esse mecanismo de comunicação permite que o conteúdo da Web use recursos nativos passando mensagens para solicitar que o host execute APIs nativas.

Como exemplo para entender o mecanismo, as seguintes etapas ocorrem quando você tenta gerar a URL do documento no WebView2:

1. O host registra um manipulador para retornar a mensagem recebida de volta ao conteúdo da Web.

2. O host injeta um script no conteúdo da Web que registra um manipulador para imprimir mensagens do host.

3. O host injeta um script no conteúdo da Web que posta a URL no host.

4. O manipulador do host é disparado e retorna a mensagem (a URL) para o conteúdo da Web.

5. O manipulador do conteúdo da Web é disparado e imprime a mensagem do host (a URL).

Faça com que o aplicativo host e o conteúdo da Web se comuniquem por meio postMessagede , da seguinte maneira:

1. Se ele ainda não estiver presente, cole o seguinte código em HelloWebView.cpp:

   // Step 6 - Communication between host and web content
   // Set an event handler for the host to return received message back to the web content
   webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
       [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {
           wil::unique_cotaskmem_string message;
           args->TryGetWebMessageAsString(&message);
           // processMessage(&message);
           webview->PostWebMessageAsString(message.get());
           return S_OK;
       }).Get(), &token);
   
   // Schedule an async task to add initialization script that
   // 1) Add an listener to print message from the host
   // 2) Post document URL to the host
   webview->AddScriptToExecuteOnDocumentCreated(
       L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
       L"window.chrome.webview.postMessage(window.document.URL);",
       nullptr);
   

2. Selecione Salvar Arquivo>Tudo (Ctrl+Shift+S) para salvar o projeto.

3. Clique em F5 para compilar e executar o projeto.

   O aplicativo de exemplo primeiro abre uma janela pop-up, que exibe a URL que será carregada, juntamente com um botão OK :

   

4. Clique no botão OK para fechar a janela pop-up e prossiga para o URL:

   A janela do WebView2 agora exibe o conteúdo da página da Web: o site do Bing, http://www.bing.com.

   

5. Quando estiver pronto, feche a janela de exemplo do WebView .

Parabéns, você criou um aplicativo Win32 que hospeda e usa o controle WebView2! Seu ambiente de desenvolvimento agora está configurado para o desenvolvimento de aplicativos WebView2, para incluir o controle WebView2 em seus aplicativos Win32. Você também teve uma introdução aos conceitos de programação do WebView2.

Referência da API

• Referência de API para WebView2 Win32 C++
• Referência da API WebView2 - Referência da API para cada plataforma.

Confira também

• Aplicativos de exemplo WebView2
• Biblioteca de Modelos C++ do Windows Runtime (WRL)
• Bibliotecas de Implementação do Windows (WIL) repositório do GitHub.