Aplicação de exemplo Win32

A aplicação WebView2APISample demonstra como utilizar o controlo WebView2 e as APIs WebView2 para adicionar funcionalidades a uma aplicação Win32 C++. Este é o exemplo main Win32 e tem páginas Web de teste para as mais recentes funcionalidades e APIs e centenas de menuitems para testar várias APIs.

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

WebView2APISample incorpora um controlo WebView2 numa aplicação nativa win32.

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

WebView2APISample apresenta uma seleção dos processadores de eventos e métodos de API do WebView2 que permitem que uma aplicação Win32 nativa interaja diretamente com um controlo WebView2 e vice-versa.

Este exemplo e o respetivo ficheiro de solução são exclusivos: contém uma cópia de outros exemplos, no Gerenciador de Soluções.

WebView2APISample é uma aplicação híbrida criada com o controlo Microsoft Edge WebView2; ou seja, esta aplicação combina um lado nativo e um lado da aplicação Web do browser. Veja Abordagem da aplicação híbrida em Introdução ao Microsoft Edge WebView2.

A janela da aplicação WebView2APISample mostra a versão do SDK WebView2 e também a versão e o caminho do WebView2 Runtime. Existem muitos menus e menuitems úteis para testar e demonstrar as APIs webView2.

Sequência de artigos

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

1. Obtenha este WebView2APISample para compilar e executar, utilizando o artigo atual, mesmo que a sua própria aplicação seja para uma plataforma diferente.

2. Se estiver mais interessado numa plataforma diferente do Win32, utilize o artigo Exemplo para a sua plataforma; veja Aplicações de exemplo.

3. Utilize o artigo Introdução para a plataforma em que está interessado; veja Introdução tutoriais.

Passo 1: Instalar o Visual Studio 2022

1. Prima a tecla Windows , introduza Visual Studio 2022 e, em seguida, clique em Abrir.

   É aberta a caixa de diálogo Abrir recentemente do Visual Studio.

   O Microsoft Visual Studio Code não é suportado para este exemplo.

2. Se o Visual Studio 2022 não estiver instalado, aceda ao Visual Studio 2022 e, em seguida, utilize o botão de combinação Transferir Visual Studio .

Continue com o passo seguinte abaixo, Passo 2: Clonar o repositório WebView2Samples.

Versões mais antigas do Visual Studio

O Visual Studio 2019 e 2017 também são suportados.

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 tal como está, pode utilizar o Visual Studio 2019.

Visual Studio 2017

Se quiser abrir este exemplo com o Visual Studio 2017:

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

2. Altere o Conjunto de Ferramentas de Plataforma do projeto nas propriedades de Configuração de Propriedades > do Projeto Conjunto de Ferramentas > de Plataforma Geral>.

3. Também poderá ter de instalar uma SDK do Windows recente no seu computador.

Passo 2: Clonar o repositório WebView2Samples

1. Prima Windows + E.

   É aberta uma janela de Explorador de Arquivos.

2. Navegue para onde clonou ou planeie clonar o repositório WebView2Samples .

   Caminho de exemplo:

   C:\Users\localAccount\GitHub\WebView2Samples

3. Se ainda não tiver terminado, clone o WebView2Samples repositório para a unidade local. Numa janela ou separador separado, consulte Clonar o repositório WebView2Samples em Configurar o ambiente Dev para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue abaixo.

4. Se ainda não estiver aberto, abra uma linha de comandos do Git Bash: prima a tecla Windows e, em seguida, escreva git bash.

   Consolidações de solicitação

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

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

   Substitua o caminho para o qual clonou o repositório WebView2Samples .

6. Solicite as consolidações mais recentes para a cópia local do repositório:

   git pull
   

   Criar um ramo de trabalho

7. Crie um ramo de trabalho e mude para o mesmo:

   git checkout -b test
   

   Devolve: Switched to branch 'test'

Agora, pode modificar o código no ramo de trabalho, sem alterar o código que está no ramo "main" do repositório. Mais tarde, poderá querer voltar ao ramo "main", por exemplo, para solicitar novas consolidações ou criar um ramo diferente com base no ramo "main".

Passo 3: abrir a solução no Visual Studio

Abrir e criar o exemplo modificará o exemplo. A melhor prática é evitar alterar o código que está no ramo "main", ao criar e mudar para um ramo de trabalho, o que pode fazer a partir do Visual Studio.

1. Prima a tecla Windows , introduza Visual Studio 2022 e, em seguida, clique em Abrir.

   É aberta a caixa de diálogo Abrir recentemente do Visual Studio:

   

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

3. No Visual Studio 2022, selecioneAbrir>Ficheiro>Projeto/Solução.

   É aberta a caixa de diálogo Abrir Projeto/Solução .

4. Navegue para o WebView2Samples\SampleApps\WebView2Samples.sln ficheiro e, em seguida, clique no botão Abrir .

   Caminho de exemplo:

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

   Ao contrário de outros exemplos, não existe um ficheiro dedicado .sln no diretório de repositório de exemplo que contenha o Readme deste exemplo. Em vez disso, o .sln ficheiro para este exemplo (incluindo outros projetos de exemplo) está no diretório principal.

   A caixa de diálogo Rever Alterações de Projetos e Soluções pode abrir:

   

5. Clique no botão OK .

   A solução é aberta no Visual Studio:

   

Passo 4: atualizar o conjunto de ferramentas

Continuando acima: a caixa de diálogo Rever Ações de Solução: Retarget Projects (Rever Ações da Solução: Retarget Projects ) pode abrir:

Esta captura de ecrã mostra:

• SDK do Windows Versão:10.0 (versão instalada mais recente)
• Conjunto de Ferramentas da Plataforma:Atualizar para v143

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

• WebView2APISample.vcxproj - o exemplo presente main.

• 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, tais 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 browser, é aberta uma página Relatório de Migração , como: file:///C:/Users/localAccount/GitHub/WebView2Samples/SampleApps/UpgradeLog.htm

Passo 5: Atualizar o .NET

Continuando acima: no Visual Studio, no Gerenciador de Soluções no canto superior direito, a mensagem poderá aparecer: este projeto destina-se a uma versão do .NET que não está instalada.

1. Se receber essa mensagem, clique na ligação Instalar junto à mensagem.

   É aberta a caixa de diálogo Visual Studio Installer:

   

2. Clique no botão Instalar .

   É aberta a caixa de diálogo Controlo de Conta de Utilizador .

3. Clique no botão Sim .

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

4. Clique no botão Fechar .

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

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

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

Continuar a partir de cima: se lhe for pedido para instalar cargas de trabalho quando tenta criar o projeto:

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

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

2. No separador Cargas de trabalho, selecione o ambiente de trabalho desenvolvimento com C++ card, para que seja apresentada uma marca de verificação no mesmo.

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

4. Clique no botão Atualizar ou Instalar .

   O Instalador é fechado.

Veja também:

• Passo 4 – Instale cargas de trabalho, se lhe for pedido em Introdução ao WebView2 em aplicações Win32.
• Instale cargas de trabalho do Visual Studio em Configurar o ambiente Dev para WebView2.

Não precisa de instalar o WiX para continuar; que é para um projeto diferente neste ficheiro de solução. A instalação do WiX é abordada no Pacote De Gravação WiX para implementar o WebView2 Runtime.

Passo 7: criar e executar com o SDK mais antigo

Na parte superior do Visual Studio, defina o destino da criação da seguinte forma:

1. Na lista pendente Configurações de Soluções , selecione Depurar.

2. Na lista pendente Plataformas de Soluções , selecione x64.

3. No Gerenciador de Soluções, clique com o botão direito do rato no projeto WebView2APISample e, em seguida, selecione Compilar.

   

   Esta ação cria o ficheiro SampleApps/WebView2APISample/WebView2APISample.vcxprojde projeto .

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

   É aberta a janela da aplicação WebView2APISample :

   

5. Feche a janela da aplicação de exemplo.

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

A versão de repositório deste exemplo tem uma versão de Pré-lançamento do SDK WebView2 instalada. Abaixo, irá atualizar o SDK 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 suporta as APIs experimentais mais recentes e as APIs mais recentes "Estável em Pré-lançamento".

1. Verifique o número da versão do SDK de Pré-lançamento que está na cópia do repositório da aplicação 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, em Notas de Versão do SDK WebView2.

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

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

4. No Gestor de Pacotes NuGet, clique no separador Instalado :

   

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

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

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

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

   É aberta a caixa de diálogo Pré-visualizar Alterações :

   

9. Clique no botão Aplicar .

10. Repita os passos acima para atualizar Microsoft.Windows.Implementation.Library, mas pode selecionar a Versão mais recente em vez da Versão Anterior à Versão mais recente.

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

Veja também:

• Fases de adição de APIs em Acerca das Notas de Versão para o SDK WebView2.

Passo 9: criar e executar com o SDK atualizado

Partindo do princípio de que atualizou a versão de Pré-lançamento do SDK WebView2, crie e execute novamente o exemplo:

1. No Gerenciador de Soluções, clique com o botão direito do rato no projeto WebView2APISample e, em seguida, selecione Compilar.

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

   É aberta a janela da aplicação WebView2APISample :

   

3. Feche a janela da aplicação de exemplo.

Obteve, atualizou, compilou e executou a aplicação de exemplo Win32.

Passo 10: Estudar a amostra

As secções abaixo descrevem como o exemplo funciona.

Ver os ficheiros do projeto

Estes passos partem do princípio de que obteve, atualizou, compilou e executou a aplicação de exemplo Win32 de acordo com os passos acima.

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

1. Abra WebView2Samples.sln no Visual Studio.

   Caminho de exemplo:

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

   Este ficheiro de solução contém o exemplo de main (WebView2APISample) e outros exemplos:

   

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

   

Arquitetura de aplicações híbridas

A aplicação WebView2APISample é um exemplo de uma aplicação híbrida, com uma peça nativa Win32 e uma peça WebView:

• A parte Win32 pode aceder diretamente às APIs nativas do Windows. A parte superior da aplicação WebView2APISample é um componente Win32 escrito em C++. Esta parte da aplicação recebe entradas de IU do utilizador e utiliza-as para controlar o WebView.

• O WebView é um contentor para tecnologias Web padrão (HTML, CSS e JavaScript). A parte main da aplicação WebView2APISample é uma WebView que pode ser reutilizada com tecnologias Web padrão (HTML/CSS/JavaScript). O WebView pode ser navegado para sites ou conteúdos locais.

Esta abordagem híbrida permite-lhe criar e iterar mais rapidamente com tecnologias Web, ao mesmo tempo que pode tirar partido da funcionalidade nativa. A aplicação WebView2APISample demonstra como o componente Win32 e o componente WebView podem interagir entre si.

Esta aplicação de exemplo tem mais de 100 menuitems, que demonstram muitas APIs WebView2 na arquitetura Win32/C++. As secções seguintes focam-se nas noções básicas da implementação de aplicações híbridas.

Ficheiros do Project

Esta secção explica brevemente alguns ficheiros chave no repositório. A aplicação WebView2APISample está dividida verticalmente em componentes, em vez de horizontalmente em camadas. Cada componente implementa todo o fluxo de trabalho de uma categoria de funcionalidades de exemplo, desde escutar comandos de menu até chamar métodos da API WebView para implementá-los.

App.cpp

Este é o ficheiro de nível superior que executa a aplicação WebView2APISample . Lê as opções da linha de comandos, configura o ambiente de processo e processa o modelo de threading da aplicação.

AppWindow.cpp (menu Janela)

Este ficheiro implementa a janela da aplicação ao fazer o seguinte:

1. Configure todos os controlos Win32.

2. Inicialize o Ambiente webView e o WebView.

3. Adicione processadores de eventos ao WebView e crie todos os componentes que processam várias funcionalidades da aplicação.

A AppWindow classe processa comandos do menu Janela da aplicação de exemplo.

Este ficheiro é descrito mais detalhadamente em Funções de chave no AppWindow.cpp, abaixo.

FileComponent.cpp (menu Ficheiro)

Este componente processa comandos do menu Ficheiro ( exceto sair), bem como do DocumentTitleChanged evento.

ScriptComponent.cpp (menu Script)

Este componente processa comandos do menu Script , que envolvem interagir com o WebView ao injetar JavaScript, publicar WebMessages, adicionar objetos nativos à página Web ou utilizar o protocolo DevTools para comunicar com a página Web.

ProcessComponent.cpp (menu Processo)

Este componente processa comandos do menu Processo , que envolvem interação com o processo do browser. Também processa o ProcessFailed evento, caso o processo do browser ou um dos processos de composição falhe ou não responda.

SettingsComponent.cpp (menu Definições)

Este componente processa comandos a partir do menu Definições . Este componente também é responsável pela cópia das definições de uma WebView antiga quando é criada uma nova. A maioria do código que interage com a ICoreWebView2Settings interface encontra-se aqui.

ViewComponent.cpp (menu Ver)

Este componente processa comandos do menu Ver e quaisquer funcionalidades relacionadas com o dimensionamento e visibilidade do WebView. Quando a janela da aplicação é redimensionada, minimizada ou restaurada, ViewComponent irá redimensionar, ocultar ou mostrar o WebView em resposta. Também responde ao ZoomFactorChanged evento.

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

O ScenarioWebMessage componente é criado quando seleciona o item de menu Cenário>de Mensagens Web . Este componente implementa uma aplicação de exemplo com uma parte C++ e uma parte HTML + JavaScript, que comunicam entre si ao publicar e receber mensagens de forma assíncrona.

Este componente é descrito mais detalhadamente em ScenarioWebMessage (.html, .cpp e .h), abaixo.

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

Este componente é criado quando seleciona o item de menuObjetos de Anfitrião do Cenário>. Demonstra a comunicação entre a aplicação nativa e a página Web HTML através da injeção de objeto anfitrião. A interface do objeto anfitrião é declarada em HostObjectSample.idle o próprio objeto é implementado no HostObjectSampleImpl.cpp.

Veja também:

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

Funções-chave no AppWindow.cpp

AppWindow.cpp implementa a janela da aplicação ao fazer o seguinte:

1. Configure todos os controlos Win32.

2. Inicialize o Ambiente webView e o WebView.

3. Adicione processadores de eventos ao WebView e crie todos os componentes que processam várias funcionalidades da aplicação.

A AppWindow classe processa comandos do menu Janela da aplicação de exemplo. Seguem-se algumas das principais funções em AppWindow.cpp.

InitializeWebView()

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

Para ver estas chamadas à 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 com CreateCoreWebView2Controller.

A OnCreateEnvironmentCompleted função de chamada de retorno é transmitida para CreateCoreWebView2EnvironmentWithOptions em InitializeWebView(). A chamada de retorno armazena o ponteiro do ambiente e, em seguida, utiliza-o 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 chamada de retorno é transmitida para CreateCoreWebView2Controller em InitializeWebView(). Esta chamada de retorno:

• Inicializa o estado relacionado com WebView.
• Regista alguns processadores de eventos.
• Cria os componentes da aplicação.

RegisterEventHandlers()

A RegisterEventHandlers função é chamada dentro de CreateCoreWebView2Controller. Configura alguns dos processadores de eventos utilizados pela aplicação e adiciona-os ao WebView.

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

Segue-se um fragmento de código de RegisterEventHandlers(), onde configuramos um processador de eventos para o NewWindowRequested evento. Este evento é acionado quando o JavaScript na página Web chama window.open(). ICoreWebView2NewWindowRequestedEventHandler cria um novo AppWindow e transmite o WebView da nova janela para o browser, para que possa devolvê-lo a window.open() partir da chamada. Ao contrário das nossas chamadas para CreateCoreWebView2EnvironmentWithOptions e CreateCoreWebView2Controller, em vez de fornecer um método para a chamada de retorno, apenas fornecemos um C++ lambda imediatamente e ali:

CHECK_FAILURE(m_webView->add_NewWindowRequested(
    Callback<ICoreWebView2NewWindowRequestedEventHandler>(
        [this](
            ICoreWebView2* sender,
            ICoreWebView2NewWindowRequestedEventArgs* args) {
            wil::com_ptr<ICoreWebView2Deferral> deferral;
            CHECK_FAILURE(args->GetDeferral(&deferral));

            auto newAppWindow = new AppWindow(L"");
            newAppWindow->m_isPopupWindow = true;
            newAppWindow->m_onWebViewFirstInitialized = [args, deferral, newAppWindow]() {
                CHECK_FAILURE(args->put_NewWindow(newAppWindow->m_webView.get()));
                CHECK_FAILURE(args->put_Handled(TRUE));
                CHECK_FAILURE(deferral->Complete());
            };

            return S_OK;
        })
        .Get(),
    nullptr));

ScenarioWebMessage (.html, .cpp e .h)

Os ScenarioWebMessage ficheiros mostram como o anfitrião Win32 pode modificar o WebView, como o WebView pode modificar o anfitrião Win32 e como o WebView se pode modificar ao aceder às informações do anfitrião Win32. Isto é feito de forma assíncrona.

O ScenarioWebMessage componente é criado quando seleciona o item de menu Cenário>de Mensagens Web . O ScenarioWebMessage componente implementa uma aplicação de exemplo com uma parte C++ e uma parte HTML+JavaScript, que comunicam entre si ao publicar e receber mensagens de forma assíncrona:

As secções seguintes demonstram como cada função discreta funciona com a aplicação WebView2APISample e, em seguida, explica como implementar esta funcionalidade.

Primeiro, aceda à aplicação Web ScenarioWebMessage na aplicação de exemplo:

1. Abra (execute) a aplicação WebView2APISample .

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

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

   

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

Publicar Mensagens do anfitrião Win32 no WebView

Os passos seguintes mostram como o Anfitrião Win32 pode modificar um WebView. Neste exemplo, irá tornar o texto azul:

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

2. No menu Script , selecione Publicar Mensagem Web JSON.

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

3. Clique em OK.

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

Como funciona

1. No ScriptComponent.cpp, a chamada para PostWebMessageAsJson publica a entrada do utilizador na aplicação ScenarioMessage.html 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. Na aplicação Web, os serviços de escuta de eventos são utilizados para receber e responder à mensagem Web. O fragmento de código abaixo é de ScenarioWebMessage.html. O serviço de escuta de eventos altera 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;
      }
   });
   

Receber mensagens (do WebView para o anfitrião Win32)

Os passos seguintes mostram como o WebView pode modificar a Aplicação Anfitriã Win32 ao alterar o título da aplicação Win32:

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

2. Tenha em atenção o título da aplicação WebView2APISample , apresentado no canto superior esquerdo da janela junto ao ícone. Inicialmente, é WebView2APISample – Microsoft Edge WebView2.

3. Na secção Receber Mensagens da página, introduza um novo título e, em seguida, clique no botão Enviar .

4. Tenha em atenção o novo título que é apresentado na barra de título da aplicação WebView2APISample .

Como funciona

1. No ScenarioWebMessage.html, window.chrome.webview.postMessage() envia a entrada do utilizador para a aplicação anfitriã:

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

2. No ScenarioWebMessage.cpp, utilizamos add_WebMessageReceived para registar o processador de eventos. Quando recebermos o evento, depois de validar a entrada, alteramos o título da Janela da Aplicação (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 anfitrião de volta para o WebView)

Os passos seguintes mostram como o WebView pode obter informações do Anfitrião Win32 e modificar-se ao apresentar o tamanho da Aplicação Win32.

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

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

   A caixa de texto abaixo do botão apresenta os limites da aplicação WebView2APISample .

Como funciona

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

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

2. No ScenarioWebMessage.cpp, utilizamos add_WebMessageReceived para registar o processador de eventos recebido. Depois de validar a entrada, o processador de eventos obtém limites de janela a partir da Janela da Aplicação. PostWebMessageAsJson envia os limites para a aplicação Web:

   if (message.compare(L"GetWindowBounds") == 0)
   {
      RECT bounds = m_appWindow->GetWindowBounds();
      std::wstring reply =
         L"{\"WindowBounds\":\"Left:" + std::to_wstring(bounds.left)
         + L"\\nTop:" + std::to_wstring(bounds.top)
         + L"\\nRight:" + std::to_wstring(bounds.right)
         + L"\\nBottom:" + std::to_wstring(bounds.bottom)
         + L"\"}";
      CHECK_FAILURE(sender->PostWebMessageAsJson(reply.c_str()));
   }
   

3. No ScenarioWebMessage.html, um serviço de escuta de eventos responde à WindowBounds mensagem e apresenta 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 aplicações Win32
• Descrição geral das APIs WebView2
• Fases de adição de APIs em Acerca das Notas de Versão para o SDK WebView2.