Ação personalizada do WiX para implantar o WebView2 Runtime

Este exemplo, WV2DeploymentWiXCustomActionSample, demonstra como usar uma Ação Personalizada WiX para implantar o WebView2 Runtime.

  • Nome do exemplo: WV2DeploymentWiXCustomActionSample
  • Diretório de repositório: WV2DeploymentWiXCustomActionSample
  • Arquivo de projeto: WV2DeploymentWiXCustomActionSample.wixproj

Para ajudá-lo a entender como implantar o Evergreen WebView2 Runtime com seu aplicativo, este exemplo cria um instalador WiX para o WebView2APISample e usa uma Ação Personalizada WiX para instalar em cadeia o Evergreen WebView2 Runtime.

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.

Etapa 1 - Instale o Visual Studio 2019 com suporte a C++

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

  1. Visual Studio – se a instalação do Visual Studio 2019 (versão mínima necessária) com suporte a C++ ainda não estiver instalada, em uma janela ou guia separada, confira Instalar o Visual Studio em Configurar seu ambiente de Desenvolvimento para WebView2. Siga as etapas nesta seção para instalar o Visual Studio 2019 com suporte a C++ e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 2 - Instale as ferramentas de compilação do WiX Toolset

Se ainda não tiver terminado, instale o WiX Toolset:

  1. Em uma nova janela ou guia, acesse WiX Toolset e baixe as ferramentas de compilação do WiX Toolset.

  2. Clique no wixnnn.exe arquivo e clique em Abrir arquivo.

    Uma caixa de diálogo pode ser aberta, Requer que o .NET Framework 3.5.1 esteja habilitado:

    Requer a caixa de diálogo do .NET Framework

    Se o .NET Framework 3.5.1 já estiver habilitado em seu computador, pule para continuar instalando esse componente WiX.

  3. Clique no botão OK . A janela do instalador do WiX é fechada.

  4. Pressione a tecla do logotipo do Windows Tecla do logotipo do Windows, digite Recursos do Windows e pressione Enter. A caixa de diálogo Ativar ou desativar recursos do Windows é exibida.

  5. Marque a caixa de marca a caixa de marca .NET Framework 3.5 (inclui .NET 2.0 e 3.0):

    Ativar ou desativar recursos > do Windows no .NET Framework 3.5

    Não é necessário selecionar os itens filho.

  6. Clique em OK. Talvez você receba uma solicitação para permitir que o Windows Update baixe arquivos.

    Para obter mais informações, consulte Instalar o .NET Framework 3.5 no Windows 11, Windows 10, Windows 8.1 e Windows 8.

  7. Depois que o .NET Framework 3.5.1 estiver habilitado, execute o wixnnn.exe arquivo novamente. Por exemplo, no Microsoft Edge, clique em Configurações e mais, clique em Downloads e clique em Abrir arquivo abaixo wix311.exe.

  8. Clique no painel Instalar do instalador do WiX.

  9. No Controle de Conta de Usuário, clique no botão Sim . A parte superior do instalador do WiX diz "Instalado com êxito".

Instale também o componente WiX Visual Studio, conforme a próxima seção.

Etapa 3 - Instale a extensão Visual Studio do conjunto de ferramentas WiX

Se ainda não tiver terminado, instale a Extensão Visual Studio 2019 do Conjunto de Ferramentas WiX:

  1. Em uma nova janela ou guia, vá para WiX Toolset , baixe e instale a extensão:

    • WiX Toolset Visual Studio 2019 Extension - arquivo do instalador baixado: Votive2019.vsix

  2. No Controle de Conta de Usuário, clique no botão Sim . O instalador VSIX para WiX extensão do Visual Studio é aberto:

    Instalador VSIX para WiX Extensão do Visual Studio 2019

  3. Clique no botão Instalar .

  4. Se uma caixa de diálogo VSIX aguardando o desligamento dos processos for aberta, feche o Visual Studio. O Instalador do VSIX prossegue.

    O Instalador do VSIX lê Instalação concluída:

    Instalador VSIX - Instalação Concluída - Conjunto de Ferramentas WiX Visual Studio 2019 Extension

  5. No Instalador do VSIX, clique no botão Fechar .

  6. No instalador do WiX, clique no painel Sair .

Etapa 4 – Clonar o repositório WebView2Samples

  1. Se ainda não tiver feito isso, clone o WebView2Samples repositório em sua unidade local. Em uma janela ou guia separada, consulte Clonar 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 5 – Abrir a solução no Visual Studio

  1. Na cópia local do repositório WebView2Samples, abra <repo-location>\WebView2Samples\SampleApps\WebView2Samples.sln com o Visual Studio (não o Visual Studio Code).

Etapa 6 - Editar Product.wxs para configurar como distribuir o WebView2 Runtime

  1. Abra Product.wxs no WV2DeploymentWiXCustomActionSample projeto.

  2. Edite Product.wxs dependendo da abordagem que você deseja usar:

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

  1. Em <!-- Step 4: Config Custom Action to download/install Bootstrapper -->, remova o comentário do <CustomAction Id='DownloadAndInvokeBootstrapper' ...> elemento abaixo <!-- [Download Bootstrapper] ... -->.

  2. Comente outros <Binary> e <CustomAction> elementos em Step 4.

  3. Em <!-- Step 5: Config execute sequence of custom action -->, remova o comentário do <Custom Action='DownloadAndInvokeBootstrapper' ...> elemento abaixo <!-- [Download Bootstrapper] ...-->.

  4. Comente outros <Custom> elementos em Step 5.

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. Em <!-- Step 4: Config Custom Action to download/install Bootstrapper -->, remova o comentário do e <CustomAction Id='InvokeBootstrapper' ...> dos <Binary Id="MicrosoftEdgeWebview2Setup.exe" ...> elementos abaixo <!-- [Package Bootstrapper] ... -->.

  2. Comente outros <Binary> e <CustomAction> elementos em Step 4.

  3. Em <!-- Step 5: Config execute sequence of custom action -->, remova o comentário do <Custom Action='InvokeBootstrapper' ...> elemento abaixo <!-- [Package Bootstrapper] ...-->.

  4. Comente outros <Custom> elementos em Step 5.

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. Em <!-- Step 4: Config Custom Action to download/install Bootstrapper -->, remova o comentário do e <CustomAction Id='InvokeStandalone' ...> dos <Binary Id="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" ...> elementos abaixo <!-- [Package Standalone Installer] ... -->.

  2. Comente outros <Binary> e <CustomAction> elementos em Step 4.

  3. Se você estiver direcionando dispositivos não X64, talvez também queira editar o nome do MicrosoftEdgeWebView2RuntimeInstallerX64 arquivo para refletir a arquitetura correta.

  4. Em <!-- Step 5: Config execute sequence of custom action -->, remova o comentário do <Custom Action='InvokeStandalone' ...> elemento abaixo <!-- [Package Standalone Installer] ...-->.

  5. Comente outros <Custom> elementos em Step 5.

Etapa 7 - Coloque o bootstrapper ou o instalador na pasta

Se você planeja empacotar o Bootstrapper (Abordagem 2) ou o Instalador Autônomo (Abordagem 3) com o aplicativo:

  1. Baixe o bootstrapper ou o instalador autônomo. No Microsoft Edge WebView2, clique em Baixar agora para rolar para baixo até a seção Baixar o WebView2 Runtime .

  2. Coloque o Bootstrapper baixado ou o Instalador Autônomo na pasta anexa SampleApps .

Etapa 8 - Compilar o projeto do instalador

  1. Construa o WV2DeploymentVSInstallerSample projeto.

Confira também

  • Last updated on