Introdução ao WebView2 em aplicações Win32

Neste artigo, vai configurar as suas ferramentas de desenvolvimento (se ainda não o tiver feito), aprender a adicionar código WebView2 a um projeto de aplicação Win32 e saber mais sobre os conceitos do WebView2 ao longo do percurso.

Este tutorial começa por abrir um projeto de aplicação Win32 existente que tenha o código WebView2 adicionado. O projeto utiliza o diretório Win32_GettingStarted (WebView2GettingStarted.sln) que faz parte do WebView2Samples repositório. Para utilizar este artigo, faça o seguinte:

1. Clone ou transfira o WebView2Samples repositório para a unidade local.
2. Execute o projeto concluído.
3. Opcionalmente, elimine o código WebView2 de HelloWebView.cpp para restaurar a aplicação de linha de base Win32.
4. Siga os passos restantes neste artigo sobre como adicionar e compreender o código WebView2.

Este tutorial não lhe permite criar um novo projeto; não utiliza um modelo de projeto no Visual Studio para criar um novo projeto. Em vez disso, começa com o projeto concluído que está no repositório.

Projeto concluído

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

• Nome de exemplo: Win32_GettingStarted
• Diretório de repositório: Win32_GettingStarted
• Ficheiro de solução: WebView2GettingStarted.sln

Passo 1 – Instalar o Visual Studio

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

1. Se o Microsoft Visual Studio ainda não estiver instalado, numa nova janela ou separador, consulte Instalar o Visual Studio em Configurar o ambiente de Programador para WebView2. Siga os passos para efetuar uma instalação predefinida básica do Visual Studio.

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

Passo 2 – Clonar ou transferir o repositório WebView2Samples

O código que adicionar nos passos deste tutorial já foi adicionado ao repositório de exemplo. Um passo opcional abaixo permite-lhe eliminar o código WebView2 de HelloWebView.cpp, para que possa adicioná-lo manualmente, se quiser.

Para manter este tutorial focado na codificação específica do WebView2, começamos com um projeto existente do Microsoft Visual Studio (WebView2GettingStarted) armazenado no repositório do WebView2Samples GitHub. Vamos adicionar funcionalidades do WebView2. Na verdade, as funcionalidades já foram adicionadas, mas siga os passos de configuração e explicação.

O projeto existente do Visual Studio com o qual vamos começar faz parte do código de exemplo de uma aplicação de ambiente de trabalho C++ Win32 padrão. Para obter informações sobre o exemplo de aplicação Win32 padrão subjacente, numa nova janela ou separador, consulte Instruções: Criar uma aplicação de Ambiente de Trabalho do Windows tradicional (C++).

---

Clone ou transfira o repositório WebView2Samples, da seguinte forma:

1. Se ainda não o fez, clone ou transfira o WebView2Samples repositório. Para tal, numa janela ou separador separador, siga os passos em Transferir o repositório WebView2Samples ou Clonar o repositório WebView2Samples em Configurar o ambiente Dev para WebView2.

Em seguida, regresse aqui depois de copiar o repositório para a unidade local e continue com os passos abaixo.

Passo 3 – Abrir a solução concluída (WebView2GettingStarted.sln)

Começa com um projeto de ambiente de trabalho básico que contém uma única janela principal. Vamos começar com um projeto de aplicação existente a partir do repositório WebView2Samples , que clonou ou transferiu do GitHub no passo 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.

Passo 4 – Instalar cargas de trabalho, se lhe for pedido

O Instalador do Visual Studio pode abrir e pedir-lhe para instalar uma Carga de Trabalho:

Se o Instalador do Visual Studio lhe pedir para instalar uma Carga de Trabalho:

1. Selecione o cartão Desenvolvimento do ambiente de trabalho com C++ para que seja apresentada uma marca de verificação.

2. Se quiser, selecione também o cartão de desenvolvimento de ambiente de trabalho .NET (não necessário para este tutorial), para que também seja apresentada uma marca de verificação neste cartão.

3. Clique no botão Instalar .

O Instalador é fechado.

Retarget Projects

A caixa de diálogo Ações de Revisão da Solução do Visual Studio pode ser apresentada, o que lhe pede se pretende Voltar a obter Projetos:

1. Se essa caixa de diálogo for apresentada, pode 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 ficheiro de .cpp: HelloWebView.cpp.

Passo 5 – Ver 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. No Explorador de Soluções, expanda o nó Ficheiros de Origem e, em seguida, selecione HelloWebView.cpp.

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

   

A captura de ecrã acima mostra algum código WebView2 (#include "WebView2.h"), que já está presente no ficheiro imediatamente após a clonagem (transferência) do repositório.

Definir a solução para utilizar o SDK Win10 e o conjunto de ferramentas do Visual Studio

Este passo só é necessário para versões mais antigas do Visual Studio, pelo que é provável que possa ignorá-lo. No entanto, pode ver esta IU em qualquer caso:

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

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

   1. Modifique a Versão do SDK do Windows para utilizar o SDK Win10.

   2. Modifique o Conjunto de Ferramentas de Plataforma para utilizar um conjunto de ferramentas do Visual Studio.

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

   Eis uma captura de ecrã do Visual Studio 2017 que mostra algumas definições válidas:

   

   Segue-se uma captura de ecrã do Visual Studio 2022; os valores já estavam corretos, pelo que não foi necessária nenhuma alteração:

   

Continue com os passos abaixo.

Passo 6 – Compilar e executar o projeto concluído do repositório

Neste momento, o seu ambiente Dev está configurado para executar aplicações Win32 WebView2 no modo de depuração no Visual Studio e adicionar funcionalidades webView2.

---

Para confirmar que o seu sistema está configurado para a codificação WebView2, execute o projeto no modo de Depuração, da seguinte forma:

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

   A aplicação de exemplo abre primeiro uma janela de pop-up, que apresenta o URL que será carregado, juntamente com um botão OK :

   

2. Clique no botão OK para dispensar a janela pop e continuar para o URL:

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

   

3. Feche a janela de exemplo do WebView .

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

O WIL já está instalado no projeto no repositório, mas siga estes passos para saber mais sobre a configuração e verificar a configuração do projeto.

Dentro de momentos, irá instalar as Bibliotecas de Implementação do Windows (WIL) – uma biblioteca C++ apenas com cabeçalho para facilitar a vida aos programadores no Windows através de interfaces C++ legíveis e seguras para padrões de codificação COM do Windows. Instale este pacote Microsoft.Windows.ImplementationLibrary através do Explorador de Soluções no Visual Studio, para o projeto.

Este tutorial também utiliza a Biblioteca de Modelos (WRL) do Windows Runtime C++ – uma biblioteca de modelos que fornece uma forma de criar e utilizar componentes do Windows Runtime.

---

Instale as Bibliotecas de Implementação do Windows (WIL) a partir do Visual Studio, da seguinte forma:

1. No Visual Studio, certifique-se de que a solução WebView2GettingStarted ainda está aberta.

2. No Explorador de Soluções, clique com o botão direito do rato no nó do projeto WebView2GettingStarted (não o nó da solução) e, em seguida, selecione Gerir Pacotes NuGet.

   

3. Na janela NuGet , clique no separador Procurar .

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

   Microsoft.Windows.ImplementationLibrary
   

   Selecionar o pacote Microsoft.Windows.ImplementationLibrary no Gestor de Pacotes NuGet no Visual Studio:

   

   Para ampliar, clique com o botão direito do rato em >Abrir imagem num novo separador.

   Se não vir Microsoft.Windows.ImplementationLibrary listado, verifique a localização de origem do NuGet, da seguinte forma:

   1. SelecioneFerramentas Opções>Origens> dePacotes do Gestor> de Pacotes NuGet.

   2. Certifique-se de que, em Origens do pacote, existe uma origem de nuget.com a apontar para https://api.nuget.org/v3/index.json.

   3. Se as Origens do pacote não contiverem essa origem, introduza 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 transfere a Biblioteca de Implementação do Windows (WIL) para o seu computador.

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

Continue com os passos abaixo.

Passo 8 – Atualizar ou instalar o SDK WebView2

O projeto concluído no repositório já tem uma versão do SDK WebView2 instalada para o projeto. Se estivesse a criar um projeto do zero ao começar por utilizar um modelo de projeto Win32, teria de instalar o pacote do SDK webView para o projeto, conforme descrito aqui.

Em seguida, atualize (ou instale) o SDK WebView2. O SDK WebView2 inclui o controlo WebView2, que é alimentado pelo Microsoft Edge, e permite-lhe incorporar tecnologias Web (HTML, CSS e JavaScript) nas suas aplicações nativas.

---

Atualize (ou instale) o SDK WebView2 da seguinte forma:

1. No Visual Studio, certifique-se de que a solução WebView2GettingStarted está aberta, conforme descrito acima.

2. No Explorador de Soluções, clique com o botão direito do rato no nó do projeto WebView2GettingStarted (não o nó de solução WebView2GettingStarted ) e, em seguida, selecione Gerir Pacotes NuGet.

   O separador e painel Gestor de Pacotes NuGet é aberto no Visual Studio.

   

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

4. Em alternativa, se estiver a instalar o SDK WebView2 num novo projeto, clique no separador Procurar .

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

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

   Microsoft.Web.WebView2
   

7. Na janela lateral direita, clique em Atualizar (ou Instalar). O NuGet transfere o SDK WebView2 para o seu computador.

   

8. Feche o separador Gestor de Pacotes NuGet .

O SDK WebView2 está agora atualizado ou instalado, pelo que o ambiente de desenvolvimento está agora configurado para adicionar funcionalidades webView2 à sua aplicação Win32.

Continue com os passos abaixo.

Passo 9 – eliminar opcionalmente o código WebView2 do HelloWebView.cpp

Se quiser seguir os passos abaixo para adicionar o código WebView2 a HelloWebView.cpp si próprio, elimine os dois blocos do código WebView2, da seguinte forma:

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

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

2. Em HelloWebView.cpp, elimine as linhas de código entre estas duas linhas de comentário, mas mantenha estas duas linhas de comentário:

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

Passo 10 – Incluir o cabeçalho WebView2.h no HelloWebView.cpp

Acima, fizemos o seguinte:

• Clonou ou transferiu o repositório de exemplos, incluindo um projeto existente que contém uma aplicação de ambiente de trabalho C++ windows padrão.
• Atualização ou instalação da Biblioteca de Implementação do Windows (WIL).
• Atualizou ou instalou o SDK WebView2 para adicionar funcionalidades do WebView2.
• Opcionalmente, eliminou o código WebView2 de HelloWebView.cpp.

---

Em seguida, adicione funcionalidades webView2 à aplicação, da seguinte forma:

1. No Visual Studio, certifique-se de que a solução WebView2GettingStarted está aberta.

2. No Explorador de Soluções, expanda Ficheiros de Origem e, em seguida, clique em HelloWebView.cpp.

3. Se o código seguinte 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"
   

   Certifique-se de que a include secção tem o seguinte aspeto:

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

4. Tenha em atenção os cabeçalhos utilizados:

   • wrl.h - Biblioteca de Modelos do Windows Runtime C++ (WRL) – uma biblioteca de modelos que fornece uma forma de criar e utilizar componentes do Windows Runtime.

   • wil/com.h - Bibliotecas de Implementação do Windows (WIL) – uma biblioteca C++ só com cabeçalho para facilitar a vida aos programadores no Windows através de interfaces C++ legíveis e seguras para tipos de letra para padrões de codificação comuns do Windows.

   • WebView2.h - O controlo WebView2 é alimentado pelo Microsoft Edge e permite-lhe incorporar tecnologias Web (HTML, CSS e JavaScript) nas suas aplicações nativas.

5. SelecioneGuardar Todos os Ficheiros> (Ctrl+Shift+S) para guardar o projeto.

O ficheiro de código fonte e o projeto estão prontos para serem utilizados e incorporados na API WebView2.

Continue com os passos abaixo.

Passo 11 – Criar a sua aplicação de exemplo vazia

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

   A aplicação de exemplo é aberta e apresenta uma janela vazia:

   

   Tem agora uma aplicação de ambiente de trabalho Win32 em execução e vazia com potenciais capacidades webView2.

2. Feche a janela da aplicação de exemplo WebView .

Continue com os passos abaixo.

Passo 12 – Adicionar um controlo WebView2 na janela principal

Em seguida, adicione um controlo WebView2 à janela principal.

Irá utilizar o CreateCoreWebView2Environment método para configurar o ambiente e localizar o browser Microsoft Edge que alimenta o controlo.

Tenha em atenção que, se quiser substituir as seguintes predefinições, pode utilizar a versão "com opções" desse método: CreateCoreWebView2EnvironmentWithOptions

• Localização do browser
• Pasta de dados do utilizador
• Sinalizadores do browser

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

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

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

Agora, para efetuar o procedimento acima, na chamada de retorno, irá:

• Defina mais algumas definições.
• Redimensione o controlo WebView2 para preencher 100% da janela principal.
• Em seguida, apresente o site Bing.com no controlo WebView2 na sua aplicação Win32.

---

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

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

2. Se o código seguinte ainda não estiver presente, cole o seguinte código em HelloWebView.cpp. Cole o código entre as linhas // <-- 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. SelecioneGuardar Todos os Ficheiros> (Ctrl+Shift+S) para guardar o projeto.

Criar a sua aplicação de exemplo do Bing

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

   Se começou por eliminar todo o código WebView2, neste momento, tem agora uma janela Win32 preenchida com um controlo WebView2 que está cheio de conteúdo de página Web:

   

2. Feche a janela da aplicação de exemplo WebView .

   Em alternativa, se manteve todo o código WebView2, neste momento, é aberta uma janela webView2 de pop-up com uma caixa de diálogo de alerta do Bing, através de uma janela WebView2 vazia. Clique no botão OK para fechar a caixa de diálogo do Bing. Agora, o controlo WebView2 é preenchido pelo conteúdo da página do Bing:

   

3. Se a janela de exemplo da aplicação WebView estiver aberta, feche-a.

Continue com os passos abaixo.

Passo 13 – Eventos de navegação

No passo anterior, abordámos a navegação para o URL com o ICoreWebView2::Navigate método . Durante a navegação, o WebView2 aciona uma sequência de eventos, que o anfitrião pode escutar:

1. NavigationStarting

2. SourceChanged

3. ContentLoading

4. HistoryChanged

5. NavigationCompleted

   Se quiser obter mais informações agora, numa nova janela ou separador, consulte Eventos de navegação para aplicações WebView2.

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

• SourceChanged
• ContentLoading
• HistoryChanged

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

---

Como exemplo de utilização de eventos de navegação, registe um processador para o NavigationStarting evento para cancelar quaisquer pedidos não https (não seguros), da seguinte forma.

1. Se ainda não estiver presente, cole o seguinte código em HelloWebView.cpp, abaixo do código do Passo 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, a aplicação não abre sites não https. Pode utilizar um mecanismo semelhante para realizar outras tarefas, como restringir a navegação para dentro do seu próprio domínio.

Continue com os passos abaixo.

Passo 14 – Scripting

Utilize aplicações anfitriãs para injetar código JavaScript em controlos WebView2 no runtime. Pode fazer uma tarefa do WebView2 para executar JavaScript arbitrário ou adicionar scripts de inicialização. O JavaScript injetado aplica-se a todos os novos documentos de nível superior e a quaisquer frames subordinados até que o JavaScript seja removido.

O JavaScript injetado é executado com temporização específica:

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

---

1. Se o código seguinte 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. SelecioneGuardar Todos os Ficheiros> (Ctrl+Shift+S) para guardar o projeto.

   Agora, o WebView2 bloqueia o Object e devolve o documento da página uma vez.

Se o código tiver de ser executado por ordem, utilize chamadas de retorno

As APIs de injeção de script (e algumas outras APIs WebView2) são assíncronas. Por isso, se o código tiver de ser executado por uma ordem específica, deve utilizar chamadas de retorno.

Continue com os passos abaixo.

Passo 15 – Comunicação entre o anfitrião e o conteúdo Web

O anfitrião e o conteúdo Web também podem comunicar entre si através do postMessage método . O conteúdo Web em execução num controlo WebView2 pode ser publicado no anfitrião através do window.chrome.webview.postMessage método e a mensagem é processada por qualquer processador de eventos registado ICoreWebView2WebMessageReceivedEventHandler no anfitrião.

Da mesma forma, o anfitrião pode enviar mensagens aos conteúdos da Web através do ICoreWebView2::PostWebMessageAsString método ou ICoreWebView2::PostWebMessageAsJSON e a mensagem é detetado por processadores que são adicionados a window.chrome.webview.addEventListener partir do serviço de escuta. Este mecanismo de comunicação permite que o conteúdo Web utilize capacidades nativas ao transmitir mensagens para pedir ao anfitrião para executar APIs nativas.

Como exemplo para compreender o mecanismo, os seguintes passos ocorrem quando tenta exportar o URL do documento no WebView2:

1. O anfitrião regista um processador para devolver a mensagem recebida de volta ao conteúdo Web.

2. O anfitrião injeta um script no conteúdo Web que regista um processador para imprimir a mensagem do anfitrião.

3. O anfitrião injeta um script no conteúdo Web que publica o URL no anfitrião.

4. O processador do anfitrião é acionado e devolve a mensagem (o URL) ao conteúdo Web.

5. O processador do conteúdo Web é acionado e imprime a mensagem do anfitrião (o URL).

---

Peça à aplicação anfitriã e ao conteúdo Web que comuniquem através postMessagedo , da seguinte forma:

1. Se 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. SelecioneGuardar Todos os Ficheiros> (Ctrl+Shift+S) para guardar o projeto.

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

   A aplicação de exemplo abre primeiro uma janela de pop-up, que apresenta o URL que será carregado, juntamente com um botão OK :

   

4. Clique no botão OK para dispensar a janela pop e continuar para o URL:

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

   

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

Parabéns, criou uma aplicação Win32 que aloja e utiliza o controlo WebView2! O seu ambiente de desenvolvimento está agora configurado para o desenvolvimento de aplicações WebView2, para incluir o controlo WebView2 nas suas aplicações Win32. Também teve uma introdução aos conceitos de programação do WebView2.

Referência da API

• Referência da API para WebView2 Win32 C++
• Referência da API webView2 – Referência da API para cada plataforma.

Confira também

• Código de Exemplo para WebView2
• Biblioteca de Modelos (WRL) do Windows Runtime C++
• Bibliotecas de Implementação do Windows (WIL) Repositório do GitHub.