Compartir vía

Acción personalizada de WiX para implementar el entorno de ejecución de WebView2

  • Artículo

En este ejemplo, WV2DeploymentWiXCustomActionSample, se muestra cómo usar una acción personalizada de WiX para implementar el entorno de ejecución de WebView2.

  • Nombre de ejemplo: WV2DeploymentWiXCustomActionSample
  • Directorio del repositorio: WV2DeploymentWiXCustomActionSample
  • Archivo de proyecto: WV2DeploymentWiXCustomActionSample.wixproj

Para ayudarle a comprender cómo implementar evergreen WebView2 Runtime con la aplicación, en este ejemplo se crea un instalador de WiX para WebView2APISample y se usa una acción personalizada de WiX para instalar en cadena el runtime de Evergreen WebView2.

En este ejemplo se muestran varios enfoques de implementación diferentes:

  • Descargar el programa previo en tiempo de ejecución Evergreen WebView2 mediante un vínculo.
  • Empaquetar el programa previo en tiempo de ejecución Evergreen WebView2 con la aplicación.
  • Empaquetar el instalador independiente en tiempo de ejecución de Evergreen WebView2 con la aplicación.

Paso 1: Instalación de Visual Studio 2019 con compatibilidad con C++

Se requiere Microsoft Visual Studio. Microsoft Visual Studio Code no se admite para este ejemplo.

  1. Visual Studio : si la instalación de Visual Studio 2019 (versión mínima necesaria) con compatibilidad con C++ no está instalada, en una ventana o pestaña independiente, vea Instalar Visual Studio en Configurar el entorno de desarrollo para WebView2. Siga los pasos de esa sección para instalar Visual Studio 2019 con compatibilidad con C++ y, a continuación, vuelva a esta página y continúe con los pasos siguientes.

Paso 2: Instalar herramientas de compilación del conjunto de herramientas de WiX

Si aún no lo ha hecho, instale el conjunto de herramientas de WiX:

  1. En una nueva ventana o pestaña, vaya a Conjunto de herramientas de WiX y descargue las herramientas de compilación del conjunto de herramientas de WiX.

  2. Haga clic en el wixnnn.exe archivo y, a continuación, haga clic en Abrir archivo.

    Es posible que se abra un cuadro de diálogo que requiera que .NET Framework 3.5.1 esté habilitado:

    Cuadro de diálogo Requiere .NET Framework

    Si .NET Framework 3.5.1 ya está habilitado en el equipo, vaya directamente a continuar instalando este componente WiX.

  3. Haga clic en el botón Aceptar . Se cierra la ventana del instalador de WiX.

  4. Presione la tecla del logotipo de Windows tecla logotipo de Windows, escriba Características de Windows y, a continuación, presione Entrar. Aparece el cuadro de diálogo Activar o desactivar las características de Windows .

  5. Active la casilla .NET Framework 3.5 (incluye .NET 2.0 y 3.0):

    Activar o desactivar > las características de Windows en .NET Framework 3.5

    No es necesario seleccionar los elementos secundarios.

  6. Haga clic en Aceptar. Es posible que se le pida si desea permitir Windows Update descargar archivos.

    Para obtener más información, vea Instalar .NET Framework 3.5 en Windows 11, Windows 10, Windows 8.1 y Windows 8.

  7. Después de habilitar .NET Framework 3.5.1, vuelva a ejecutar el wixnnn.exe archivo. Por ejemplo, en Microsoft Edge, haga clic en Configuración y mucho más, en Descargasy, a continuación, haga clic en Abrir archivo debajo wix311.exede .

  8. Haga clic en el panel Instalar del instalador de WiX.

  9. En Control de cuentas de usuario, haga clic en el botón Sí . En la parte superior del instalador de WiX se lee "Instalado correctamente".

Instale también el componente WiX Visual Studio, según la sección siguiente.

Paso 3: Instalación de la extensión Visual Studio del conjunto de herramientas de WiX

Si aún no lo ha hecho, instale la extensión de Visual Studio 2019 del conjunto de herramientas de WiX:

  1. En una nueva ventana o pestaña, vaya a Conjunto de herramientas de WiX y, a continuación, descargue e instale la extensión:

    • WiX Toolset Visual Studio 2019 Extension : archivo del instalador descargado: Votive2019.vsix

  2. En Control de cuentas de usuario, haga clic en el botón Sí . Se abre la extensión VSIX Installer for WiX Visual Studio:

    Instalador de VSIX para la extensión de Visual Studio 2019 de WiX

  3. Haga clic en el botón Instalar .

  4. Si se abre un cuadro de diálogo VSIX a la espera de que se cierren los procesos , cierre Visual Studio. El instalador de VSIX continúa.

    El instalador de VSIX lee Instalación completa:

    Instalador de VSIX: instalación completa: extensión de Visual Studio 2019 del conjunto de herramientas de WiX

  5. En el instalador de VSIX, haga clic en el botón Cerrar .

  6. En el instalador de WiX, haga clic en el panel Salir .

Paso 4: Clonación del repositorio WebView2Samples

  1. Si aún no lo ha hecho, clone el repositorio en la WebView2Samples unidad local. En una ventana o pestaña independiente, consulte Clonación del repositorio WebView2Samples en Configuración del entorno de desarrollo para WebView2. Siga los pasos de esa sección y vuelva a esta página y continúe a continuación.

Paso 5: Abrir la solución en Visual Studio

  1. En la copia local del repositorio WebView2Samples, abra <repo-location>\WebView2Samples\SampleApps\WebView2Samples.sln con Visual Studio (no Visual Studio Code).

Paso 6: Edición de Product.wxs para configurar cómo distribuir el entorno de ejecución de WebView2

  1. Abra Product.wxs en el WV2DeploymentWiXCustomActionSample proyecto.

  2. Edite Product.wxs en función del enfoque que quiera usar:

Si desea que la aplicación descargue el programa previo en tiempo de ejecución Evergreen WebView2 (MicrosoftEdgeWebview2Setup.exe) a través de un vínculo:

  1. En <!-- Step 4: Config Custom Action to download/install Bootstrapper -->, quite la marca de comentario del <CustomAction Id='DownloadAndInvokeBootstrapper' ...> elemento debajo <!-- [Download Bootstrapper] ... -->de .

  2. Comente otros <Binary> elementos y <CustomAction> en Step 4.

  3. En <!-- Step 5: Config execute sequence of custom action -->, quite la marca de comentario del <Custom Action='DownloadAndInvokeBootstrapper' ...> elemento debajo <!-- [Download Bootstrapper] ...-->de .

  4. Comente otros <Custom> elementos en Step 5.

Enfoque 2: Empaquetado del programa previo en tiempo de ejecución Evergreen WebView2 con la aplicación

Si desea empaquetar el programa previo en tiempo de ejecución Evergreen WebView2 (MicrosoftEdgeWebview2Setup.exe) con la aplicación:

  1. En <!-- Step 4: Config Custom Action to download/install Bootstrapper -->, quite la marca de comentario de los <Binary Id="MicrosoftEdgeWebview2Setup.exe" ...> elementos y <CustomAction Id='InvokeBootstrapper' ...> debajo <!-- [Package Bootstrapper] ... -->de .

  2. Comente otros <Binary> elementos y <CustomAction> en Step 4.

  3. En <!-- Step 5: Config execute sequence of custom action -->, quite la marca de comentario del <Custom Action='InvokeBootstrapper' ...> elemento debajo <!-- [Package Bootstrapper] ...-->de .

  4. Comente otros <Custom> elementos en Step 5.

Enfoque 3: Empaquetado del instalador independiente en tiempo de ejecución De Evergreen WebView2 con la aplicación

Si desea empaquetar el instalador independiente en tiempo de ejecución de Evergreen WebView2 con la aplicación:

  1. En <!-- Step 4: Config Custom Action to download/install Bootstrapper -->, quite la marca de comentario de los <Binary Id="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" ...> elementos y <CustomAction Id='InvokeStandalone' ...> debajo <!-- [Package Standalone Installer] ... -->de .

  2. Comente otros <Binary> elementos y <CustomAction> en Step 4.

  3. Si tiene como destino dispositivos que no son X64, es posible que también desee editar el nombre de MicrosoftEdgeWebView2RuntimeInstallerX64 archivo para reflejar la arquitectura correcta.

  4. En <!-- Step 5: Config execute sequence of custom action -->, quite la marca de comentario del <Custom Action='InvokeStandalone' ...> elemento debajo <!-- [Package Standalone Installer] ...-->de .

  5. Comente otros <Custom> elementos en Step 5.

Paso 7: Colocar el programa previo o el instalador en la carpeta

Si planea empaquetar el programa previo (Enfoque 2) o el Instalador independiente (Enfoque 3) con la aplicación:

  1. Descargue el programa previo o el instalador independiente. En Microsoft Edge WebView2, haga clic en Descargar ahora para desplazarse hacia abajo hasta la sección Descargar el entorno de ejecución de WebView2 .

  2. Coloque el programa previo descargado o el instalador independiente en la carpeta envolvente SampleApps .

Paso 8: Compilación del proyecto del instalador

  1. Compile el WV2DeploymentVSInstallerSample proyecto.

Vea también