Introducción a WebView2 en aplicaciones winUI 2 (UWP)

Este artículo consiste en aprender a escribir su propio código WebView2. Si quieres ejecutar primero un ejemplo, consulta aplicación de ejemplo win32 u otro artículo de aplicación de ejemplo, como la aplicación de ejemplo WinUI 2 (UWP).

En este tutorial:

• Configure las herramientas de desarrollo para crear aplicaciones para UWP que usen WebView2 para mostrar contenido web.
• Crea una aplicación inicial de WinUI 2 (UWP).
• Instale el paquete Microsoft.UI.Xaml (WinUI 2) para el proyecto.
• Agregue un control WebView2 que muestre el contenido de la página web.
• Obtenga información sobre los conceptos de WebView2 en el camino.

Use la plantilla de proyecto Aplicación en blanco de C# (Windows universal) y, a continuación, instale el paquete Microsoft.UI.Xaml (WinUI 2) para este proyecto. Al instalar ese paquete, se instala el paquete Microsoft.Web.WebView2 (el SDK de WebView2) como una dependencia.

El paquete Microsoft.UI.Xaml (WinUI 2) forma parte de la biblioteca de interfaz de usuario de Windows. Este paquete proporciona características de interfaz de usuario de Windows, entre las que se incluyen:

• Controles XAML para UWP.
• Estilos de control densos.
• Estilos y materiales fluidos.

Plataformas

Este artículo se aplica a Windows y Xbox.

WinUI 2 solo admite UWP. Estos controles son compatibles con versiones anteriores.

Vea también:

• Ejemplos de aplicaciones multimedia para Xbox

Proyecto completado

Una versión completa de este proyecto de Introducción (solución) se encuentra en el repositorio WebView2Samples. Puede usar la solución completada (desde el repositorio o siguiendo los pasos siguientes) como línea base para agregar más código WebView2 y otras características.

Hay disponible una versión completa de este proyecto de tutorial en el repositorio WebView2Samples :

• Nombre de ejemplo: WinUI2_Sample
• Directorio del repositorio: WinUI2_GettingStarted
• Archivo de solución: MyUWPGetStartApp.sln

Siga las secciones principales del paso en secuencia, a continuación.

Acerca de WinUI y WebView2

En las aplicaciones de WinUI 2 (UWP), WebView2 se expone como un control XAML. Después de insertar el control XAML en la aplicación como un control con nombre, puedes hacer referencia a ese control XAML en archivos de C#.

En WinUI solo se expone un subconjunto de interfaces o funciones de WebView2:

• El WebView2 objeto XAML expone la CoreWebView2 interfaz, junto con la funcionalidad más importante.

• Interfaces como CoreWebView2Controller están ocultas, porque WinUI se encarga del entorno y la creación de ventanas en segundo plano.

Vea también:

• Limitación de XAML en WebView2 en aplicaciones de WinUI 2 (UWP).

Paso 1: Instalación de Visual Studio

En este artículo se muestran los pasos y las capturas de pantalla de Visual Studio 2022 Community Edition. Se requiere Microsoft Visual Studio 2019, versión 16.9 o posterior. No se admite Visual Studio 2017.

1. Si aún no está instalada una versión adecuada de Microsoft Visual Studio, en una nueva ventana o pestaña, vea Instalar Visual Studio en Configurar el entorno de desarrollo para WebView2. Siga los pasos de esa página para realizar una instalación predeterminada básica de Visual Studio, como Visual Studio 2022 Community Edition.

   A continuación, vuelva a esta página y continúe a continuación.

2. Si Visual Studio no muestra números de línea en el editor de código, es posible que desee activar los números de línea. Para ello, seleccioneOpciones>de herramientas>Texto Editor>Todos los númerosde línea de idiomas>. Después, haga clic en Aceptar.

Paso 2: Instalación de cargas de trabajo para herramientas de desarrollo de escritorio de .NET, escritorio de C++ y UWP

1. Abra Microsoft Visual Studio. Aparece la ventana de opción de apertura:

   

2. En la parte inferior derecha, haga clic en Continuar sin código. Visual Studio se abre, vacío:

   

3. Seleccione Herramientas>Obtener herramientas y características. Se abre la ventana Instalador Visual Studio y, a continuación, se abre la ventana Modificar - Visual Studio sobre ella:

   

Si la ventana Modificar Visual Studio no está abierta, en la ventana Instalador Visual Studio, haga clic en el botón Modificar.

1. En la pestaña Cargas de trabajo , desplácese hasta y haga clic en las tarjetas siguientes para seleccionarlas; Asegúrese de que hay una marca de verificación en cada una de estas tarjetas:

   • Desarrollo de escritorio de .NET
   • Desarrollo de escritorio con C++
   • desarrollo de Plataforma universal de Windows

2. A la derecha, en la sección Detalles de instalación, expanda Plataforma universal de Windows desarrollo y, a continuación, seleccione C++ (v143) Plataforma universal de Windows herramientas:

   

   Si todos estos componentes ya se han instalado, haga clic en el botón Cerrar, cierre la ventana Instalador Visual Studio y vaya a la siguiente sección principal de los pasos siguientes.

3. Haga clic en el botón Modificar .

   Aparece una ventana Control de cuentas de usuario que le pregunta "¿Desea permitir que esta aplicación realice cambios en el dispositivo? Instalador Visual Studio. Publicador comprobado: Microsoft Corporation. Origen del archivo: disco duro en este equipo. Mostrar más detalles (botón)".

4. Haga clic en el botón Sí .

5. Aparece un cuadro de diálogo, "Antes de empezar, cierre Visual Studio":

   

6. Haga clic en el botón Continuar .

   Visual Studio descarga, comprueba e instala los paquetes seleccionados:

   

   Esta captura de pantalla muestra Visual Studio Professional 2022, aunque este artículo se actualizó realmente con Visual Studio Community 2022.

   La instalación puede tardar varios minutos. Aparece Visual Studio, con un Explorador de soluciones vacío.

7. Presione Alt+Pestaña para cambiar a la ventana Instalador Visual Studio y, a continuación, cierre la ventana de Instalador Visual Studio.

Paso 3: Creación de una aplicación para UWP

1. Si Visual Studio está abierto, seleccione Archivo>nuevo>proyecto. Se abre el cuadro de diálogo Crear un nuevo proyecto .

   O bien, si Visual Studio está cerrado, ábralo y, a continuación, en la pantalla de inicio de Visual Studio, haga clic en la tarjeta Crear un nuevo proyecto :

   

2. En el cuadro de texto Buscar plantillas en la parte superior, escriba Aplicación en blanco de C# (Windows universal) y, a continuación, seleccione la tarjeta Aplicación en blanco de C# (Windows universal):

   

3. Haga clic en el botón Siguiente .

   Aparece el cuadro de diálogo Configurar el nuevo proyecto para una aplicación en blanco (Windows universal):

   

4. En el cuadro de texto Nombre del proyecto, escriba un nombre de proyecto, como MyUWPGetStartApp.

5. En el cuadro de texto Ubicación , escriba una ruta de acceso, como C:\Users\myusername\Documents\MyWebView2Projects.

6. Haga clic en el botón Crear.

   Aparece el cuadro de diálogo Nuevo proyecto de Windows :

   

7. Acepte los valores predeterminados y haga clic en el botón Aceptar .

8. Si aparece la sección de ventana Modo de desarrollador , en esa sección, haga clic en Activado. Si aún no ha establecido la máquina en modo de desarrollador, se abre el cuadro de diálogo Usar características de desarrollador para confirmar la activación del modo de desarrollador.

   • Haga clic en Sí para activar el modo de desarrollador de la máquina y, a continuación, cierre la ventana Configuración .

   Visual Studio muestra la solución y el proyecto recién creados:

   

Paso 4: Compilación y ejecución del proyecto vacío

Antes de agregar código WebView2, confirme que el proyecto funciona y vea el aspecto de la aplicación vacía, como se indica a continuación:

1. Compile y ejecute el proyecto vacío. Para ello, seleccione Depurar>iniciar depuración (F5). Se abre la ventana de la aplicación, muestra temporalmente una cuadrícula y, a continuación, muestra el contenido de la aplicación:

   

   Se trata de una aplicación winUI 2 (UWP) de línea base, sin WebView2 todavía.

2. Cierre la aplicación.

A continuación, configuras este nuevo proyecto de WinUI 2 (UWP) para hospedar el control WebView2 y usar la API WebView2.

Paso 5: Instalar el SDK de WinUI 2 (Microsoft.UI.Xaml)

A continuación, instale el paquete Microsoft.UI.Xaml para este proyecto. Microsoft.UI.Xaml es WinUI 2.

1. En Explorador de soluciones, haga clic con el botón derecho en el proyecto (no en el nodo de solución situado encima) y, a continuación, seleccione Administrar paquetes NuGet.

   El panel Administrador de paquetes NuGet se abre en Visual Studio.

2. En el Administrador de paquetes NuGet, haga clic en la pestaña Examinar .

3. Desactive la casilla Incluir versión preliminar .

4. En el cuadro Buscar , escriba Microsoft.UI.Xaml y, a continuación, seleccione la tarjeta Microsoft.UI.Xaml debajo del cuadro de búsqueda:

   

   Para la versión 2.8.0 o posterior, en la sección Dependencias de la parte inferior, se muestra Microsoft.Web.WebView2 .

   Para HoloLens 2 desarrollo, el paquete Microsoft.Web.WebView2 debe ser la versión 1.0.1722.45 o posterior, que puede ser mayor que la predeterminada. WebView2 en HoloLens 2 está en versión preliminar y está sujeto a cambios antes de la disponibilidad general. WebView2 solo se admite en dispositivos HoloLens 2 que ejecutan la actualización de Windows 11. Para obtener más información, vea Actualizar HoloLens 2.

5. En el panel central, en la lista desplegable Versión , asegúrese de que la opción Más reciente estable está seleccionada, versión 2.8.0 o posterior.

6. Haga clic en el botón Instalar .

   Aparece el cuadro de diálogo Vista previa de cambios :

   

7. Haga clic en el botón Aceptar .

8. Aparece el cuadro de diálogo Aceptación de licencia :

   

9. Haga clic en el botón Acepto . En Visual Studio, se muestra el readme.txt archivo, que indica que ha instalado el paquete WinUI:

   

   El léame enumera algunas líneas de código que son similares a las que agregaremos.

10. SeleccioneGuardar todo en archivo> (Ctrl+Mayús+S).

Ya ha instalado el paquete Microsoft.UI.Xaml, que es WinUI 2, para el proyecto. El SDK de WinUI 2 (Microsoft.UI.Xaml) incluye el SDK de WebView2, por lo que no es necesario instalar por separado el paquete NuGet para el SDK de WebView2.

Paso 6: Creación de instancias del control WebView2 en código XAML

Ahora está listo para agregar código WebView2 al proyecto. En primer lugar, agregue una referencia de espacio de nombres para el control WebView2, como se indica a continuación:

1. En Explorador de soluciones, expanda el proyecto y haga doble clic en MainPage.xaml.

   MainPage.xaml se abre en un diseñador con un editor de código debajo:

   

2. En el editor de código, dentro de la <Page> etiqueta <Pagede inicio del elemento , agregue el atributo siguiente, debajo de los demás xmlns: atributos:

   xmlns:controls="using:Microsoft.UI.Xaml.Controls"
   

   Agregue un control WebView2 a la cuadrícula XAML, como se indica a continuación:

3. En el MainPage.xaml archivo, en el <Grid> elemento (que aún no contiene ningún otro elemento), agregue un control WebView2 agregando el siguiente elemento:

   <controls:WebView2 x:Name="WebView2" Source="https://bing.com"/>
   

4. Presione Ctrl+S para guardar el archivo.

   Encima del MainPage.xaml archivo en el editor de código, se puede mostrar una vista previa del contenido del control WebView2, o bien podría permanecer en blanco (blanco) hasta que compile por primera vez la aplicación:

   

   El subrayado ondulado desaparece después de compilar y ejecutar la aplicación, en el paso siguiente.

Paso 7: Compilación y ejecución del proyecto que contiene el control WebView2

1. Haga clic en Depurar>Iniciar depuración (F5). (Si compila para HoloLens 2, consulte Uso de Visual Studio para implementar y depurar). Se abre la ventana de la aplicación, que muestra brevemente la cuadrícula WebUI WebView2:

   

2. Después de un momento, la ventana de la aplicación muestra el sitio web de Bing en el control WebView2 para WebUI 2:

   

3. En Visual Studio, seleccione Depurar>detener depuración para cerrar la ventana de la aplicación.

Enhorabuena, ha creado su primera aplicación WebView2.

Ahora puede cambiar el contenido del control WebView2 para agregar su propio contenido.

Más información sobre los eventos de navegación

A continuación, obtenga información sobre los eventos de navegación, que son esenciales para las aplicaciones WebView2. La aplicación navega inicialmente a https://bing.com.

• En una nueva ventana o pestaña, lea Eventos de navegación para aplicaciones WebView2 y vuelva a esta página.

Vea también

• WebView2 en aplicaciones de WinUI 2 (UWP)
• Referencia de api de WebView2
• Procedimientos recomendados de desarrollo para aplicaciones WebView2
  • Administrar carpetas de datos de usuario
• Aplicaciones de ejemplo de WebView2 : una guía para el WebView2Samples repositorio.
  • Aplicación de ejemplo de WinUI 2 (UWP): pasos para descargar, actualizar, compilar y ejecutar el ejemplo WinUI 2 WebView2.
• Proyecto finalizado del tutorial de introducción: a diferencia de algunos de los otros tutoriales, no hay una versión completa de este tutorial Introducción en el repositorio WebView2Samples.

GitHub:

• Repositorio WebView2Samples
• Aplicación de ejemplo webView2 para UWP : el ejemplo WebView2 de WinUI 2 (UWP).
• Problemas (repositorio microsoft-ui-xaml ) para escribir errores o solicitudes de características específicas de WinUI.
• Ejemplos de aplicaciones multimedia para Xbox

NuGet:

• Paquete NuGet Microsoft.UI.Xaml