Aplicación de ejemplo de WinUI 2 (UWP)

En este ejemplo de WebView2 se muestra cómo usar el control WebView2 y las API de WebView2 para implementar un explorador web en una aplicación WinUI 2 (UWP).

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

Paquetes NuGet instalados

En este ejemplo se incluyen los siguientes paquetes NuGet:

• Microsoft.NETCore.UniversalWindowsPlatform
• Microsoft.UI.Xaml, versión preliminar , incluye el SDK de Microsoft.Web.WebView2 como dependencia.

Para mostrar las características más recientes, este ejemplo del repositorio WebView2Samples está configurado para usar una versión preliminar del SDK de WinUI 2 (que aparece como Microsoft.UI.Xaml en el Administrador de paquetes NuGet), en lugar de una versión estable. El SDK de WinUI 2 incluye una versión compatible del SDK de WebView2, como una dependencia de Microsoft.UI.Xaml.

Consulte también archivo LÉAME para obtener webview2_sample_uwp.

Paso 1: Instalación de Visual Studio

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

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.

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 en Visual Studio

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

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

   o bien:

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

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

1. 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 5: Compilación y ejecución del proyecto mediante paquetes preinstalados

Explorador de soluciones muestra el proyecto de webview2_sample_uwp:

Compile y ejecute el proyecto con las versiones de los paquetes NuGet que se instalaron en el ejemplo del repositorio:

1. En la lista desplegable Configuraciones de solución , seleccione una configuración, como Depurar.

2. En la lista desplegable Plataformas de solución, seleccione una plataforma, como x64.

   

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

   El proyecto se compila.

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

   Inicialmente, aparece una ventana de cuadrícula vacía durante un momento:

   

   A continuación, la ventana de la aplicación de ejemplo muestra el contenido de la página web:

   

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

A continuación, actualice los paquetes NuGet para el proyecto, según las secciones siguientes.

Paso 6: Actualización de los paquetes NuGet

En este paso, actualizaremos los paquetes NuGet del proyecto para obtener la versión preliminar más reciente del SDK de WinUI 2. El SDK de WinUI 2 incluye una versión preliminar o versión preliminar compatible del SDK de WebView2.

Actualice los paquetes NuGet del proyecto:

1. En Visual Studio, en Explorador de soluciones, haga clic con el botón derecho en el proyecto de webview2_sample_uwp (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 Instalado .

3. Active la casilla Incluir versión preliminar .

   Se muestra una versión preliminar del paquete Microsoft.UI.Xaml , que indica el SDK de WinUI 2. El paquete Microsoft.UI.Xaml incluye el SDK de WebView2; Microsoft.Web.WebView2 aparece en la sección Dependencias del paquete Microsoft.UI.Xaml . La actualización del paquete Microsoft.UI.Xaml también provocará una actualización del SDK de WebView2 compatible.

4. En el Administrador de paquetes NuGet, haga clic en la pestaña Novedades.

5. Haga clic en la tarjeta Microsoft.UI.Xaml de la izquierda.

6. En el cuadro de texto Versión , asegúrese de que está seleccionada la versión preliminar más reciente .

7. Haga clic en el botón Actualizar de la derecha:

   

   Después de obtener los paquetes más recientes, que pueden tardar unos minutos, se abre el cuadro de diálogo Vista previa de los cambios . Microsoft.Web.WebView2 (el SDK de WebView2) aparece por separado en el cuadro de diálogo Vista previa de cambios :

   

8. Haga clic en el botón Aceptar .

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

   

10. 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.

11. Actualice el paquete NuGet Microsoft.NETCore.UniversalWindowsPlatform mediante pasos similares.

    Después de obtener los paquetes de UWP más recientes, que pueden tardar unos minutos, aparece el cuadro de diálogo Vista previa de los cambios :

    

12. SeleccioneGuardar todo en archivo>.

    Ahora ha instalado el paquete Microsoft.UI.Xaml, que es WinUI (WinUI 2), para el proyecto. Compruebe los paquetes instalados resultantes, como se indica a continuación:

13. En el Administrador de paquetes NuGet, haga clic en la pestaña Instalado e inspeccione los paquetes actualizados:

    • Microsoft.NETCore.UniversalWindowsPlatform
    • Microsoft.UI.Xaml: versión preliminar

    

14. Cierre la ventana Administrador de paquetes NuGet .

Paso 7: Compilación y ejecución del proyecto con paquetes actualizados

Ahora que los paquetes NuGet se han actualizado, compile y vuelva a ejecutar el proyecto:

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

   El proyecto se compila.

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

   Inicialmente, aparece una ventana de cuadrícula vacía durante un momento:

   

   A continuación, la ventana de la aplicación de ejemplo muestra el contenido de la página web:

   

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

Paso 10: Inspeccionar el código

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

   

Vea también

• Referencia de api de WebView2
• Introducción a WebView2 en aplicaciones winUI 2 (UWP)