Aplicativo de exemplo do WinUI 2 (UWP)

Este exemplo de WebView2 demonstra como usar o controle WebView2 e as APIs WebView2 para implementar um navegador da Web em um aplicativo WinUI 2 (UWP).

• Nome da amostra: webview2_sample_uwp
• Diretório de repositório: webview2_sample_uwp
• Arquivo da 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 do Microsoft.Web.WebView2 como uma dependência.

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

Consulte também arquivo README para webview2_sample_uwp.

Etapa 1 – Instalar o Visual Studio

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

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.

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 no Visual Studio

1. Na unidade local, abra o .sln arquivo 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

Etapa 4 - Instalar cargas de trabalho, se solicitado

1. 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 5 - Compilar e executar o projeto usando pacotes pré-instalados

Gerenciador de Soluções mostra o webview2_sample_uwp projeto:

Compile e execute o projeto usando as versões dos pacotes NuGet que foram instalados no exemplo do repositório:

1. Na lista suspensa Configurações da solução , selecione uma configuração, como Depurar.

2. Na lista suspensa Plataformas de Solução , selecione uma plataforma, como x64.

   

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

   O projeto é compilado.

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

   Uma janela de grade vazia aparece inicialmente por um momento:

   

   A janela do aplicativo de exemplo exibe o conteúdo da página da Web:

   

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

Em seguida, atualize os pacotes NuGet para o projeto, conforme as seções a seguir.

Etapa 6 – Atualizar os pacotes NuGet

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

Atualize os pacotes NuGet do projeto:

1. No Visual Studio, no Gerenciador de Soluções, clique com o botão direito do mouse no projeto webview2_sample_uwp (não no nó de solução acima dele) e selecione Gerenciar Pacotes NuGet.

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

2. No Gerenciador de Pacotes NuGet, clique na guia Instalado .

3. Marque a caixa de marcação Incluir pré-lançamento.

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

4. No Gerenciador de Pacotes NuGet, clique na guia Atualizações.

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

6. Na caixa de texto Versão , verifique se o Pré-lançamento mais recente está selecionado.

7. Clique no botão Atualizar à direita:

   

   Depois de obter os pacotes mais recentes, o que pode levar alguns minutos, a caixa de diálogo Visualizar Alterações é aberta. Microsoft.Web.WebView2 (o SDK do WebView2) é listado separadamente na caixa de diálogo Visualizar Alterações :

   

8. Clique no botão OK .

9. A caixa de diálogo Aceitação de licença é exibida:

   

10. Clique no botão Aceito . No Visual Studio, o readme.txt arquivo é exibido informando que você instalou o pacote WinUI:

    

    O Leiame lista algumas linhas de código que são semelhantes ao que adicionaremos.

11. Atualize o pacote NuGet Microsoft.NETCore.UniversalWindowsPlatform usando etapas semelhantes.

    Depois de obter os pacotes UWP mais recentes, o que pode levar alguns minutos, a caixa de diálogo Visualizar Alterações é exibida:

    

12. Selecione Arquivo>Salvar Tudo.

    Agora você instalou o pacote Microsoft.UI.Xaml, que é o WinUI (WinUI 2), para seu projeto. Verifique os pacotes instalados resultantes, da seguinte maneira:

13. No Gerenciador de Pacotes NuGet, clique na guia Instalado e inspecione os pacotes atualizados:

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

    

14. Feche a janela do Gerenciador de Pacotes NuGet .

Etapa 7 – Compilar e executar o projeto com pacotes atualizados

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

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

   O projeto é compilado.

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

   Uma janela de grade vazia aparece inicialmente por um momento:

   

   A janela do aplicativo de exemplo exibe o conteúdo da página da Web:

   

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

Etapa 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 aplicativos WinUI 2 (UWP)