Instalador de implantação Visual Studio WebView2

Este exemplo, WV2DeploymentVSInstallerSample, demonstra como implantar um aplicativo WebView2 usando o instalador do Visual Studio.

• Nome da amostra: WV2DeploymentVSInstallerSample
• Diretório do repositório: WV2DeploymentVSInstallerSample
• Arquivo da solução: não fornecido no repositório. Crie um arquivo de solução nas etapas abaixo.

Para demonstrar como implantar o Evergreen WebView2 Runtime com seu aplicativo, este artigo descreve como usar a extensão Microsoft Visual Studio Installer Project para Visual Studio. Você cria um projeto do tipo Projeto de Configuração, para criar um instalador para o aplicativo de exemplo Win32 (WebView2APISample). Esse instalador que você cria instala em cadeia o Evergreen WebView2 Runtime.

Primeiro, você edita o project.xml arquivo a partir do repositório e, em seguida, no Visual Studio, cria um novo projeto usando o modelo de projeto de Instalação da extensão Microsoft Visual Studio Installer Projects.

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

• Baixando o Evergreen WebView2 Runtime Bootstrapper usando um link.
• Empacotando o Evergreen WebView2 Runtime Bootstrapper com seu aplicativo.
• Empacotando o Instalador Autônomo do Evergreen WebView2 Runtime com seu aplicativo.

Para obter informações sobre essas diferentes abordagens, consulte Implantando o Evergreen WebView2 Runtime em Distribuir seu aplicativo e o WebView2 Runtime.

Etapa 1 – Compilar e executar WebView2APISample

Para se familiarizar com o aplicativo distribuído por este exemplo e garantir que seu ambiente esteja configurado para o desenvolvimento geral do aplicativo Win32 WebView2, compile e execute o aplicativo de exemplo Win32 (WebView2APISample) antes de usar este exemplo de implantação.

1. Execute as etapas no aplicativo de exemplo Win32 (WebView2APISample) e continue abaixo.

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

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

Etapa 2 – Instalar projetos do Visual Studio Installer

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

1. Instale os projetos do Microsoft Visual Visual Studio Installer para Visual Studio 2019. Siga as etapas nessa página, retorne a esta página e continue as etapas abaixo.

Se uma caixa de diálogo Aguardando o desligamento dos seguintes processos for exibida , feche o Visual Studio.

Etapa 3 - Editar product.xml para configurar como distribuir o WebView2 Runtime

1. Abra o Visual Studio. Na tela de abertura, você pode clicar no link Continuar sem código no canto inferior direito.

2. Abra o seguinte arquivo individual que está em sua cópia local do repositório: <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\product.xml

   Local do arquivo no repositório no GitHub: SampleApps/WV2DeploymentVSInstallerSample/product.xml

   

3. Inspecionar product.xml. Há três <PackageFile> linhas. Estude o comentário acima de cada uma das 3 linhas. Aqui está uma exibição simplificada das linhas, com esclarecimentos.

   A primeira <PackageFile> linha usa o arquivo MicrosoftEdgeWebview2Setup.exe, que é o Evergreen WebView2 Runtime Bootstrapper, e especifica um HomeSite site. Use esta linha para a Abordagem 1: Baixando o Evergreen WebView2 Runtime Bootstrapper por meio de um link:

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

   A segunda <PackageFile> linha usa o arquivo MicrosoftEdgeWebview2Setup.exe, que é o Evergreen WebView2 Runtime Bootstrapper. Use esta linha para a Abordagem 2: empacotando o Evergreen WebView2 Runtime Bootstrapper com o aplicativo:

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

   A terceira <PackageFile> linha usa file MicrosoftEdgeWebView2RuntimeInstallerX64.exe, que é um instalador autônomo do Evergreen WebView2 Runtime específico da plataforma. Use esta linha para a Abordagem 3: Empacotando o Instalador Autônomo do Evergreen WebView2 Runtime com seu aplicativo:

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

4. Identifique qual abordagem você está usando. A abordagem 2 é o padrão; ou seja, a linha para usar a Abordagem 2 não é comentada no arquivo do product.xml repositório.

5. Edite product.xml, da seguinte maneira; execute as etapas em uma das três seções abaixo.

Abordagem 1: Baixando o WebView2 Runtime Bootstrapper Evergreen por meio de um link

Se você deseja que o aplicativo baixe o Evergreen WebView2 Runtime Bootstrapper (MicrosoftEdgeWebview2Setup.exe) por meio de um link:

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

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

2. O PublicKey valor do WebView2 Runtime Bootstrapper pode ser alterado sem aviso prévio. Estamos trabalhando para resolver esse problema. Por enquanto, talvez seja necessário substituí-la por product.xml um valor atualizado PublicKey .

3. <Commands Reboot="Defer"> Na seção and</Commands>, aponte PackageFile para "MicrosoftEdgeWebview2Setup.exe" que o instalador do Visual Studio esteja usando o Bootstrapper.

4. Salve o arquivo.

Abordagem 2: empacotando o Evergreen WebView2 Runtime Bootstrapper com o aplicativo

Se você quiser empacotar o Evergreen WebView2 Runtime Bootstrapper (MicrosoftEdgeWebview2Setup.exe) com o aplicativo:

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

   <PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />
   

2. <Commands Reboot="Defer"> Na seção, aponte PackageFile para "MicrosoftEdgeWebview2Setup.exe" que o instalador do Visual Studio esteja usando o Bootstrapper.

3. Salve o arquivo.

Abordagem 3: empacotando o instalador autônomo do Evergreen WebView2 Runtime com seu aplicativo

Se você quiser empacotar o Instalador Autônomo do Evergreen WebView2 Runtime com o aplicativo:

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

   <PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />
   

2. <Commands Reboot="Defer"> Na seção and</Commands>, certifique-se de PackageFile que aponte para "MicrosoftEdgeWebView2RuntimeInstallerX64.exe" que o instalador do Visual Studio esteja usando o Instalador Autônomo.

3. Se você estiver destinando dispositivos não X64, edite o nome do MicrosoftEdgeWebView2RuntimeInstallerX64 arquivo para refletir a arquitetura correta.

4. Salve o arquivo.

Etapa 4 - Baixe o bootstrapper WebView2 ou o instalador autônomo

Se você quiser empacotar o Bootstrapper (Abordagem 2) ou o Instalador Autônomo (Abordagem 3) com o aplicativo, execute as etapas nesta seção. Caso contrário, vá para a próxima seção principal da etapa.

1. Baixe o Microsoft Edge WebView2 Bootstrapper ou o instalador autônomo.

2. Salve o Bootstrapper baixado ou o Instalador Autônomo na <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ pasta.

Etapa 5 – Copiar a pasta WV2DeploymentVSInstallerSample para uma pasta Pacotes

Esta etapa se aplica a todas as abordagens (1, 2 ou 3).

1. Copie a <repo-location>\WebView2Samples\SampleApps\WV2DeploymentVSInstallerSample\ pasta e cole-a em uma 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 Atualização 7)

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

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

Etapa 6 – Criar um projeto de configuração no Visual Studio

1. No Visual Studio, selecione Arquivo>Novo>Projeto. A janela Criar um novo projeto é exibida.

2. Na caixa de texto Pesquisar modelos , insira projeto de configuração e selecione o modelo Projeto de Configuração . Certifique-se de selecionar o modelo com esse nome exatamente assim, conforme mostrado abaixo:

   

3. Clique no botão Avançar .

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

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

5. Na caixa de texto Local , navegue até um local que não esteja dentro de outro diretório do projeto, como <repo-path>\WebView2Samples\ ou um local que não esteja no diretório do repositório.

   

6. Clique no botão Criar .

   

Etapa 7 - Adicionar o WebView2 Runtime como pré-requisito

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

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

   

3. Marque a caixa de seleção do tempo de execução do Edge WebView2 .

   Se essa caixa de seleção não estiver listada, isso pode indicar que um arquivo necessário não foi colocado em uma pasta Pacotes. Verifique qual abordagem você está usando. Talvez seja necessário executar as etapas acima, nas seções Etapa 4 - Baixe o WebView2 Bootstrapper ou o instalador autônomo e Etapa 5 - Copie a pasta WV2DeploymentVSInstallerSample para uma pasta Pacotes.

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

   

Etapa 8 - Compilar o projeto de instalação

1. Pressione F5 para salvar e criar o projeto de Instalação.

Confira também

• Arquivo LEIAME para WV2DeploymentVSInstallerSample