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++. Este é o exemplo principal do Win32 e tem páginas da Web de teste para os recursos e APIs mais recentes e centenas de itens de menu para testar várias APIs.

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

WebView2APISample insere um controle WebView2 em um aplicativo nativo Win32.

Este exemplo usa C++ e HTML/CSS/JavaScript no ambiente WebView2.

O WebView2APISample apresenta uma seleção de manipuladores de eventos e métodos de API do WebView2 que permitem que um aplicativo Win32 nativo 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, no Gerenciador de Soluções.

WebView2APISample é um aplicativo híbrido criado com o controle Microsoft Edge WebView2; ou seja, este 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 do 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 itens de menu úteis para testar e demonstrar as APIs do WebView2.

Sequência de artigos

Para começar a aprender o WebView2, use esta sequência sugerida de artigos e projetos de exemplo:

1. Obtenha este WebView2APISample para compilar e executar, usando o presente artigo, mesmo que seu próprio aplicativo seja para uma plataforma diferente.

2. Se você estiver mais interessado em uma plataforma diferente do Win32, use o artigo de exemplo para sua plataforma; confira Exemplos de aplicativos.

3. Use o artigo Introdução para a plataforma em que você está interessado; consulte Tutoriais de Introdução.

Etapa 1: instalar o Visual Studio 2022

1. Pressione a tecla Windows , insira Visual Studio 2022 e clique em Abrir.

   A caixa de diálogo Abrir recente do Visual Studio é aberta.

   O Microsoft Visual Studio Code não tem suporte para este exemplo.

2. Se o Visual Studio 2022 não estiver instalado, vá para Visual Studio 2022 e use o botão de combinação Baixar Visual Studio .

Continue com a próxima etapa abaixo, Etapa 2: Clone o repositório WebView2Samples.

Versões mais antigas do Visual Studio

O Visual Studio 2019 e 2017 também têm suporte.

Visual Studio 2019

Este exemplo foi criado com o Visual Studio 2019, como um projeto do Visual Studio 2019. Para abrir o projeto deste exemplo como está, você pode usar o Visual Studio 2019.

Visual Studio 2017

Se você quiser abrir este exemplo usando o Visual Studio 2017:

1. Abra a solução no Visual Studio 2017.

2. Altere o conjunto de ferramentas da plataforma do projeto nas propriedades > do projeto Propriedades > de configuração Conjunto de ferramentas gerais > da plataforma.

3. Você também pode precisar instalar um SDK do Windows recente em seu computador.

Etapa 2: Clonar o repositório WebView2Samples

1. Pressione Windows + E.

   Uma janela do Explorador de Arquivos é aberta.

2. Navegue até onde você clonou ou planeja clonar o repositório WebView2Samples .

   Caminho de exemplo:

   C:\Users\localAccount\GitHub\WebView2Samples

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

4. Se ainda não estiver aberto, abra um prompt de comando do git bash: Pressione a tecla Windows e digite git bash.

   Commits de pull

5. Alterne para o diretório de repositório clonado:

   cd C:/Users/localAccount/GitHub/WebView2Samples`
   

   Substitua o caminho no qual você clonou o repositório WebView2Samples .

6. Extraia os commits mais recentes para sua cópia local do repositório:

   git pull
   

   Criar uma ramificação de trabalho

7. Crie um branch de trabalho e alterne para ele:

   git checkout -b test
   

   Devoluções: Switched to branch 'test'

Agora você está livre para modificar o código em seu branch de trabalho, sem alterar o código que está no branch "main" do repositório. Mais tarde, você pode querer voltar para o branch "main", por exemplo, para extrair novos commits ou criar um branch diferente com base no branch "main".

Etapa 3: Abrir a solução no Visual Studio

Abrir e construir o exemplo modificará o exemplo. A prática recomendada é evitar alterar o código que está no branch "main", criando e alternando para um branch de trabalho, o que você pode fazer de dentro do Visual Studio.

1. Pressione a tecla Windows , insira Visual Studio 2022 e clique em Abrir.

   A caixa de diálogo recente Abrir Visual Studio é aberta:

   

2. Clique em Continuar sem código, no canto inferior direito.

3. No Visual Studio 2022, selecione Arquivo>Abrir>Projeto/Solução.

   A caixa de diálogo Abrir Projeto/Solução é aberta.

4. Navegue até o WebView2Samples\SampleApps\WebView2Samples.sln arquivo e clique no botão Abrir .

   Caminho de exemplo:

   C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
   

   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 Leiame desse exemplo. Em vez disso, o .sln arquivo desse exemplo (incluindo outros projetos de exemplo também) está no diretório pai.

   A caixa de diálogo Revisar Projeto e Alterações de Solução pode abrir:

   

5. Clique no botão OK .

   A solução é aberta no Visual Studio:

   

Etapa 4: Atualizar o conjunto de ferramentas

Continuando acima: A caixa de diálogo Ações da Solução de Revisão: Redirecionar Projetos pode ser aberta:

Esta captura de tela mostra:

• Versão do SDK do Windows:10.0 (última versão instalada)
• Conjunto de ferramentas da plataforma:Atualizar para a v143

Essas opções estão listadas para estes projetos:

• WebView2APISample.vcxproj - a amostra principal presente.

• WebView2APISampleWinComp.vcxproj - uma amostra diferente.

• Se essa caixa de diálogo for aberta, clique no botão OK .

  O painel Saída no Visual Studio mostra resultados, como:

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

  No navegador, é aberta uma página Relatório de Migração , como: file:///C:/Users/localAccount/GitHub/WebView2Samples/SampleApps/UpgradeLog.htm

Etapa 5: Atualizar o .NET

Continuando acima: No Visual Studio, no Gerenciador de Soluções no canto superior direito, a mensagem pode aparecer: Este projeto está direcionado a uma versão do .NET que não está instalada.

1. Se você receber essa mensagem, clique no link Instalar ao lado da mensagem.

   A caixa de diálogo do Visual Studio Installer é aberta:

   

2. Clique no botão Instalar .

   A caixa de diálogo Controle de Conta de Usuário é aberta.

3. Clique no botão Sim .

   A caixa de diálogo Visual Studio Installer mostra o progresso do download e da instalação e, em seguida, mostra A instalação foi concluída.

4. Clique no botão Fechar .

   A caixa de diálogo do Visual Studio Installer é fechada.

   O Gerenciador de Soluções é exibido sem a mensagem "não instalado".

Etapa 6: Instalar a carga de trabalho C++ para Visual Studio

Continuando acima: Se solicitado a instalar cargas de trabalho ao tentar criar o projeto:

1. No Visual Studio, selecione Ferramentas>Obter Ferramentas e Recursos.

   A caixa de diálogo Visual Studio Installer é aberta e, em seguida, a caixa de diálogo Modificando é aberta.

2. Na guia Cargas de trabalho, selecione o card Desenvolvimento da área de trabalho com C++, para que uma marca de seleção apareça nele.

3. Em Detalhes da instalação à direita, expanda Desenvolvimento da área de trabalho com C++.

4. Clique no botão Atualizar ou Instalar .

   O Instalador é fechado.

Veja também:

• Etapa 4 - Instale cargas de trabalho, se solicitado em Introdução ao WebView2 em aplicativos Win32.
• Instale cargas de trabalho do Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2.

Você não precisa instalar o WiX para continuar; Isso é para um projeto diferente neste arquivo de solução. A instalação do WiX é abordada no WiX Burn Bundle para implantar o WebView2 Runtime.

Etapa 7: compilar e executar usando o SDK mais antigo

Na parte superior do Visual Studio, defina o destino da compilação, da seguinte maneira:

1. Na lista suspensa Configurações da Solução , selecione Depurar.

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

3. No 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 .

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

   A janela do aplicativo WebView2APISample é aberta:

   

5. Feche a janela do aplicativo de exemplo.

Etapa 8: Atualizar o SDK do WebView2 de pré-lançamento

A versão de repositório deste exemplo tem uma versão de pré-lançamento do SDK do WebView2 instalada. Abaixo, você atualizará o SDK do WebView2 para a versão de pré-lançamento mais recente (a menos que o SDK de pré-lançamento mais recente já esteja instalado). Um SDK de Pré-lançamento dá suporte às APIs experimentais mais recentes e às APIs "Estável em Pré-lançamento" mais recentes.

1. Verifique o número da versão do SDK de pré-lançamento que está na cópia do repositório do aplicativo WebView2APISample no GitHub: consulte packages.config.

   Por exemplo:

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

2. Verifique qual é o número da versão de pré-lançamento mais recente, nas notas de versão do SDK do WebView2.

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

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

4. No Gerenciador de Pacotes NuGet, clique na guia Instalados :

   

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

6. À esquerda, selecione Microsoft.Web.WebView2.

7. À direita, na lista suspensa Versão , selecione a versão de pré-lançamento mais recente.

8. À direita da lista suspensa Versão , clique no botão Atualizar .

   A caixa de diálogo Visualizar Alterações é aberta:

   

9. Clique no botão Aplicar .

10. Repita as etapas acima para atualizar o Microsoft.Windows.Implementation.Library, mas você pode selecionar a versão mais recente em vez do Pré-lançamento mais recente.

    A versão de pré-lançamento mais recente do SDK do WebView2 agora está instalada para este projeto.

Veja também:

• Fases da adição de APIs em Sobre Notas de versão do SDK do WebView2.

Etapa 9: compilar e executar usando o SDK atualizado

Supondo que você tenha atualizado a versão de pré-lançamento do SDK do WebView2, compile e execute o exemplo novamente:

1. No 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. Feche a janela do aplicativo de exemplo.

Você obteve, atualizou, compilou e executou o aplicativo de exemplo Win32.

Etapa 10: Estudar a amostra

As seções a seguir descrevem como o exemplo funciona.

Exibir os arquivos do projeto

Estas etapas pressupõem que você obteve, atualizou, compilou e executou o aplicativo de exemplo Win32 de acordo com as etapas acima.

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

1. Abra WebView2Samples.sln no Visual Studio.

   Caminho de exemplo:

   C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
   

   Esse arquivo de solução contém o exemplo principal (WebView2APISample) e outros exemplos:

   

2. No Gerenciador de Soluções, expanda o projeto WebView2APISample:

   

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 Win32 pode acessar diretamente APIs nativas do Windows. A parte superior do aplicativo WebView2APISample é um componente Win32 escrito em C++. Essa parte do aplicativo recebe entradas de interface do usuário do usuário e as usa para controlar o WebView.

• O WebView é um contêiner para tecnologias da Web padrão (HTML, CSS e JavaScript). A parte principal do aplicativo WebView2APISample é um WebView que pode ser reaproveitado usando tecnologias da Web padrão (HTML/CSS/JavaScript). O WebView pode ser navegado para sites ou conteúdo local.

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

Este aplicativo de exemplo tem mais de 100 menuitems, que demonstram muitas APIs WebView2 na estrutura Win32/C++. As seções a seguir se concentram nos conceitos básicos da implementação de aplicativos híbridos.

Project Files

Esta seção explica brevemente alguns arquivos importantes 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 a escuta de comandos de menu até a chamada de métodos da API WebView para implementá-los.

App.cpp

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

AppWindow.cpp (menu Janela)

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

1. Configure todos os controles Win32.

2. Inicializar o ambiente 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 lida com comandos do menu Janela do aplicativo de exemplo.

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

FileComponent.cpp (menu Arquivo)

Esse componente manipula comandos do menu Arquivo (exceto para Sair), bem como o DocumentTitleChanged evento.

ScriptComponent.cpp (menu Script)

Esse componente manipula comandos do menu Script , que envolvem a interação 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 Processo)

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

SettingsComponent.cpp (menu Configurações)

Este componente manipula comandos do menu Configurações . Este componente também é responsável por copiar as configurações de um WebView antigo quando um novo é criado. A maior parte do código que interage 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 será redimensionada, 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 menu Scenario>Web Messaging . Este 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)

Este componente é criado quando você seleciona o item de menuObjetos do 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 HostObjectSample.idl, e o próprio objeto é implementado em HostObjectSampleImpl.cpp.

Veja também:

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

Funções principais em AppWindow.cpp

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

1. Configure todos os controles Win32.

2. Inicializar o ambiente 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 lida com comandos do menu Janela do aplicativo de exemplo. Veja a seguir algumas das principais funções do 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 em 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 CreateCoreWebView2Controllero .

A OnCreateEnvironmentCompleted função de retorno de chamada é passada para CreateCoreWebView2EnvironmentWithOptions em InitializeWebView(). O retorno de chamada armazena o ponteiro de 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 trecho de código de RegisterEventHandlers(), onde configuramos um manipulador de eventos para o NewWindowRequested evento. Esse evento é acionado quando o JavaScript na página da Web chama window.open(). ICoreWebView2NewWindowRequestedEventHandler cria um novo AppWindow e passa o WebView da nova janela de volta para o navegador, para que ele possa retorná-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++ ali mesmo:

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 menu Scenario>Web Messaging . 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, em seguida, explicam 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 Web Messaging.

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

   

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

Postando mensagens do host Win32 no WebView

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

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

2. No menu Script, selecione Postar mensagem Web JSON.

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

3. Clique em OK.

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

Como funciona

1. Em ScriptComponent.cpp, a chamada para PostWebMessageAsJson posta a entrada do ScenarioMessage.html usuário no 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 trecho de código abaixo é do ScenarioWebMessage.html. O ouvinte de eventos mudará 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 WebMessage (ScenarioWebMessage.html) conforme descrito acima.

2. Observe o título do aplicativo WebView2APISample , exibido no canto superior esquerdo da janela ao lado do ícone. Inicialmente, é WebView2APISample - Microsoft Edge WebView2.

3. Na seção Recebendo mensagens 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. Em ScenarioWebMessage.cpp, usamos add_WebMessageReceived para registrar o manipulador de eventos. Quando recebemos o evento, após 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 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 é 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. Em ScenarioWebMessage.html, um ouvinte de eventos 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 da API WebView2
• Introdução ao WebView2 em aplicativos Win32
• Visão geral das APIs do WebView2
• Fases da adição de APIs em Sobre Notas de versão do SDK do WebView2.