Introdução ao WebView2 em aplicações WinUI 2 (UWP)

Este artigo é para aprender a escrever o seu próprio código WebView2. Se quiser executar primeiro um exemplo, veja Win32 sample app (Aplicação de exemplo Win32) ou outro artigo de aplicação de exemplo, como a aplicação de exemplo WinUI 2 (UWP).

Neste tutorial, irá:

• Configure as suas ferramentas de desenvolvimento para criar aplicações UWP que utilizam o WebView2 para apresentar conteúdo Web.
• Crie uma aplicação WinUI 2 (UWP) inicial.
• Instale o pacote Microsoft.UI.Xaml (WinUI 2) para o projeto.
• Adicione um controlo WebView2 que apresenta conteúdo de página Web.
• Saiba mais sobre os conceitos do WebView2 ao longo do percurso.

Utilize o modelo de projeto C# Blank App (Universal Windows) e, em seguida, instale o pacote Microsoft.UI.Xaml (WinUI 2) para este projeto. A instalação desse pacote instala o pacote Microsoft.Web.WebView2 (o SDK WebView2) como uma dependência.

O pacote Microsoft.UI.Xaml (WinUI 2) faz parte da Biblioteca de IU do Windows. Este pacote fornece funcionalidades de IU do Windows, incluindo:

• Controlos XAML UWP.
• Estilos de controlo densos.
• Estilos e materiais fluentes.

Plataformas

Este artigo aplica-se ao Windows e à Xbox.

O WinUI 2 suporta apenas UWP. Estes controlos são retrocompatíveis.

Veja também:

• Exemplos de Aplicação de Multimédia para Xbox

Projeto concluído

Uma versão concluída deste projeto Introdução (solução) está no repositório WebView2Samples. Pode utilizar a solução concluída (a partir do repositório ou a partir dos passos abaixo) como uma linha de base para adicionar mais código WebView2 e outras funcionalidades.

Está disponível uma versão completa deste projeto de tutorial no repositório WebView2Samples :

• Nome de exemplo: WinUI2_Sample
• Diretório de repositório: WinUI2_GettingStarted
• Ficheiro de solução: MyUWPGetStartApp.sln

Siga as secções passo principais em sequência, abaixo.

Sobre WinUI e WebView2

Nas aplicações WinUI 2 (UWP), o WebView2 é exposto como um controlo XAML. Depois de incorporar o controlo XAML na sua aplicação como um controlo com nome, pode então referir-se a esse controlo XAML nos ficheiros C#.

Apenas um subconjunto de interfaces/funções WebView2 é exposto no WinUI:

• O WebView2 objeto XAML expõe a CoreWebView2 interface, juntamente com a funcionalidade mais importante.

• As interfaces como CoreWebView2Controller estão ocultas, porque o WinUI trata do ambiente e da criação de janelas em segundo plano.

Veja também:

• Limitação de XAML no WebView2 em aplicações WinUI 2 (UWP).

Passo 1 – Instalar o Visual Studio

Este artigo mostra passos e capturas de ecrã para o Visual Studio 2022 Community Edition. É necessária a versão 16.9 ou posterior do Microsoft Visual Studio 2019. O Visual Studio 2017 não é suportado.

1. Se uma versão adequada do Microsoft Visual Studio ainda não estiver instalada, numa nova janela ou separador, consulte Instalar o Visual Studio em Configurar o ambiente de Programador para WebView2. Siga os passos nessa página para efetuar uma instalação predefinida básica do Visual Studio, como o Visual Studio 2022 Community Edition.

   Em seguida, regresse a esta página e continue abaixo.

2. Se o Visual Studio não mostrar números de linha no editor de código, poderá querer ativar os números de linha. Para tal, selecione Ferramentas Opções>>Texto Editor>Todos os Números de linha de idiomas>. Clique em OK.

Passo 2 – Instalar cargas de trabalho para o ambiente de trabalho .NET, ambiente de trabalho C++ e ferramentas de desenvolvimento UWP

1. Abra o Microsoft Visual Studio. É apresentada a janela de opção de abertura:

   

2. No canto inferior direito, clique em Continuar sem código. O Visual Studio é aberto, vazio:

   

3. Selecione Ferramentas>Obter Ferramentas e Funcionalidades. A janela Visual Studio Installer é aberta e, em seguida, a janela Modificar - Visual Studio é aberta sobre a mesma:

   

Se a janela Modificar o Visual Studio não estiver aberta, na janela Visual Studio Installer, clique no botão Modificar.

1. No separador Cargas de trabalho, desloque-se para e clique nos seguintes cartões, para selecioná-los; certifique-se de que existe uma marca de verificação em cada um destes cartões:

   • Desenvolvimento de ambiente de trabalho .NET
   • Desenvolvimento do ambiente de trabalho com C++
   • desenvolvimento de Plataforma Universal do Windows

2. À direita, na secção Detalhes da instalação, expanda Plataforma Universal do Windows desenvolvimento e, em seguida, selecione C++ (v143) Plataforma Universal do Windows ferramentas:

   

   Se todos estes componentes já tiverem sido instalados, clique no botão Fechar, feche a janela Visual Studio Installer e avance para a próxima secção principal dos passos abaixo.

3. Clique no botão Modificar .

   É apresentada uma janela Controlo de Conta de Utilizador a perguntar "Pretende permitir que esta aplicação faça alterações ao seu dispositivo? Visual Studio Installer. Publicador verificado: Microsoft Corporation. Origem do ficheiro: disco rígido neste computador. Mostrar mais detalhes (botão)".

4. Clique no botão Sim .

5. É apresentada uma caixa de diálogo "Antes de começarmos, feche o Visual Studio":

   

6. Clique no botão Continuar .

   O Visual Studio transfere, verifica e instala os pacotes selecionados:

   

   Esta captura de ecrã mostra Visual Studio Professional 2022, embora este artigo tenha sido atualizado com o Visual Studio Community 2022.

   A instalação pode demorar vários minutos. É apresentado o Visual Studio, com uma Gerenciador de Soluções vazia.

7. Prima Alt+Tecla de Tabulação para mudar para a janela Visual Studio Installer e, em seguida, feche a janela Visual Studio Installer.

Passo 3 – Criar uma aplicação UWP

1. Se o Visual Studio estiver aberto, selecione Ficheiro>Novo>Projeto. É aberta a caixa de diálogo Criar um novo projeto .

   Em alternativa, se o Visual Studio estiver fechado, abra-o e, em seguida, no ecrã de arranque do Visual Studio, clique no card Criar um novo projeto:

   

2. Na caixa de texto Procurar modelos na parte superior, introduza Aplicação em Branco C# (Universal Windows) e, em seguida, selecione a Aplicação em Branco C# (Universal Windows) card:

   

3. Clique no botão Seguinte .

   É apresentada a caixa de diálogo Configurar o novo projeto , para uma Aplicação em Branco (Universal Windows):

   

4. Na caixa de texto Nome do projeto, introduza um nome de projeto, como MyUWPGetStartApp.

5. Na caixa de texto Localização , introduza um caminho, como C:\Users\myusername\Documents\MyWebView2Projects.

6. Clique no botão Criar .

   É apresentada a caixa de diálogo Novo Projeto do Windows :

   

7. Aceite as predefinições e clique no botão OK .

8. Se a secção da janela Modo de Programador for apresentada, nessa secção, clique em Ativado. Se ainda não tiver definido o computador como Modo de Programador, é aberta a caixa de diálogo Utilizar funcionalidades de programador para confirmar a ativação do modo de programador.

   • Clique em Sim para ativar o Modo de Programador para o seu computador e, em seguida, feche a janela Definições .

   O Visual Studio apresenta a solução e o projeto recém-criados:

   

Passo 4 – Compilar e executar o projeto vazio

Antes de adicionar o código WebView2, confirme que o projeto funciona e veja o aspeto da aplicação vazia, da seguinte forma:

1. Crie e execute o projeto vazio. Para tal, selecione Depurar>Iniciar Depuração (F5). A janela da aplicação é aberta, apresenta temporariamente uma grelha e, em seguida, apresenta o conteúdo da aplicação:

   

   Esta é uma aplicação WinUI 2 (UWP) de linha de base, ainda sem WebView2.

2. Feche a aplicação.

Em seguida, configure este novo projeto WinUI 2 (UWP) para alojar o controlo WebView2 e utilizar a API WebView2.

Passo 5 – Instalar o SDK WinUI 2 (Microsoft.UI.Xaml)

Em seguida, instale o pacote Microsoft.UI.Xaml para este projeto. Microsoft.UI.Xaml é WinUI 2.

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

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

2. No Gestor de Pacotes NuGet, clique no separador Procurar .

3. Desmarque a caixa de marcar Incluir pré-lançamento.

4. Na caixa Procurar, introduza Microsoft.UI.Xaml e, em seguida, selecione a card Microsoft.UI.Xaml abaixo da caixa de pesquisa:

   

   Para a versão 2.8.0 ou posterior, na secção Dependências na parte inferior, Microsoft.Web.WebView2 está listado.

   Para HoloLens 2 desenvolvimento, o pacote Microsoft.Web.WebView2 tem de ser a versão 1.0.1722.45 ou superior, que pode ser superior à predefinição. O WebView2 no HoloLens 2 está em Pré-visualização e está sujeito a alterações antes da disponibilidade geral. O WebView2 só é suportado em dispositivos HoloLens 2 que executem a atualização Windows 11. Para obter mais informações, consulte Atualizar HoloLens 2.

5. No painel do meio, na lista pendente Versão , certifique-se de que a opção Mais recente estável está selecionada, versão 2.8.0 ou posterior.

6. Clique no botão Instalar .

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

   

7. Clique no botão OK .

8. É apresentada a caixa de diálogo Aceitação da Licença :

   

9. Clique no botão Aceito . No Visual Studio, o readme.txt ficheiro é apresentado, indicando que instalou o pacote WinUI:

   

   O readme lista algumas linhas de código semelhantes às que vamos adicionar.

10. SelecioneGuardar Todos os Ficheiros> (Ctrl+Shift+S).

Instalou agora o pacote Microsoft.UI.Xaml, que é WinUI 2, para o seu projeto. O SDK WinUI 2 (Microsoft.UI.Xaml) inclui o SDK WebView2, pelo que não precisa de instalar separadamente o pacote NuGet para o SDK WebView2.

Passo 6 – Instanciar o controlo WebView2 no código XAML

Agora, está pronto para adicionar código WebView2 ao projeto. Em primeiro lugar, adicione uma referência de espaço de nomes para o controlo WebView2, da seguinte forma:

1. No Gerenciador de Soluções, expanda o projeto e, em seguida, faça duplo clique em MainPage.xaml.

   MainPage.xaml é aberto num estruturador com um editor de código abaixo:

   

2. No editor de código, dentro <Page> da etiqueta <Pagede início do elemento , adicione o seguinte atributo, abaixo dos outros xmlns: atributos:

   xmlns:controls="using:Microsoft.UI.Xaml.Controls"
   

   Adicione um controlo WebView2 à grelha XAML, da seguinte forma:

3. MainPage.xaml No ficheiro, no <Grid> elemento (que ainda não contém outros elementos), adicione um controlo WebView2 ao adicionar o seguinte elemento:

   <controls:WebView2 x:Name="WebView2" Source="https://bing.com"/>
   

4. Prima Ctrl+S para guardar o ficheiro.

   Acima do MainPage.xaml ficheiro no editor de código, pode ser apresentada uma pré-visualização do conteúdo do controlo WebView2 ou pode permanecer em branco (branco) até criar a aplicação pela primeira vez:

   

   O sublinhado ondulado desaparece depois de criar e executar a aplicação, no passo seguinte.

Passo 7 – Criar e executar o projeto que contém o controlo WebView2

1. Clique em Depurar>Iniciar Depuração (F5). (Se criar para HoloLens 2, consulte Utilizar o Visual Studio para implementar e depurar). A janela da aplicação é aberta e mostra brevemente a grelha WebView2 WebUI:

   

2. Após um momento, a janela da aplicação mostra o site do Bing no controlo WebView2 para WebUI 2:

   

3. No Visual Studio, selecione Depurar>Parar Depuração para fechar a janela da aplicação.

Parabéns, criou a sua primeira aplicação WebView2!

Agora, pode alterar o conteúdo do controlo WebView2 para adicionar o seu próprio conteúdo.

Saiba mais sobre eventos de navegação

Em seguida, saiba mais sobre os eventos de navegação, que são essenciais para aplicações WebView2. Inicialmente, a aplicação navega para https://bing.com.

• Numa nova janela ou separador, leia Eventos de navegação para aplicações WebView2 e, em seguida, regresse a esta página.

Confira também

• WebView2 em aplicações WinUI 2 (UWP)
• Referência da API webView2
• Melhores práticas de desenvolvimento para aplicações WebView2
  • Gerir pastas de dados do utilizador
• Aplicações de exemplo webView2 – um guia para o WebView2Samples repositório.
  • Aplicação de exemplo WinUI 2 (UWP) – passos para transferir, atualizar, compilar e executar o exemplo WinUI 2 WebView2.
• Projeto concluído do tutorial Introdução: ao contrário de alguns dos outros tutoriais, não existe uma versão completa deste Introdução tutorial no repositório WebView2Samples.

GitHub:

• Repositório WebView2Samples
• WebView2 UWP Sample App - o exemplo WinUI 2 (UWP) WebView2.
• Problemas – repositório microsoft-ui-xaml – para introduzir erros ou pedidos de funcionalidade específicos do WinUI.
• Exemplos de Aplicação de Multimédia para Xbox

NuGet:

• Pacote NuGet Microsoft.UI.Xaml