Aplicação de exemplo Win32 com Composição Visual
Este exemplo de WebView2 incorpora um controlo WebView2 numa aplicação nativa win32.
- Nome de exemplo: WebView2SampleWinComp
- Diretório de repositório: WebView2SampleWinComp
- Ficheiro de solução:
WebView2SampleWinComp.sln
Este exemplo foi criado como um projeto do Win32 Visual Studio 2019. Utiliza C++ e HTML/CSS/JavaScript no ambiente WebView2.
Este exemplo utiliza as APIs de Composição do Windows Runtime (também denominadas camada Visual) para tirar partido das funcionalidades da IU do Windows e criar um melhor aspeto, funcionalidade e funcionalidade em aplicações C++ Win32.
Este exemplo mostra 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 WebView e vice-versa.
Se esta for a primeira vez que utiliza o WebView, recomendamos que siga primeiro o tutorial Introdução ao WebView2 nas aplicações Win32, que explica como criar um WebView2 e explica algumas funcionalidades básicas do WebView2.
Consulte também o ficheiro Readme para WebView2SampleWinComp.
Passo 1 – Instalar o Visual Studio com suporte C++
É necessário o Microsoft Visual Studio. O Microsoft Visual Studio Code não é suportado para este exemplo.
Este exemplo foi criado como um projeto do Win32 Visual Studio 2019.
Se o Visual Studio (versão mínima necessária) ainda não estiver instalado, numa janela ou separador separador, consulte Instalar o Visual Studio em Configurar o ambiente de Programador para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue os passos abaixo.
Se quiser utilizar o Visual Studio 2017, altere o Conjunto de Ferramentas de Plataforma do projeto nas propriedades de Configuração de Propriedades > do Projeto Conjunto de Ferramentas > de Plataforma Geral>. Também poderá ter de alterar o SDK do Windows para a versão mais recente disponível para si.
Outros pré-requisitos
SDK WebView2 – uma versão de pré-lançamento do SDK WebView2 já está instalada neste projeto de exemplo. Os passos são apresentados abaixo para atualizar opcionalmente o SDK.
Windows 10 SDK – por predefinição, esta aplicação de exemplo utilizará a versão mais recente do SDK do Windows 10 instalada no seu computador. No entanto, existe um problema com Windows 10 SDK, versão 2004 (10.0.19041.0) que impedirá a criação desta aplicação de exemplo. Os passos são fornecidos abaixo para instalar uma versão compatível do SDK Windows 10.
Passo 2 – Clonar ou transferir o repositório WebView2Samples
- Se ainda não tiver terminado, clone ou transfira o
WebView2Samplesrepositório para a unidade local. Numa janela ou separador separador, consulte Transferir o repositório WebView2Samples em Configurar o ambiente de Programador para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue abaixo.
Passo 3 – Abrir a Solução e definir o destino do SDK do Windows
Na unidade local, abra o
.slnficheiro no Visual Studio, no diretório :<your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln
ou:
<your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln
Pode ser aberta uma caixa de diálogo Rever Ações de Solução, solicitando-lhe para que SDK do Windows instaladas para voltar a obter o projeto para:
Na lista pendente 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, siga os passos na secção "Instalar o SDK do Windows" abaixo. Caso contrário, avance para a secção abaixo.
Se a solução já estiver aberta, pode alterar o destino da seguinte forma:
- No Gerenciador de Soluções, clique com o botão direito do rato no projeto WebView2SampleWinComp (não solução) e, em seguida, clique em Voltar a obter Projetos.
Passo 4 – Instalar o SDK do Windows
Por predefinição, esta aplicação de exemplo utiliza a versão mais recente do SDK do Windows 10 que instalou. Existe um problema com Windows 10 SDK, versão 2004 (10.0).19041.0) que irá impedir a criação desta aplicação de exemplo. Se se deparar com este problema, instale (e volte a obter este projeto para utilizar) uma versão posterior, como Windows 10 SDK versão 2104 (10.0).20348.0) ou uma versão anterior, como a versão 10.0. 18362.1.
Para instalar um SDK Windows 10:
Aceda a SDK do Windows e arquivo do emulador.
Numa das seguintes linhas, clique na ligação Instalar o 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 versão do
winsdksetup.exeé transferida para o seuDownloadsdiretório.No seu
Downloadsdiretório, abra a cópia da que acabou dewinsdksetup.exetransferir.É aberta a janela de configuração do SDK do Windows:
Clique no botão Seguinte e, em seguida, siga as instruções. Pode aceitar as predefinições. No final da instalação, é apresentado o ecrã de boas-vindas SDK do Windows para a versão que selecionou:
Clique no botão Fechar .
Efetue o passo anterior, "Abrir a Solução e definir o destino SDK do Windows". Em alternativa, se a solução já estiver aberta, no Gerenciador de Soluções, clique com o botão direito do rato no projeto WebView2SampleWinComp (não solução) e, em seguida, clique em Voltar a obter Projetos.
Passo 5 – Instalar cargas de trabalho, se lhe for pedido
- Se lhe for pedido, instale quaisquer cargas de trabalho do Visual Studio pedidas. Numa janela ou separador separador, consulte Instalar cargas de trabalho do Visual Studio em Configurar o ambiente Dev para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue abaixo.
Passo 6 – Compilar e executar o projeto
Depois de abrir a solução no Visual Studio (acima) e responder a quaisquer pedidos de configuração ou instalaçã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 criação da seguinte forma:
Na lista pendente Configurações de Soluções , selecione Depurar ou Versão.
Na lista pendente Plataformas de Soluções , selecione x86, x64 ou ARM64.
No Gerenciador de Soluções, clique com o botão direito do rato no projeto WebView2SampleWinComp e, em seguida, selecione Compilar.
Esta ação cria o ficheiro
SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxprojde projeto .Selecione Depurar>Iniciar Depuração (F5).
É aberta a janela da aplicação de exemplo:
No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha a aplicação.
Passo 7 – Atualizar os pacotes instalados
Essa etapa é opcional. O exemplo foi pré-instalado:
- Uma versão do SDK de pré-lançamento webView2.
- Uma versão das Bibliotecas de Implementação do Windows (WIL).
No Gerenciador de Soluções, clique com o botão direito do rato no projeto WebView2SampleWinComp (não no nó Solução) e, em seguida, selecione Gerir Pacotes NuGet. O separador Gestor de Pacotes NuGet é aberto.
Selecione a caixa de verificação Incluir pré-lançamento .
Clique no separador Instalado . Para cada pacote, tenha em atenção se existem duas versões listadas (a versão atual e um número de versão atualizado disponível).
Clique no separador Atualizações.
Se for apresentada uma pré-lançamento mais recente do SDK Microsoft.Web.WebView2 , pode, opcionalmente, clicar no botão Atualizar . Uma pré-lançamento tem um sufixo "-pré-lançamento", como 1.0.1248-pré-lançamento. Se quiser ver detalhes sobre este passo, numa janela ou separador separador, consulte Instalar ou atualizar o SDK WebView2 em Configurar o ambiente de Programador para WebView2. Siga os passos nessa secção e, em seguida, regresse a esta página e continue abaixo.
Se estiver listada uma versão mais recente das Bibliotecas de Implementação do Windows (WIL), pode, opcionalmente, clicar no botão Atualizar .
Siga as instruções para continuar a atualizar os pacotes.
Crie e execute novamente o projeto, agora com os pacotes atualizados.
Passo 8 – Inspecionar o código
No editor de código do Visual Studio, inspecione o código:
