Aplicação de exemplo WinUI 2 (UWP)

Este exemplo de WebView2 demonstra como utilizar o controlo WebView2 e as APIs WebView2 para implementar um browser numa aplicação WinUI 2 (UWP).

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

Pacotes NuGet instalados

Este exemplo inclui os seguintes pacotes NuGet:

• Microsoft.NETCore.UniversalWindowsPlatform
• Microsoft.UI.Xaml – Pré-lançamento – inclui o SDK Microsoft.Web.WebView2 como dependência.

Para demonstrar as funcionalidades mais recentes, este exemplo no repositório WebView2Samples está configurado para utilizar uma versão de pré-lançamento do SDK WinUI 2 (listada como Microsoft.UI.Xaml no Gestor de Pacotes NuGet), em vez de uma versão Estável. O SDK WinUI 2 inclui uma versão compatível do SDK WebView2, como uma dependência do Microsoft.UI.Xaml.

Veja também o ficheiro README para obter webview2_sample_uwp.

Passo 1 – Instalar o Visual Studio

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

1. 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.

Passo 2 – Clonar ou transferir o repositório WebView2Samples

1. Se ainda não tiver terminado, clone ou transfira o WebView2Samples repositó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 no Visual Studio

1. Na unidade local, abra o .sln ficheiro no Visual Studio, no diretório :

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

   ou:

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

Passo 4 – Instalar cargas de trabalho, se lhe for pedido

1. 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 5 – Criar e executar o projeto com pacotes pré-instalados

Gerenciador de Soluções mostra o projeto webview2_sample_uwp:

Crie e execute o projeto com as versões dos pacotes NuGet que foram instalados no exemplo a partir do repositório:

1. Na lista pendente Configurações de Soluções , selecione uma configuração, como Depurar.

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

   

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

   O projeto é compilar.

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

   Inicialmente, é apresentada uma janela de grelha vazia por um momento:

   

   Em seguida, a janela da aplicação de exemplo apresenta o conteúdo da página Web:

   

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

Em seguida, atualize os pacotes NuGet para o projeto, de acordo com as secções seguintes.

Passo 6 – Atualizar os pacotes NuGet

Neste passo, iremos atualizar os pacotes NuGet do projeto para obter a versão de pré-lançamento mais recente do SDK WinUI 2. O SDK WinUI 2 inclui uma versão de pré-lançamento ou versão compatível do SDK WebView2.

Atualize os pacotes NuGet do projeto:

1. No Visual Studio, no Gerenciador de Soluções, clique com o botão direito do rato no projeto webview2_sample_uwp (não no nó de solução acima) 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 Instalado .

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

   Está listada uma versão de pré-lançamento do pacote Microsoft.UI.Xaml , que indica o SDK WinUI 2. O pacote Microsoft.UI.Xaml inclui o SDK WebView2; Microsoft.Web.WebView2 está listado na secção Dependências do pacote Microsoft.UI.Xaml . Atualizar o pacote Microsoft.UI.Xaml também causará uma atualização para o SDK WebView2 compatível.

4. No Gestor de Pacotes NuGet, clique no separador Atualizações.

5. Clique no card Microsoft.UI.Xaml à esquerda.

6. Na caixa de texto Versão , certifique-se de que a opção Pré-lançamento mais recente está selecionada.

7. Clique no botão Atualizar à direita:

   

   Depois de obter os pacotes mais recentes, que podem demorar alguns minutos, é aberta a caixa de diálogo Pré-visualizar Alterações . Microsoft.Web.WebView2 (o SDK WebView2) está listado separadamente na caixa de diálogo Pré-visualizar Alterações :

   

8. Clique no botão OK .

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

   

10. 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.

11. Atualize o pacote NuGet Microsoft.NETCore.UniversalWindowsPlatform com passos semelhantes.

    Depois de obter os pacotes UWP mais recentes, que podem demorar alguns minutos, é apresentada a caixa de diálogo Pré-visualizar Alterações :

    

12. Selecione Ficheiro>Guardar Tudo.

    Instalou agora o pacote Microsoft.UI.Xaml, que é WinUI (WinUI 2), para o seu projeto. Verifique os pacotes instalados resultantes, da seguinte forma:

13. No Gestor de Pacotes NuGet, clique no separador Instalado e inspecione os pacotes atualizados:

    • Microsoft.NETCore.UniversalWindowsPlatform
    • Microsoft.UI.Xaml – Pré-lançamento

    

14. Feche a janela Gestor de Pacotes NuGet .

Passo 7 – Criar e executar o projeto com pacotes atualizados

Agora que os pacotes NuGet foram atualizados, crie e execute novamente o projeto:

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

   O projeto é compilar.

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

   Inicialmente, é apresentada uma janela de grelha vazia por um momento:

   

   Em seguida, a janela da aplicação de exemplo apresenta o conteúdo da página Web:

   

3. No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha a aplicação.

Passo 10 – Inspecionar o código

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

   

Confira também

• Referência da API webView2
• Introdução ao WebView2 em aplicações WinUI 2 (UWP)