Configurar seu ambiente de Desenvolvimento para WebView2

Este artigo aborda a configuração de uso geral do seu ambiente de desenvolvimento para desenvolvimento WebView2. Alguns tutoriais de Introdução apontam aqui para as etapas de configuração preliminares e, em seguida, adicione etapas de configuração específicas da plataforma ou do projeto.

Instalar o Visual Studio

Instale o Visual Studio 2015 ou posterior, como o Visual Studio Professional 2019 ou o Visual Studio 2022 Community Edition. A maioria dos exemplos do WebView2 foi criada e testada usando o Visual Studio 2019. Se uma amostra foi criada usando o Visual Studio 2019, você deve compilar e executar a amostra no Visual Studio 2019, antes de usar a amostra no Visual Studio 2022.

Os exemplos do WebView2 são projetados para o Microsoft Visual Studio, não para o Microsoft Visual Studio Visual Studio Code.

Se você estiver instalando o Visual Studio, poderá aceitar os padrões por enquanto; você pode clicar em Instalar e, em seguida, recusar a instalação das cargas de trabalho no momento. O Visual Studio solicitará mais tarde, quando você abrir um arquivo específico .sln , para instalar as cargas de trabalho apropriadas à plataforma.

Instalar um canal de visualização do Microsoft Edge

Instale qualquer canal de visualização do Microsoft Edge (Beta, Dev ou Canary) em um sistema operacional compatível:

Windows 10
Windows 11

Para baixar um canal de visualização do Microsoft Edge (Beta, Dev ou Canary), acesse Torne-se um Microsoft Edge Insider.

Recomendamos usar o canal Canary. A versão mínima necessária é 82.0.488.0.

Os canais de visualização do Microsoft Edge são necessários para usar uma versão de pré-lançamento do SDK do WebView2. Um SDK de pré-lançamento permite testar seu aplicativo em relação às APIs mais recentes e testar as APIs mais recentes.

Baixar o repositório WebView2Samples

Há dois repositórios contendo exemplos de WebView2:

Você pode baixar um repositório como um .zip arquivo ou clonar o repositório.

Se você baixar o repositório (como um .zip arquivo), receberá uma cópia do snapshot do repositório. Em seguida, você pode baixar outra cópia atualizada do repositório posteriormente.
Se você clonar o repositório, poderá atualizar sua cópia local usando comandos git ou recursos de vários aplicativos de desenvolvimento.

Para baixar o repositório (como um .zip arquivo):

Abra o repositório WebView2Samples (ou o repositório WebView2Browser) em uma nova janela ou guia.
Clique no botão Código verde no canto superior direito do repositório do GitHub e clique em Baixar ZIP.

O pop-up de Download é exibido no Microsoft Edge:

No Microsoft Edge, se o pop-up Download não estiver visível, clique em Configurações e mais (...) e clique em Downloads.
Na janela pop-up Downloads , passe o mouse à direita e WebView2Samples-main.zip clique no ícone Mostrar na pasta (pasta).

Recomenda-se que você não clique no link Abrir arquivo , pois isso descompacta imediatamente o arquivo na área de Downloads, o que pode dificultar (e ficar mais lento) a movimentação para o local desejado.
Copie ou recorte o WebView2Samples-main.zip arquivo do diretório Downloads para um diretório normal, como Documents.
Descompacte o WebView2Samples-main.zip arquivo e observe o local dos arquivos descompactados.
Estude a quebra dos diretórios principais.

-mainé o nome do branch do repositório que esse diretório baixado snapshot representa. É possível alternar para um branch diferente no GitHub e, em seguida, baixar, por exemplo, WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zip. Nesse caso, o arquivo baixado .zip é um snapshot do smoketest-1.0.1054.27-prerelease-testing branch do repositório. Esta documentação pressupõe que você baixou o main branch do repositório.
Recomendado: renomeie o diretório raiz de WebView2Samples-main para WebView2Samples, para corresponder ao nome e ao caminho do repositório.

Clonar o repositório WebView2Samples

Você pode baixar o repositório como um .zip arquivo ou clonar o repositório.

Se você baixar o repositório (como um .zip arquivo), receberá uma cópia do snapshot do repositório. Em seguida, você pode baixar outra cópia atualizada do repositório posteriormente.
Se você clonar o repositório, poderá atualizar sua cópia local usando comandos git ou recursos de vários aplicativos de desenvolvimento.

Para clonar o repositório (ou o repositório), você deve primeiro instalar o WebView2SamplesWebView2Browser git. Você pode baixar o repositório, conforme descrito acima, ou cloná-lo.

Instalar o git

Se você quiser clonar o repositório (em vez de baixá-lo) e se o git ainda não estiver instalado, baixe o WebView2Samplesgit e instale-o.

Obter a URL para clonar o repositório WebView2Samples

Abra o repositório WebView2Samples em uma nova janela ou guia.
Clique no botão Código verde no canto superior direito do repositório do GitHub, selecione Clonar e, em seguida, clique no ícone Copiar (ou selecione a cadeia de caracteres da URL HTTPS na caixa de texto e copie-a).
Decida qual ferramenta você deseja usar para clonar localmente o repositório:
- Visual Studio
- GitHub Desktop
- Git, Bash, shell ou prompt de comando

Em seguida, clone o repositório GitHub em sua unidade local. Para fazer isso, siga as etapas apropriadas abaixo, para a ferramenta que você deseja usar.

Clonar o repositório usando o Visual Studio

Se você quiser usar o Visual Studio para clonar o repositório GitHub em sua unidade local:

No Visual Studio , selecione>Arquivo Clonar repositório.
Insira a URL que você copiou do repositório do GitHub.
Na mesma caixa de diálogo ou em um utilitário do explorador de arquivos, você pode criar uma raiz git ou GitHub pasta de uso geral em um local gravável e, em seguida, selecionar esse diretório, para que o repositório seja clonado lá, como um novo diretório.

Por exemplo, você pode criar o repositório na pasta pai: C:\Users\myUserName\Documents\GitHub\, para que a operação de clonagem crie o novo diretório C:\Users\myUserName\Documents\GitHub\WebView2Samples.

Você clonou o repositório para sua unidade local. Pule para a próxima seção principal abaixo.

Clonar o repositório usando o GitHub Desktop

Se você quiser usar o GitHub Desktop para clonar o repositório GitHub em sua unidade local:

Instale o GitHub Desktop.
No GitHub Desktop, selecioneRepositório de clonagemde arquivo>.
No Visual Studio ou GitHub Desktop, insira a URL que você copiou do repositório do GitHub.
Na mesma caixa de diálogo ou em um utilitário do explorador de arquivos, você pode criar uma raiz git ou GitHub pasta de uso geral em um local gravável e, em seguida, selecionar esse diretório, para que o repositório seja clonado lá, como um novo diretório.

Por exemplo, você pode criar o repositório na pasta pai: C:\Users\myUserName\Documents\GitHub\, para que a operação de clonagem crie o novo diretório C:\Users\myUserName\Documents\GitHub\WebView2Samples.

Você clonou o repositório para sua unidade local. Pule para a próxima seção principal abaixo.

Clonando o repositório usando o shell Git Bash ou um prompt de comando

Se, em vez disso, você quiser clonar o repositório usando um shell Git Bash ou prompt de comando:

Clone o repositório em sua unidade local, inserindo a cadeia de caracteres da URL que você copiou do repositório do GitHub:
```
# example location where the repo directory will be added:
cd c:/users/myusername/documents/github/
git clone https://github.com/MicrosoftEdge/WebView2Samples.git
```
O diretório é criado em sua unidade local, no caminho especificado, como na figura a seguir:

Você clonou o repositório para sua unidade local.

Veja também:

Clonar um repositório – GitHub docs.
Clone o repositório "MicrosoftEdge / Demos" para sua unidade em Código de exemplo para DevTools.
Etapa 6: configurar um servidor localhost em Instalando a extensão DevTools para Visual Studio Code.

Abrir um arquivo de .sln WebView2Samples no Visual Studio

Depois de clonar ou baixar o WebView2Samples repositório, abra um .sln arquivo no Visual Studio.

Em sua cópia local da estrutura de diretório do repositório, localize um .sln arquivo. O arquivo README de nível superior no repositório WebView2Samples fornece uma visão geral semelhante.
Abra um .sln arquivo no Visual Studio. Por exemplo, abra sua cópia local do WebView2Samples.sln. Os arquivos de solução deste repositório exigem Visual Studio, não Visual Studio Code.
Abra um dos .sln arquivos. Por exemplo, abra sua cópia local do arquivo principal da solução Win32 WebView2Samples/SampleApps/WebView2Samples.sln (baixado como caminho WebView2Samples-main/SampleApps/WebView2Samples.sln) no Microsoft Visual Studio. Quando você abre esse arquivo de solução no Visual Studio, o Gerenciador de Soluções contém os seguintes projetos:

Para configuração geral inicial do ambiente de desenvolvimento, você pode abrir qualquer tipo de .sln arquivo do WebView2Samples repositório:

Um arquivo específico .sln da plataforma em um subdiretório do GettingStartedGuides diretório. Eles correspondem aos tutoriais de Introdução e são exemplos concluídos que demonstram alguns recursos da API.
O arquivo Win32 .sln que contém vários projetos de SampleApps plataforma, no diretório. Esta é uma demonstração abrangente da API.
Um arquivo específico .sln da plataforma em um subdiretório do SampleApps diretório. Essas são demonstrações abrangentes da API.

Instalar cargas de trabalho do Visual Studio

Instale cargas de trabalho do Visual Studio, se solicitado. Ao abrir um .sln arquivo do repositório clonado ou baixado WebView2Samples no Microsoft Visual Studio 2019 ou 2022, você poderá ver uma caixa de diálogo "não é possível abrir".

Clique no botão OK . Em seguida, você poderá ver um instalador de carga de trabalho, como:

.
Marque a caixa de seleção e clique no botão Instalar .

O instalador do Visual Studio é executado, para a carga de trabalho da plataforma:

.

Uma página de arquivo de log do Relatório de Migração pode ser aberta, como em file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm:

Para ampliar, clique com o botão direito do mouse >em Abrir imagem em uma nova guia.

Acima, o sufixo do -main diretório está presente para o arquivo baixado .zip do repositório, não se você clonou o repositório.

O Visual Studio abre o arquivo selecionado .sln no Gerenciador de Soluções:

Instalar ou atualizar o SDK do WebView2

O SDK do WebView2 inclui o controle WebView2, que é da plataforma Microsoft Edge e permite que você insira tecnologias da Web (HTML, CSS e JavaScript) nos seus aplicativos nativos.

Você instala o SDK do WebView2 uma vez por nó de projeto de cada .sln arquivo. A instalação do SDK do WebView2 se aplica somente ao projeto em que ele está instalado.

Em vez de baixar o Microsoft.Web.WebView2 pacote NuGet do SDK do nuget.org, você instala o pacote NuGet do SDK do WebView2 por meio do painel Gerenciador de Pacotes NuGet no Visual Studio. Depois de clonar ou baixar o repositório WebView2Samples, abra um dos arquivos do repositório no Visual Studio e clique com o botão direito do .sln mouse em um nó do projeto dentro da solução. Use o painel Gerenciador de Pacotes NuGet para instalar o Microsoft.Web.WebView2 SDK como um pacote NuGet.

O Microsoft.Web.WebView2 SDK está disponível nas versões de lançamento e pré-lançamento. Para começar, uma versão de lançamento é recomendada.

Instale ou atualize o SDK do WebView2 de lançamento ou pré-lançamento, da seguinte maneira:

Abra um .sln arquivo no Visual Studio. Por exemplo, abra sua cópia local do WebView2Samples.sln. Os arquivos de solução deste repositório exigem Visual Studio, não Visual Studio Code.
No Gerenciador de Soluções, clique com o botão direito do mouse nos nós de projeto da solução, como o nó do projeto WebView2GettingStarted (não o nó da solução) e selecione Gerenciar Pacotes NuGet .

A imagem a seguir mostra um arquivo e um projeto de .sln específico; use qualquer projeto para o qual você deseja instalar o SDK:

A guia Gerenciador de Pacotes NuGet é aberta no Visual Studio.
Na janela do NuGet , clique na guia Procurar .
À direita da barra de pesquisa, desmarque a caixa de seleção Incluir pré-lançamento ou defina-a se quiser uma versão de pré-lançamento do SDK, que inclui APIs experimentais.
Na barra de pesquisa no canto superior esquerdo, digite Microsoft.Web.WebView2.
Abaixo da barra de pesquisa, clique no card Microsoft.Web.WebView2.
No painel direito, clique no botão Instalar (ou Atualizar). O NuGet baixa o SDK do WebView2 para seu computador, para uso neste projeto.

Para ampliar, clique com o botão direito do mouse >em Abrir imagem em uma nova guia.
Feche a guia Gerenciador de Pacotes NuGet .

O SDK do WebView2 agora está instalado, portanto, seu ambiente de desenvolvimento agora está configurado para adicionar recursos do WebView2 aos aplicativos WebView2.