Aplicativo de exemplo Win32 com Composição Visual

Este exemplo do WebView2 inscreve um controle WebView2 em um aplicativo nativo do Win32.

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

Este exemplo é criado como um projeto do Win32 Visual Studio 2019. Ele usa C++ e HTML/CSS/JavaScript no ambiente WebView2.

Este exemplo usa as APIs de composição Windows Runtime (também chamada de camada Visual) para aproveitar os recursos da interface do usuário do Windows e criar uma melhor aparência, sensação e funcionalidade em aplicativos C++ Win32.

Este exemplo mostra uma seleção dos manipuladores de eventos e métodos de API do WebView2 que permitem que um aplicativo nativo do Win32 interaja diretamente com um WebView e vice-versa.

Se essa for sua primeira vez usando o WebView, recomendamos primeiro seguir o tutorial Introdução ao WebView2 em aplicativos Win32, que aborda como criar um WebView2 e percorre algumas funcionalidades básicas do WebView2.

Consulte também o arquivo Readme para WebView2SampleWinComp.

Etapa 1 – Instalar um canal de visualização do Microsoft Edge

Recomendamos a versão mais recente do canal canário do Edge.

1. Se um canal de visualização do Microsoft Edge (Beta, Dev ou Canary) ainda não estiver instalado, em uma janela ou guia separada, consulte Instalar um canal de visualização do Microsoft Edge em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 2 – Instalar o Visual Studio com suporte ao C++

O Microsoft Visual Studio é necessário. Não há suporte para o microsoft Visual Studio Code para este exemplo.

Este exemplo é criado como um projeto do Win32 Visual Studio 2019.

1. Se o Visual Studio (versão mínima necessária) ainda não estiver instalado, em uma janela ou guia separada, consulte Instalar o Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue as etapas abaixo.

2. Se você quiser usar o Visual Studio 2017, altere o Conjunto de Ferramentas de Plataforma do projeto nas propriedades de Configuração de Propriedades > do Projeto Conjunto geral > de ferramentas > da plataforma. Talvez você também precise alterar o SDK do Windows para a versão mais recente disponível para você.

Outros pré-requisitos

• SDK do WebView2 – Uma versão de pré-lançamento do SDK do WebView2 já está instalada neste projeto de exemplo. As etapas são mostradas abaixo para atualizar opcionalmente o SDK.

• Windows 10 SDK – Por padrão, este aplicativo de exemplo usará a versão mais recente do SDK da Janela 10 instalada em seu computador. No entanto, há um problema com Windows 10 SDK, versão 2004 (10.0.19041.0) que impedirá a criação deste aplicativo de exemplo. As etapas são fornecidas abaixo para instalar uma versão compatível do SDK Windows 10.

Etapa 3 – Clonar ou baixar o repositório WebView2Samples

A primeira etapa para compilar esse exemplo é obter uma cópia local do repositório de exemplos.

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

Etapa 4 – Abrir a solução e definir o destino do SDK do Windows

1. Em sua unidade local, abra o .sln arquivo no Visual Studio, no diretório:

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   ou:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   Uma caixa de diálogo Revisar Ações de Solução pode ser aberta, solicitando que você tenha instalado o SDK do Windows para redirecionar o projeto para:

   

2. Na lista suspensa Versão do SDK do Windows , selecione 10.0.20348.0 ou posterior ou 10.0.18362.0 ou anterior; não selecione 10.0.19041.0. Em seguida, clique no botão OK . Se essas versões não estiverem disponíveis, execute as etapas na seção "Instalar o SDK do Windows" abaixo. Caso contrário, pule para a seção abaixo disso.

Se a solução já estiver aberta, você poderá alterar o destino da seguinte maneira:

• Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2SampleWinComp (não na solução) e clique em Retarget Projects.

Etapa 5 – Instalar o SDK do Windows

Por padrão, este aplicativo de exemplo usa a versão mais recente do SDK da Janela 10 que você instalou. Há um problema com Windows 10 SDK, versão 2004 (10.0. 19041.0) que impedirá a criação deste aplicativo de exemplo. Se você encontrar esse problema, instale (e redirecione este projeto para usar) uma versão posterior, como Windows 10 SDK versão 2104 (10.0). 20348.0) ou uma versão anterior, como 10.0. 18362.1.

Para instalar um SDK Windows 10:

1. Acesse o SDK do Windows e o arquivo do emulador.

2. Em uma das seguintes linhas, clique no link Instalar SDK :

   • Windows 10 SDK versão 2104 (10.0.20348.0) (ou posterior)
   • Windows 10 SDK, versão 1903 (10.0.18362.1)

   Uma cópia específica da winsdksetup.exe versão é baixada no diretório Downloads .

3. Em seu Downloads diretório, abra a cópia do winsdksetup.exe que você acabou de baixar.

4. A janela de configuração do SDK do Windows é aberta:

   

5. Clique no botão Avançar e siga os prompts. Você pode aceitar os padrões. Ao final da instalação, a tela de boas-vindas do SDK do Windows para qualquer versão selecionada é exibida:

   

6. Clique no botão Fechar .

Faça a etapa anterior: "Abra a solução e defina o destino do SDK do Windows". Ou, se a solução já estiver aberta, em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2SampleWinComp (não solução) e clique em Retarget Projects.

Etapa 6 – Instalar cargas de trabalho se solicitado

• Se solicitado, instale todas as cargas de trabalho do Visual Studio solicitadas. Em uma janela ou guia separada, consulte Instalar cargas de trabalho do Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue abaixo.

Etapa 7 – Criar e executar o projeto

Depois de abrir a solução no Visual Studio (acima) e responder a qualquer prompt de instalação ou instalação, o projeto será aberto no Visual Studio, mostrando o projeto WebView2SampleWinComp em Gerenciador de Soluções:

Na parte superior do Visual Studio, defina o destino de build da seguinte maneira:

1. Na lista suspensa Configurações da Solução , selecione Depuração ou Versão.

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

3. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2SampleWinComp e selecione Compilar.

   Isso cria o arquivo SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxprojde projeto .

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

   A janela do aplicativo de exemplo é aberta:

   

5. No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha o aplicativo.

Etapa 8 – Atualizar os pacotes instalados

Essa etapa é opcional. O exemplo foi pré-instalado:

• Uma versão do SDK de pré-lançamento do WebView2.
• Uma versão das Bibliotecas de Implementação do Windows (WIL).

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2SampleWinComp (não no nó Solução) e selecione Gerenciar Pacotes NuGet. A guia Gerenciador de Pacotes do NuGet é aberta.

2. Selecione a caixa de seleção Incluir pré-lançamento .

3. Clique na guia Instalado . Para cada pacote, observe se há duas versões listadas (a versão atual e um número de versão atualizado disponível).

4. Clique na guia Atualizações.

5. Se um pré-lançamento mais recente do SDK microsoft.Web.WebView2 estiver listado, você poderá clicar opcionalmente no botão Atualizar . Um pré-lançamento tem um sufixo "-prerelease", como 1.0.1248-prerelease. Se você quiser ver detalhes sobre essa etapa, em uma janela ou guia separada, consulte Instalar ou atualizar o SDK do WebView2 em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue abaixo.

   

6. Se uma versão mais recente das Bibliotecas de Implementação do Windows (WIL) estiver listada, você poderá clicar opcionalmente no botão Atualizar .

7. Siga os prompts para continuar atualizando os pacotes.

8. Crie e execute o projeto novamente, agora usando os pacotes atualizados.

Etapa 9 – Inspecionar o código

1. No editor de código do Visual Studio, inspecione o código:

   

Confira também

• Introdução ao WebView2 em aplicativos Win32
• Referência de API do WebView2