Introdução ao WebView2 em aplicativos Win32

  • Artigo

Neste artigo, você configurou suas ferramentas de desenvolvimento (se ainda não terminar), saiba como adicionar código WebView2 a um projeto de aplicativo Win32 e saiba mais 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 HelloWebView.cpp base Win32.
  4. Siga as etapas restantes neste artigo sobre como adicionar e entender o código WebView2.

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. Em vez disso, você começa com o projeto concluído que está no repositório.

Projeto concluído

O projeto do 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, não o Microsoft 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 – Instalar um canal de visualização do Microsoft Edge

  1. Se ainda não estiver instalado, instale um canal de visualização do Microsoft Edge. Para fazer isso, em uma nova janela ou guia, consulte Instalar um canal de visualização do Microsoft Edge em Configurar seu ambiente de desenvolvimento para WebView2.

Em seguida, continue abaixo.

Etapa 3 – Clonar ou baixar o repositório WebView2Samples

O código que você adiciona 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 você mesmo, se desejar.

Para manter este tutorial focado na codificação específica do WebView2, começamos a partir de um projeto existente do Microsoft Visual Studio (WebView2GettingStarted) armazenado no repositório GitHub WebView2Samples . Adicionaremos recursos do WebView2 – na verdade, os recursos já foram adicionados, mas seguimos 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 de área de trabalho C++ Win32 padrão. Para obter informações sobre o exemplo de aplicativo Win32 subjacente, padrão, 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 tiver, clone ou baixe o WebView2Samples repositório. Para fazer isso, em uma janela ou guia separada, siga as etapas em Baixar o repositório WebView2Samples ou Clonar o repositório WebView2Samples em Configurar seu ambiente de desenvolvimento para WebView2.

Em seguida, retorne aqui depois de copiar o repositório para sua unidade local e continue com as etapas abaixo.

Etapa 4 – Abrir a solução final (WebView2GettingStarted.sln)

Você começa com um projeto de área de trabalho básico que contém uma única janela main. 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 Visual Studio Code).

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

Etapa 5 – Instalar cargas de trabalho se solicitado

Instalador do Visual Studio pode abrir e solicitar que você instale uma carga de trabalho:

Instalador do Visual Studio solicitando a instalação da carga de trabalho 'Desenvolvimento da área de trabalho com C++'

Se Instalador do Visual Studio solicitar que você instale uma carga de trabalho:

  1. Selecione o desenvolvimento da área de trabalho com cartão C++ para que um indicador de seleção seja exibido.

  2. Se desejar, selecione também o cartão de desenvolvimento da área de trabalho do .NET (não necessário para este tutorial), para que um indicador de seleção também apareça neste cartão.

  3. Clique no botão Instalar .

O Instalador fecha.

Redirecionar projetos

A caixa de diálogo Ações de Solução de Revisão do Visual Studio pode aparecer, solicitando se você deseja redirecionar projetos:

Caixa de diálogo 'Revisar Ações de Solução' do Visual Studio, solicitando a Retarget Projects

  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 6 – 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ó Arquivos de Origem e selecione HelloWebView.cpp.

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

    O arquivo 'WebView2GettingStarted.sln' do repositório WebView2 clonado ou baixado, aberto no Visual Studio, em Gerenciador de Soluções

A captura de tela acima mostra um 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 nessa 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 na solução com o mesmo nome) e selecione Propriedades.

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

    1. Modifique 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:

    No Visual Studio 2017, defina a Versão do SDK do Windows como 10 e o Conjunto de Ferramentas de Plataforma para Visual Studio

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

    No Visual Studio 2022, a versão do SDK do Windows já é 10 e o Platform Toolset já está no Visual Studio

Continue com as etapas abaixo.

Etapa 7 – Criar e executar o projeto concluído do repositório

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

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

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

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

    O aplicativo de exemplo exibe uma janela pop-up com o botão URL e OK em uma janela vazia do WebView2

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

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

    O aplicativo de exemplo agora exibe o site do Bing

  3. Feche a janela de exemplo do WebView .

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

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

Em um momento, você instalará as 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 com segurança de tipo para padrões de codificação com Windows COM. Instale este pacote Microsoft.Windows.ImplementationLibrary por meio de Gerenciador de Soluções no Visual Studio, para o projeto.

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

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

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

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

    Gerenciar pacotes NuGet

  3. Na janela 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:

    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 na nova guia.

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

    1. SelecioneOpções de>ferramentas>Fontes de pacote doGerenciador de Pacotes> NuGet.

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

    3. Se as fontes de pacote não contiverem essa origem, 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) no computador.

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

Continue com as etapas abaixo.

Etapa 9 – Atualizar ou instalar o SDK do WebView2

O projeto concluído no repositório já tem uma versão do SDK do WebView2 instalado para o projeto. Se você estivesse criando um projeto do zero usando um modelo de projeto do Win32, precisaria instalar o pacote do 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 é alimentado pelo Microsoft Edge, e permite inserir tecnologias Web (HTML, CSS e JavaScript) em 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. Em Gerenciador de Soluções, clique com o botão direito do mouse no nó de projeto WebView2GettingStarted (não no nó da solução WebView2GettingStarted) e selecione Gerenciar Pacotes NuGet.

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

    Gerenciar pacotes NuGet

  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 para seu computador.

    Selecionando o pacote 'Microsoft.Web.WebView2' no Gerenciador de Pacotes do NuGet no Visual Studio

  8. Feche a guia Gerenciador de Pacotes Do 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 10 – 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 do código WebView2 da seguinte maneira:

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

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

  2. No 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 11 – Incluir o cabeçalho WebView2.h em HelloWebView.cpp

Acima, fizemos o seguinte:

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

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

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

  2. Em Gerenciador de Soluções, expanda Arquivos de Origem 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 se parece com a seguinte:

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

  4. Observe os cabeçalhos usados:

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

    • wil/com.h – 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 com segurança de tipo para padrões comuns de codificação do Windows.

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

  5. SelecioneSalvar todos osarquivos> (Ctrl+Shift+S) para salvar o projeto.

O arquivo de código-fonte e o projeto estão prontos para usar e criar na API do WebView2.

Continue com as etapas abaixo.

Etapa 12 – Criar seu aplicativo de exemplo vazio

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

    O aplicativo de exemplo abre e exibe uma janela vazia:

    O aplicativo de exemplo exibe uma janela vazia

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

  2. Feche a janela de aplicativo de exemplo do WebView .

Continue com as etapas abaixo.

Etapa 13 – Adicionar um controle WebView2 na janela pai

Em seguida, adicione um controle WebView2 à janela main.

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

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

  • Localização do navegador
  • Pasta de dados do usuário
  • Sinalizadores do navegador

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

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

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

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

  • 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 em seu 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 código a seguir 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. SelecioneSalvar todos osarquivos> (Ctrl+Shift+S) para salvar o projeto.

Criar 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ê terá uma janela Win32 preenchida com um controle WebView2 cheio de conteúdo de página da Web:

    Janela Bing

  2. Feche a janela de aplicativo de exemplo do WebView .

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

    O aplicativo de exemplo exibe uma janela inicialmente vazia com uma caixa de diálogo Bing

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

Continue com as etapas abaixo.

Etapa 14 – Eventos de navegação

Na etapa anterior, discutimos navegar até 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, confira Eventos de navegação para aplicativos WebView2.

Eventos de navegação

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 em uma linha.

Como exemplo de uso de eventos de navegação, registre um manipulador para o NavigationStarting evento para cancelar quaisquer 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 nenhum site que não seja https. Você pode usar um mecanismo semelhante para realizar outras tarefas, como restringir a navegação em seu próprio domínio.

Continue com as etapas abaixo.

Etapa 15 – Script

Use aplicativos host para injetar código JavaScript em controles WebView2 no runtime. Você pode tarefa WebView2 para 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 um tempo específico:

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

  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. SelecioneSalvar todos osarquivos> (Ctrl+Shift+S) para salvar o projeto.

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

Se o código precisar ser executado em 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 precisar ser executado em uma ordem específica, você deverá usar retornos de chamada.

Continue com as etapas abaixo.

Etapa 16 – 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 dentro de um controle WebView2 pode postar no host por meio do window.chrome.webview.postMessage método e a mensagem é tratada 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 que são 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 pedir ao host que 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 mensagem do host.

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

  4. O manipulador do host é acionado 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 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. SelecioneSalvar todos osarquivos> (Ctrl+Shift+S) para salvar o projeto.

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

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

    O aplicativo de exemplo exibe uma janela pop-up com o botão URL e OK em uma janela vazia do WebView2

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

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

    O aplicativo de exemplo agora exibe o site do Bing

  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 de API

Confira também