Aplicativo de exemplo Win32 com Composição Visual

Este exemplo de WebView2 insere um controle WebView2 em um aplicativo nativo Win32.

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

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

Este exemplo usa as APIs de Composição do Windows Runtime (também chamadas 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 de manipuladores de eventos e métodos de API do WebView2 que permitem que um aplicativo Win32 nativo interaja diretamente com um WebView e vice-versa.

Se esta for a primeira vez que você usa 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 Leiame para WebView2SampleWinComp.

Etapa 1 – Instalar o Visual Studio com suporte a C++

O Microsoft Visual Studio é necessário. O Microsoft Visual Studio Code não tem suporte para este exemplo.

Este exemplo foi criado como um projeto Win32 do 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 nesta 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 da Plataforma do projeto em Propriedades > do Projeto Propriedades > de configuração 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.

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

Etapa 2 – Clonar ou baixar o repositório WebView2Samples

1. Se ainda não tiver feito isso, clone ou baixe o WebView2Samples repositório para sua unidade local. Em uma janela ou guia separada, consulte Baixar 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.

Etapa 3 – Abrir a Solução e definir o destino do SDK do Windows

1. Na 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 da Solução pode ser aberta, solicitando para qual SDK do Windows instalado redirecione o projeto:

   

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.

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

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

Etapa 4 – Instalar o SDK do Windows

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

Para instalar um SDK do Windows 10:

1. Vá para o SDK do Windows e o arquivo do emulador.

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

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

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

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

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

   

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

   

6. Clique no botão Fechar .

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

Etapa 5 - Instalar cargas de trabalho, se solicitado

• Se solicitado, instale 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 nesta seção e, em seguida, retorne a esta página e continue abaixo.

Etapa 6 - Compilar e executar o projeto

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

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 ou Liberar.

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

3. No 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 7 - Atualizar os pacotes instalados

Essa etapa é opcional. O exemplo pré-instalou:

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

1. No 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 NuGet é aberta.

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

3. Clique na guia Instalados . 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 uma pré-versão mais recente do SDK do Microsoft.Web.WebView2 estiver listada, você poderá, opcionalmente, clicar no botão Atualizar . Um pré-lançamento tem um sufixo "-prerelease", como 1.0.1248-prerelease. Se você quiser ver detalhes sobre esta 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 nesta 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á, opcionalmente, clicar no botão Atualizar .

7. Siga as instruções para continuar atualizando os pacotes.

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

Etapa 8 – 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 da API WebView2