Configurar o ambiente Dev para WebView2

Este artigo aborda a configuração para fins gerais do seu ambiente de desenvolvimento para desenvolvimento webView2. Alguns Introdução tutoriais apontam para os passos de configuração preliminares e, em seguida, adicionam passos de configuração específicos da plataforma ou específicos do projeto.

Instalar o Visual Studio

1. 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 foram criados e testados com o Visual Studio 2019. Se um exemplo tiver sido criado com o Visual Studio 2019, deve criar e executar o exemplo no Visual Studio 2019 antes de utilizar o exemplo no Visual Studio 2022.

   Os exemplos do WebView2 foram concebidos para o Microsoft Visual Studio e não para o Microsoft Visual Studio Code.

   Se estiver a instalar o Visual Studio, pode aceitar as predefinições por agora; pode clicar em Instalar e, em seguida, recusar a instalação das Cargas de Trabalho neste momento. O Visual Studio irá pedir-lhe mais tarde, quando abrir um ficheiro específico .sln , para instalar as cargas de trabalho adequadas à plataforma.

Instalar um canal de pré-visualização do Microsoft Edge

Instale qualquer canal de pré-visualização do Microsoft Edge (Beta, Dev ou Canary) num sistema operativo suportado:

• Windows 10
• Windows 11

Para transferir um canal de pré-visualização do Microsoft Edge (Beta, Dev ou Canary), aceda a Tornar-se um Microsoft Edge Insider.

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

Os canais de pré-visualização do Microsoft Edge são necessários para utilizar uma versão de pré-lançamento do SDK WebView2. Um SDK de pré-lançamento permite testar a sua aplicação com as APIs mais recentes e experimentar as APIs mais recentes.

Transferir o repositório WebView2Samples

Existem dois repositórios que contêm exemplos do WebView2:

• Repositório WebView2Samples
• Repositório WebView2Browser

Pode transferir um repositório como um .zip ficheiro ou clonar o repositório.

• Se transferir o repositório (como um .zip ficheiro), receberá uma cópia snapshot do repositório. Em seguida, pode transferir outra cópia atualizada do repositório mais tarde.

• Se clonar o repositório, pode atualizar a cópia local com comandos git ou funcionalidades de várias aplicações Dev.

Para transferir o repositório (como um .zip ficheiro):

1. Abra o repositório WebView2Samples (ou o repositório WebView2Browser) numa nova janela ou separador.

2. Clique no botão verde Código no canto superior direito do repositório do GitHub e, em seguida, clique em Transferir ZIP.

   

   O pop-up Transferir é apresentado no Microsoft Edge:

   

   No Microsoft Edge, se o pop-up Transferir não estiver visível, clique em Definições e muito mais (...) e, em seguida, clique em Transferências.

3. Na janela de pop-up Transferências , paire o cursor do rato à direita de WebView2Samples-main.zip e, em seguida, clique no ícone Mostrar na pasta (pasta).

   Recomenda-se que não clique na ligação Abrir ficheiro , uma vez que este deszipa imediatamente o ficheiro na sua área Transferências, o que pode dificultar (e tornar mais lento) a mudança para a localização pretendida.

4. Copie ou corte o WebView2Samples-main.zip ficheiro do diretório Transferências para um diretório normal, como Documents.

5. Deszipe o WebView2Samples-main.zip ficheiro e anote a localização dos ficheiros deszipados.

   

6. Estudar a fuga dos principais diretórios.

   -mainé o nome do ramo de repositório que este snapshot de diretório transferido representa. É possível mudar para um ramo diferente no GitHub e, em seguida, transferir, por exemplo, WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zip. Nesse caso, o ficheiro transferido .zip é um snapshot do smoketest-1.0.1054.27-prerelease-testing ramo do repositório. Esta documentação pressupõe que transferiu o main ramo do repositório.

7. Recomendado: mude o nome do diretório de raiz de WebView2Samples-main para WebView2Samples, para corresponder ao nome e caminho do repositório.

Clonar o repositório WebView2Samples

Pode transferir o repositório como um .zip ficheiro ou clonar o repositório.

• Se transferir o repositório (como um .zip ficheiro), receberá uma cópia snapshot do repositório. Em seguida, pode transferir outra cópia atualizada do repositório mais tarde.

• Se clonar o repositório, pode atualizar a cópia local com comandos git ou funcionalidades de várias aplicações Dev.

Para clonar o WebView2Samples repositório (ou o repositório), primeiro tem de instalar o WebView2Browser git. Pode transferir o repositório, conforme descrito acima, ou cloná-lo.

Instalar o git

1. Se quiser clonar o repositório (em vez de o transferir) e se o git ainda não estiver instalado, transfira o WebView2Samples git e instale-o.

Obter o URL para clonar o repositório WebView2Samples

1. Abra o repositório WebView2Samples numa nova janela ou separador.

2. Clique no botão verde Código no canto superior direito do repositório do GitHub, selecione Clonar e, em seguida, clique no ícone Copiar (ou, selecione a cadeia de URL HTTPS na caixa de texto e copie-a).

   

3. Decida que ferramenta pretende utilizar para clonar localmente o repositório:

   • Visual Studio
   • GitHub Desktop
   • Shell do Git Bash ou linha de comandos

Em seguida, clone o repositório do GitHub para a unidade local. Para tal, siga os passos adequados abaixo para a ferramenta que pretende utilizar.

Clonar o repositório com o Visual Studio

Se quiser utilizar o Visual Studio para clonar o repositório do GitHub para a unidade local:

1. No Visual Studio, selecioneRepositório de Clonagem de Ficheiros>.

2. Introduza o URL que copiou do repositório do GitHub.

3. A partir da mesma caixa de diálogo, ou num utilitário do explorador de ficheiros, pode criar uma raiz git ou GitHub pasta para fins gerais numa localização gravável e, em seguida, selecionar esse diretório, para que o repositório seja clonado lá, como um novo diretório.

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

Clonou o repositório para a unidade local. Avance para a próxima secção principal abaixo.

Clonar o repositório com o GitHub Desktop

Se quiser utilizar o GitHub Desktop para clonar o repositório do GitHub para a unidade local:

1. Instale o GitHub Desktop.

2. No GitHub Desktop, selecioneRepositório de Clonagem de Ficheiros>.

3. No Visual Studio ou no GitHub Desktop, introduza o URL que copiou do repositório do GitHub.

4. A partir da mesma caixa de diálogo, ou num utilitário do explorador de ficheiros, pode criar uma raiz git ou GitHub pasta para fins gerais numa localização gravável e, em seguida, selecionar esse diretório, para que o repositório seja clonado lá, como um novo diretório.

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

Clonou o repositório para a unidade local. Avance para a próxima secção principal abaixo.

Clonar o repositório com a shell do Git Bash ou uma linha de comandos

Se quiser clonar o repositório com uma shell do Git Bash ou uma linha de comandos:

1. Clone o repositório para a unidade local, introduzindo a cadeia de URL que 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 na unidade local, no caminho que especificou, tal como na figura seguinte:

   

   Clonou o repositório para a unidade local.

Veja também:

• Clonar um repositório – documentos do GitHub.

• Clone o repositório de Demonstrações do Edge para a unidade em Código de exemplo para DevTools.

• Passo 6: configurar um servidor localhost na instalação da extensão DevTools para Visual Studio Code.

Abrir um ficheiro webView2Samples .sln no Visual Studio

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

1. Na cópia local da estrutura do diretório do repositório, localize um .sln ficheiro. O ficheiro README de nível superior no repositório WebView2Samples fornece uma descrição geral semelhante.

2. Abra um .sln ficheiro no Visual Studio. Por exemplo, abra a cópia local do WebView2Samples.sln. Os ficheiros de solução deste repositório requerem o Visual Studio e não Visual Studio Code.

3. Abra um dos .sln ficheiros. Por exemplo, abra a cópia local do ficheiro de solução win32 principal WebView2Samples/SampleApps/WebView2Samples.sln (transferido como caminho WebView2Samples-main/SampleApps/WebView2Samples.sln) no Microsoft Visual Studio. Quando abre esse ficheiro de solução no Visual Studio, Gerenciador de Soluções contém os seguintes projetos:

   

Para a configuração geral do ambiente Dev inicial, pode abrir qualquer tipo de .sln ficheiro a WebView2Samples partir do repositório:

• Um ficheiro específico .sln da plataforma num subdiretório do GettingStartedGuides diretório. Estes correspondem aos tutoriais Introdução e são exemplos completos que demonstram algumas funcionalidades da API.

• O ficheiro Win32 .sln que contém vários projetos de plataforma, no SampleApps diretório . Esta é uma demonstração de API abrangente.

• Um ficheiro específico .sln da plataforma num subdiretório do SampleApps diretório. Estas são demonstrações de API abrangentes.

Instalar cargas de trabalho do Visual Studio

Instale as cargas de trabalho do Visual Studio, se lhe for pedido. Quando abre um .sln ficheiro a partir do repositório clonado ou transferido WebView2Samples no Microsoft Visual Studio 2019 ou 2022, poderá ver uma caixa de diálogo "não é possível abrir".

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

   .

2. Selecione a caixa de verificação e, em seguida, clique no botão Instalar .

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

   .

   Pode ser aberta uma página de ficheiro de registo do Relatório de Migração, tal como em file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm:

   

   Para ampliar, clique com o botão direito do rato em >Abrir imagem num novo separador.

   Acima, o -main sufixo do diretório está presente para o ficheiro transferido .zip do repositório e não se clonou o repositório.

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

   

Instalar ou atualizar o SDK WebView2

O SDK WebView2 inclui o controlo WebView2, que é alimentado pelo Microsoft Edge, e permite-lhe incorporar tecnologias Web (HTML, CSS e JavaScript) nas suas aplicações nativas.

Instala o SDK WebView2 uma vez por nó de projeto de cada .sln ficheiro. A instalação do SDK WebView2 aplica-se apenas ao projeto no qual está instalado.

Em vez de transferir o Microsoft.Web.WebView2 pacote NuGet do SDK a partir de nuget.org, instale o pacote NuGet do SDK WebView2 através do painel Gestor de Pacotes NuGet no Visual Studio. Depois de clonar ou transferir o repositório WebView2Samples, abra um dos ficheiros do .sln repositório no Visual Studio e clique com o botão direito do rato num nó de projeto na solução. Utilize o painel Gestor de Pacotes NuGet para instalar o Microsoft.Web.WebView2 SDK como um pacote NuGet.

O Microsoft.Web.WebView2 SDK está disponível em Versões de Lançamento e Pré-lançamento. Para começar, recomenda-se uma Versão de versão.

Instale ou atualize o SDK WebView2 de Versão ou Pré-lançamento, da seguinte forma:

1. Abra um .sln ficheiro no Visual Studio. Por exemplo, abra a cópia local do WebView2Samples.sln. Os ficheiros de solução deste repositório requerem o Visual Studio e não Visual Studio Code.

2. No Gerenciador de Soluções, clique com o botão direito do rato nos nós de projeto da solução, como o nó de projeto WebView2GettingStarted (não o nó da solução) e, em seguida, selecione Gerir Pacotes NuGet.

   A imagem seguinte mostra um ficheiro e projeto de .sln específicos; utilize o projeto para o qual pretende instalar o SDK:

   

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

3. Na janela NuGet , clique no separador Procurar .

4. À direita da barra de pesquisa, desmarque a caixa de verificação Incluir pré-lançamento ou defina-a se quiser uma versão de pré-lançamento do SDK, que inclui APIs experimentais.

5. Na barra de pesquisa no canto superior esquerdo, escreva Microsoft.Web.WebView2.

6. Abaixo da barra de pesquisa, clique no card Microsoft.Web.WebView2.

7. No painel direito, clique no botão Instalar (ou Atualizar). O NuGet transfere o SDK WebView2 para o seu computador, para utilização por este projeto.

   

   Para ampliar, clique com o botão direito do rato em >Abrir imagem num novo separador.

8. Feche o separador Gestor de Pacotes NuGet .

O SDK WebView2 está agora instalado, pelo que o seu ambiente de desenvolvimento está agora configurado para adicionar funcionalidades webView2 a aplicações WebView2.

Veja também:

• > SDK Microsoft.Web.WebView2 do NuGet.org

Atualizar o Runtime webView2

Para atualizar o WebView2 Runtime no seu computador de desenvolvimento e em computadores de utilizador, consulte Distribuir a sua aplicação e o WebView2 Runtime.

Confira também

• Clonar um repositório – documentos do GitHub.
• Clone o repositório de Demonstrações do Edge para a unidade em Código de exemplo para DevTools.
• Passo 6: configurar um servidor localhost na instalação da extensão DevTools para Visual Studio Code.