Instalador do Visual Studio de Implementação do WebView2

Este exemplo, WV2DeploymentVSInstallerSample, demonstra como implementar uma aplicação WebView2 com o instalador do Visual Studio.

• Nome do exemplo: WV2DeploymentVSInstallerSample
• Diretório de repositório: WV2DeploymentVSInstallerSample
• Ficheiro de solução: não fornecido no repositório. Pode criar um ficheiro de solução nos passos abaixo.

Para demonstrar como implementar o Evergreen WebView2 Runtime com a sua aplicação, este artigo descreve como utilizar a extensão microsoft Visual Studio Installer Project para Visual Studio. Crie um projeto do tipo Projeto de Configuração para criar um instalador para a aplicação de exemplo Win32 (WebView2APISample). O instalador que criar instala em cadeia o Evergreen WebView2 Runtime.

Primeiro, edita o ficheiro a project.xml partir do repositório e, em seguida, no Visual Studio, cria um novo projeto com o modelo de projeto Configurar Projeto a partir da extensão Microsoft Visual Studio Installer Projects.

Este exemplo demonstra várias abordagens de implementação diferentes:

• Transferir o Bootstrapper do Runtime Do Evergreen WebView2 através de uma ligação.
• Empacote o Bootstrapper do Evergreen WebView2 Runtime com a sua aplicação.
• Empacote o Instalador Autónomo do Evergreen WebView2 Runtime com a sua aplicação.

Para obter informações sobre estas diferentes abordagens, veja Deploying the Evergreen WebView2 Runtime in Distribute your app and the WebView2 Runtime (Implementar o Runtime Do Evergreen WebView2 em Distribuir a sua aplicação e o Runtime webView2).

Passo 1 – Criar e executar WebView2APISample

Para se familiarizar com a aplicação que este exemplo distribui e para se certificar de que o seu ambiente está configurado para o desenvolvimento geral da aplicação Win32 WebView2, crie e execute a aplicação de exemplo Win32 (WebView2APISample) antes de utilizar este exemplo de implementação.

1. Siga os passos na aplicação de exemplo Win32 (WebView2APISample) e, em seguida, continue abaixo.

Pré-requisito: conforme indicado na página acima, é necessário o Microsoft Visual Studio, incluindo o suporte C++. O Microsoft Visual Studio Code não é suportado para este exemplo WV2DeploymentVSInstallerSample.

A página acima ajuda-o a clonar ou transferir o repositório WebView2Samples e a instalar o Visual Studio com suporte C++, se ainda não o tiver feito.

Passo 2 – Instalar projetos de Visual Studio Installer

Se ainda não tiver terminado, instale Visual Studio Installer Projects:

1. Instale o Microsoft Visual Studio Installer Projects para Visual Studio 2019. Siga os passos nessa página e, em seguida, regresse a esta página e continue os passos abaixo.

Se for apresentada uma caixa de diálogo Aguardar os seguintes processos para encerrar , feche o Visual Studio.

Passo 3 – Editar product.xml para configurar como distribuir o WebView2 Runtime

1. Abra o Visual Studio. No ecrã de abertura, pode clicar na ligação Continuar sem código no canto inferior direito.

2. Abra o seguinte ficheiro individual que se encontra na sua cópia local do repositório: <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\product.xml

   Localização do ficheiro no repositório em GitHub: SampleApps/WV2DeploymentVSInstallerSample/product.xml

   

3. Inspecionar product.xml. Há três <PackageFile> linhas. Estudar o comentário acima de cada uma das 3 linhas. Eis uma visão simplificada das linhas, com esclarecimentos.

   A primeira <PackageFile> linha utiliza o ficheiro MicrosoftEdgeWebview2Setup.exe, que é o Evergreen WebView2 Runtime Bootstrapper e especifica um HomeSite site. Utilize esta linha para a Abordagem 1: Transferir o Evergreen WebView2 Runtime Bootstrapper através de uma ligação:

   <!-- Download the MicrosoftEdgeWebview2Setup.exe -->
   <!-- <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/> -->
   

   A segunda <PackageFile> linha utiliza o ficheiro MicrosoftEdgeWebview2Setup.exe, que é o Evergreen WebView2 Runtime Bootstrapper. Utilize esta linha para a Abordagem 2: Empacotar o Bootstrapper Do Runtime Do Evergreen WebView2 com a aplicação:

   <!-- Package the MicrosoftEdgeWebview2Setup.exe -->
   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

   A terceira <PackageFile> linha utiliza o ficheiro MicrosoftEdgeWebView2RuntimeInstallerX64.exe, que é um Instalador Autónomo do Evergreen WebView2 Runtime específico da plataforma. Utilize esta linha para a Abordagem 3: Empacotar o Instalador Autónomo do Evergreen WebView2 Runtime com a sua aplicação:

   <!-- Package the WebView Standalone Installer -->
   <!-- <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" /> -->
   

4. Identifique a abordagem que está a utilizar. A abordagem 2 é a predefinição; ou seja, a linha para utilizar a Abordagem 2 não é comentada no ficheiro do product.xml repositório.

5. Edite product.xml, da seguinte forma; siga os passos numa das três secções abaixo.

Abordagem 1: Transferir o Evergreen WebView2 Runtime Bootstrapper através de uma ligação

Se quiser que a aplicação transfira o Evergreen WebView2 Runtime Bootstrapper (MicrosoftEdgeWebview2Setup.exe) através de uma ligação:

1. <PackageFiles CopyAllPackageFiles="false"> Na secção , anula o comentário da seguinte linha (mantenha o valor longo da chave pública) e comente as outras linhas:

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/>
   

2. O PublicKey valor do Programa de Arranque do Runtime webView2 pode ser alterado sem aviso prévio. Estamos a trabalhar para resolver este problema. Por enquanto, poderá ter de substituí-lo por product.xml um valor atualizado PublicKey .

3. <Commands Reboot="Defer"> Na secção e</Commands>, certifique-se PackageFile de que aponta para para "MicrosoftEdgeWebview2Setup.exe" que o instalador do Visual Studio esteja a utilizar o Bootstrapper.

4. Salve o arquivo.

Abordagem 2: Empacotar o Bootstrapper Do Runtime Do Evergreen WebView2 com a aplicação

Se quiser empacotar o Evergreen WebView2 Runtime Bootstrapper (MicrosoftEdgeWebview2Setup.exe) com a aplicação:

1. <PackageFiles CopyAllPackageFiles="false"> Na secção, anula o comentário da seguinte linha e comenta as outras linhas:

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

2. <Commands Reboot="Defer"> Na secção, certifique-se PackageFile de que aponta para para "MicrosoftEdgeWebview2Setup.exe" que o instalador do Visual Studio esteja a utilizar o Bootstrapper.

3. Salve o arquivo.

Abordagem 3: Empacotar o Instalador Autónomo do Evergreen WebView2 Runtime com a sua aplicação

Se quiser empacotar o Instalador Autónomo do Evergreen WebView2 Runtime com a aplicação:

1. <PackageFiles CopyAllPackageFiles="false"> Na secção, anula o comentário da seguinte linha e comenta as outras linhas:

   <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />
   

2. <Commands Reboot="Defer"> Na secção e </Commands> , certifique-se PackageFile de que aponta para para "MicrosoftEdgeWebView2RuntimeInstallerX64.exe" que o instalador do Visual Studio esteja a utilizar o Instalador Autónomo.

3. Se estiver a filtrar dispositivos não X64, edite o nome do MicrosoftEdgeWebView2RuntimeInstallerX64 ficheiro para refletir a arquitetura correta.

4. Salve o arquivo.

Passo 4 – Transferir o Bootstrapper webView2 ou o Instalador Autónomo

Se quiser empacotar o Bootstrapper (Abordagem 2) ou o Instalador Autónomo (Abordagem 3) com a aplicação, siga os passos nesta secção. Caso contrário, avance para a secção Passo principal seguinte.

1. Transfira o Bootstrapper do Microsoft Edge WebView2 ou o Instalador Autónomo.

2. Guarde o Bootstrapper transferido ou o Instalador Autónomo na <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ pasta .

Passo 5 – Copiar a pasta WV2DeploymentVSInstallerSample para uma pasta Pacotes

Este passo aplica-se a todas as abordagens (1, 2 ou 3).

1. Copie a <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ pasta e cole-a numa das seguintes pastas:

   • <drive>:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\

   • <Visual Studio install dir>\MSBuild\Microsoft\VisualStudio\BootstrapperPackages\ (requer, pelo menos, o Visual Studio 2019 Update 7)

   Caminho típico para <Visual Studio install dir>:

   • C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\Common7\IDE\

Passo 6 – Criar um Projeto de Configuração no Visual Studio

1. No Visual Studio, selecione Arquivo>Novo>Projeto. É apresentada a janela Criar um novo projeto .

2. Na caixa de texto Procurar modelos , introduza o projeto de configuração e, em seguida, selecione o modelo Configurar Projeto . Certifique-se de que seleciona o modelo com o nome exato, conforme mostrado abaixo:

   

3. Clique no botão Seguinte .

   A caixa de diálogo Configurar o novo projeto: Configurar Projeto é aberta, conforme mostrado abaixo.

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

5. Na caixa de texto Localização , navegue para uma localização que não esteja dentro de outro diretório de projeto, como <repo-path>\WebView2Samples\ ou uma localização que não esteja no diretório do repositório.

   

6. Clique no botão Criar .

   

Passo 7 – Adicionar o WebView2 Runtime como pré-requisito

1. No Visual Studio, no Gerenciador de Soluções, clique com o botão direito do rato no projeto e, em seguida, selecione Propriedades. A caixa de diálogo Páginas de Propriedades é aberta.

2. Clique no botão Pré-requisitos :

   

3. Selecione a caixa de verificação Microsoft WebView2 runtime .

   Se essa caixa de verificação não estiver listada, isso poderá indicar que um ficheiro necessário não foi colocado numa pasta Pacotes. Verifique que abordagem está a utilizar. Poderá ter de efetuar os passos acima, nas secções Passo 4 – Transferir o Bootstrapper webView2 ou o Instalador Autónomo e o Passo 5 – Copie a pasta WV2DeploymentVSInstallerSample para uma pasta Pacotes.

4. Desmarque as outras caixas de verificação de pré-requisitos. Em seguida, clique no botão OK :

   

Passo 8 – Criar o projeto de Configuração

1. Prima F5 para guardar e compilar o projeto de Configuração.

Confira também

• Ficheiro README para WV2DeploymentVSInstallerSample