Aplicación de ejemplo Win32 con Visual Composition

Este ejemplo de WebView2 inserta un control WebView2 dentro de una aplicación nativa win32.

• Nombre de ejemplo: WebView2SampleWinComp
• Directorio del repositorio: WebView2SampleWinComp
• Archivo de solución: WebView2SampleWinComp.sln

Este ejemplo se compila como un proyecto de Visual Studio 2019 de Win32. Usa C++ y HTML/CSS/JavaScript en el entorno WebView2.

En este ejemplo se usan las API de composición de Windows Runtime (también denominada capa visual) para aprovechar las características de la interfaz de usuario de Windows y crear una mejor apariencia y funcionalidad en aplicaciones Win32 de C++.

En este ejemplo se muestra una selección de controladores de eventos y métodos de API de WebView2 que permiten que una aplicación win32 nativa interactúe directamente con un WebView y viceversa.

Si es la primera vez que usa WebView, primero se recomienda seguir el tutorial Introducción a WebView2 en aplicaciones Win32, que explica cómo crear un WebView2 y le guía por algunas funciones básicas de WebView2.

Consulte también Archivo Léame para WebView2SampleWinComp.

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

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

Este ejemplo se compila como un proyecto de Visual Studio 2019 de Win32.

1. Si Visual Studio (versión mínima necesaria) 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 y vuelva a esta página y continúe con los pasos siguientes.

2. Si desea usar Visual Studio 2017, cambie el conjunto de herramientas de plataforma del proyecto en > propiedades de configuración de propiedades del proyecto Conjunto de herramientas > general > de la plataforma. También es posible que tenga que cambiar el Windows SDK a la versión más reciente disponible.

Otros requisitos previos

• SDK de WebView2: ya se ha instalado una versión preliminar del SDK de WebView2 en este proyecto de ejemplo. A continuación se muestran los pasos para actualizar opcionalmente el SDK.

• Windows 10 SDK: de forma predeterminada, esta aplicación de ejemplo usará la versión más reciente del SDK de Window 10 instalada en el equipo. Sin embargo, hay un problema con Windows 10 SDK, versión 2004 (10.0.19041.0) que impedirá la compilación de esta aplicación de ejemplo. A continuación se proporcionan los pasos para instalar una versión compatible del SDK de Windows 10.

Paso 2: Clonación o descarga del repositorio WebView2Samples

1. Si aún no lo ha hecho, clone o descargue el repositorio en la WebView2Samples unidad local. En una ventana o pestaña independiente, consulte Descarga 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 3: Abrir la solución y establecer el destino de Windows SDK

1. En la unidad local, abra el .sln archivo en Visual Studio, en el directorio :

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   o bien:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   Es posible que se abra un cuadro de diálogo Revisar acciones de solución que le pida que instale Windows SDK para volver a dirigir el proyecto a:

   

2. En la lista desplegable versión de Windows SDK, seleccione 10.0.20348.0 o posterior, o 10.0.18362.0 o anterior; no seleccione 10.0.19041.0. A continuación, haga clic en el botón Aceptar . Si esas versiones no están disponibles, siga estos pasos en la sección "Instalar el Windows SDK". De lo contrario, vaya a la sección siguiente.

Si la solución ya está abierta, puede cambiar el destino de la siguiente manera:

• En Explorador de soluciones, haga clic con el botón derecho en el proyecto WebView2SampleWinComp (no en la solución) y, a continuación, haga clic en Volver a segmentar proyectos.

Paso 4: Instalar el Windows SDK

De forma predeterminada, esta aplicación de ejemplo usa la versión más reciente del SDK de Window 10 que ha instalado. Hay un problema con Windows 10 SDK, versión 2004 (10.0.19041.0) que impedirá que esta aplicación de ejemplo se compile. Si se produce este problema, instale (y vuelva a dirigir este proyecto para usarlo) en una versión posterior, como Windows 10 sdk versión 2104 (10.0).20348.0) o una versión anterior, como 10.0. 18362.1.

Para instalar un SDK de Windows 10:

1. Vaya a Windows SDK y al archivo del emulador.

2. En una de las filas siguientes, haga clic en el vínculo Instalar SDK :

   • Windows 10 SDK versión 2104 (10.0.20348.0) (o posterior)
   • WINDOWS 10 SDK, versión 1903 (10.0.18362.1)

   Se descarga una copia específica de la versión de winsdksetup.exe en el Downloads directorio.

3. En el Downloads directorio, abra la copia de que acaba de winsdksetup.exe descargar.

4. Se abre la ventana de configuración Windows SDK:

   

5. Haga clic en el botón Siguiente y, a continuación, siga las indicaciones. Puede aceptar los valores predeterminados. Al final de la instalación, aparece la pantalla de bienvenida Windows SDK para cualquier versión que haya seleccionado:

   

6. Haga clic en el botón Cerrar .

En el paso anterior, "Abra la solución y establezca el destino de Windows SDK". O bien, si la solución ya está abierta, en Explorador de soluciones, haga clic con el botón derecho en el proyecto WebView2SampleWinComp (no solución) y, a continuación, haga clic en Retarget Projects (Redestinar proyectos).

Paso 5: Instalación de cargas de trabajo si se le solicita

• Si se le solicita, instale las cargas de trabajo de Visual Studio que se soliciten. En una ventana o pestaña independiente, vea Instalar cargas de trabajo de Visual Studio 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 6: Compilación y ejecución del proyecto

Después de abrir la solución en Visual Studio (anteriormente) y responder a cualquier solicitud de instalación o instalación, el proyecto se abre en Visual Studio, mostrando el proyecto WebView2SampleWinComp en Explorador de soluciones:

En la parte superior de Visual Studio, establezca el destino de compilación, como se indica a continuación:

1. En la lista desplegable Configuraciones de solución , seleccione Depurar o Liberar.

2. En la lista desplegable Plataformas de soluciones, seleccione x86, x64 o ARM64.

3. En Explorador de soluciones, haga clic con el botón derecho en el proyecto WebView2SampleWinComp y, a continuación, seleccione Compilar.

   De este modo, se compila el archivo SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxprojde proyecto .

4. Seleccione Depurar>iniciar depuración (F5).

   Se abre la ventana de la aplicación de ejemplo:

   

5. En Visual Studio, seleccione Depurar>detener depuración. Visual Studio cierra la aplicación.

Paso 7: Actualización de los paquetes instalados

Este paso es opcional. El ejemplo tiene preinstalado:

• Una versión del SDK de versión preliminar de WebView2.
• Una versión de las bibliotecas de implementación de Windows (WIL).

1. En Explorador de soluciones, haga clic con el botón derecho en el proyecto WebView2SampleWinComp (no en el nodo Solución) y, a continuación, seleccione Administrar paquetes NuGet. Se abre la pestaña Administrador de paquetes NuGet .

2. Active la casilla Incluir versión preliminar .

3. Haga clic en la pestaña Instalado . Para cada paquete, tenga en cuenta si aparecen dos versiones (la versión actual y un número de versión actualizado disponible).

4. Haga clic en la pestaña Novedades.

5. Si aparece una versión preliminar más reciente del SDK Microsoft.Web.WebView2 , puede hacer clic opcionalmente en el botón Actualizar . Una versión preliminar tiene un sufijo "-prerelease", como 1.0.1248-prerelease. Si desea ver detalles sobre este paso, en una ventana o pestaña independiente, consulte Instalación o actualización del SDK de WebView2 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.

   

6. Si aparece una versión más reciente de las bibliotecas de implementación de Windows (WIL), puede hacer clic opcionalmente en el botón Actualizar .

7. Siga las indicaciones para continuar actualizando los paquetes.

8. Compile y vuelva a ejecutar el proyecto, ahora con los paquetes actualizados.

Paso 8: Inspección del código

1. En el editor de código de Visual Studio, inspeccione el código:

   

Vea también

• Introducción a WebView2 en aplicaciones Win32
• Referencia de api de WebView2