Configuración del entorno de desarrollo para WebView2

Artículo
04/30/2023

En este artículo se describe la configuración de uso general del entorno de desarrollo para el desarrollo de WebView2. Algunos tutoriales de Introducción apuntan aquí para ver los pasos de configuración preliminares y, a continuación, agregar pasos de configuración específicos de la plataforma o del proyecto.

Instalar Visual Studio

Instale Visual Studio 2015 o versiones posteriores, como Visual Studio Professional 2019 o Visual Studio 2022 Community Edition. La mayoría de los ejemplos de WebView2 se crearon y probaron con Visual Studio 2019. Si se creó un ejemplo con Visual Studio 2019, debe compilar y ejecutar el ejemplo en Visual Studio 2019, antes de usar el ejemplo en Visual Studio 2022.

Los ejemplos de WebView2 están diseñados para Microsoft Visual Studio, no para Microsoft Visual Studio Code.

Si va a instalar Visual Studio, puede aceptar los valores predeterminados por ahora; puede hacer clic en Instalar y, a continuación, rechazar la instalación de las cargas de trabajo en este momento. Visual Studio le pedirá más adelante, al abrir un archivo determinado .sln , que instale las cargas de trabajo adecuadas para la plataforma.

Instalación de un canal de versión preliminar de Microsoft Edge

Instale cualquier canal de versión preliminar de Microsoft Edge (Beta, Desarrollo o Canary) en un sistema operativo compatible:

Windows 10
Windows 11

Para ello, vaya a Convertirse en microsoft edge insider. Los canales de vista previa también se denominan canales Insider.

Se recomienda usar el canal Canary. La versión mínima necesaria es 82.0.488.0.

Los canales de versión preliminar de Microsoft Edge son necesarios para usar una versión preliminar del SDK de WebView2. Un SDK de versión preliminar permite probar la aplicación con las API más recientes y probar las API más recientes.

Descarga del repositorio WebView2Samples

Hay dos repositorios que contienen ejemplos de WebView2:

Puede descargar un repositorio como un .zip archivo o clonar el repositorio.

Si descarga el repositorio (como un .zip archivo), obtendrá una copia de instantánea del repositorio. Después, puede descargar otra copia actualizada del repositorio más adelante.
Si clona el repositorio, puede actualizar la copia local mediante comandos de Git o características de varias aplicaciones de desarrollo.

Para descargar el repositorio (como un .zip archivo):

Abra el repositorio WebView2Samples (o el repositorio WebView2Browser) en una nueva ventana o pestaña.
Haga clic en el botón verde Código de la esquina superior derecha del repositorio de GitHub y, a continuación, haga clic en Descargar archivo ZIP.

El elemento emergente Descargar aparece en Microsoft Edge:

En Microsoft Edge, si el elemento emergente Descargar no está visible, haga clic en Configuración y más (...) y, a continuación, haga clic en Descargas.
En la ventana emergente Descargas , mantenga el puntero a la derecha de WebView2Samples-main.zip y, a continuación, haga clic en el icono Mostrar en carpeta (carpeta).

Se recomienda no hacer clic en el vínculo Abrir archivo , ya que descomprime inmediatamente el archivo en el área descargas, lo que podría dificultar (y ralentizar) el desplazamiento a la ubicación deseada.
Copie o corte el WebView2Samples-main.zip archivo del directorio Descargas en un directorio normal, como Documents.
Descomprima el WebView2Samples-main.zip archivo y anote la ubicación de los archivos descomprimidos.
Estudiar la interrupción de los directorios principales.

-main es el nombre de la rama de repositorio que representa esta instantánea de directorio descargada. Es posible cambiar a una rama diferente en GitHub y, a continuación, descargar, por ejemplo, WebView2Samples-smoketest-1.0.1054.27-prerelease-testing.zip. En ese caso, el archivo descargado .zip es una instantánea de la smoketest-1.0.1054.27-prerelease-testing rama del repositorio. En esta documentación se supone que descargó la main rama del repositorio.
Recomendado: cambie el nombre del directorio raíz de WebView2Samples-main a WebView2Samples, para que coincida con el nombre y la ruta de acceso del repositorio.

Clonación del repositorio WebView2Samples

Puede descargar el repositorio como un .zip archivo o clonar el repositorio.

Si descarga el repositorio (como un .zip archivo), obtendrá una copia de instantánea del repositorio. Después, puede descargar otra copia actualizada del repositorio más adelante.
Si clona el repositorio, puede actualizar la copia local mediante comandos de Git o características de varias aplicaciones de desarrollo.

Para clonar el WebView2Samples repositorio (o el WebView2Browser repositorio), primero debe instalar Git. Puede descargar el repositorio, como se describió anteriormente, o clonarlo.

Instalación de Git

Si desea clonar el WebView2Samples repositorio (en lugar de descargarlo) y si git aún no está instalado, descargue git e instálelo.

Obtener la dirección URL para clonar el repositorio WebView2Samples

Abra el repositorio WebView2Samples en una nueva ventana o pestaña.
Haga clic en el botón verde Código de la esquina superior derecha del repositorio de GitHub, seleccione Clonar y, a continuación, haga clic en el icono Copiar (o bien, seleccione la cadena DE URL HTTPS en el cuadro de texto y cópiela).
Decida qué herramienta desea usar para clonar localmente el repositorio:
- Visual Studio
- Escritorio de GitHub
- Shell o símbolo del sistema de Git Bash

A continuación, clone el repositorio de GitHub en la unidad local. Para ello, siga los pasos adecuados que se indican a continuación para la herramienta que desea usar.

Clonación del repositorio mediante Visual Studio

Si desea usar Visual Studio para clonar el repositorio de GitHub en la unidad local:

En Visual Studio, seleccione Repositorio declonación de > archivos.
Escriba la dirección URL que copió del repositorio de GitHub.
Desde el mismo cuadro de diálogo o en una utilidad del explorador de archivos, puede crear una carpeta o GitHub raíz git de uso general en una ubicación que se puede escribir y, a continuación, seleccionar ese directorio, para que el repositorio se clone allí, como un nuevo directorio.

Por ejemplo, podría crear el repositorio en la carpeta primaria: C:\Users\myUserName\Documents\GitHub\, para que la operación de clonación cree el nuevo directorio C:\Users\myUserName\Documents\GitHub\WebView2Samples.

Ha clonado el repositorio en la unidad local. Vaya a la siguiente sección principal a continuación.

Clonación del repositorio mediante GitHub Desktop

Si desea usar GitHub Desktop para clonar el repositorio de GitHub en la unidad local:

Instale GitHub Desktop.
En GitHub Desktop, seleccione Repositorio declonación de > archivos.
En Visual Studio o GitHub Desktop, escriba la dirección URL que copió del repositorio de GitHub.
Desde el mismo cuadro de diálogo o en una utilidad del explorador de archivos, puede crear una carpeta o GitHub raíz git de uso general en una ubicación que se puede escribir y, a continuación, seleccionar ese directorio, para que el repositorio se clone allí, como un nuevo directorio.

Por ejemplo, podría crear el repositorio en la carpeta primaria: C:\Users\myUserName\Documents\GitHub\, para que la operación de clonación cree el nuevo directorio C:\Users\myUserName\Documents\GitHub\WebView2Samples.

Ha clonado el repositorio en la unidad local. Vaya a la siguiente sección principal a continuación.

Clonación del repositorio mediante el shell de Git Bash o un símbolo del sistema

Si en su lugar desea clonar el repositorio mediante un shell de Git Bash o un símbolo del sistema:

Clone el repositorio en la unidad local y escriba la cadena de dirección URL que copió del repositorio de GitHub:
```
# example location where the repo directory will be added:
cd c:/users/myusername/documents/github/
git clone https://github.com/MicrosoftEdge/WebView2Samples.git
```
El directorio se crea en la unidad local, en la ruta de acceso especificada, como en la ilustración siguiente:

Ha clonado el repositorio en la unidad local.

Vea también:

Clonación de un repositorio : documentos de GitHub.
Descarga o clonación del repositorio Demos en código de ejemplo para DevTools.
Paso 6: Configurar un servidor localhost en Instalación de la extensión DevTools para Visual Studio Code.

Abrir un archivo .sln WebView2Samples en Visual Studio

Después de clonar o descargar el WebView2Samples repositorio, abra un .sln archivo en Visual Studio.

En la copia local de la estructura de directorios del repositorio, busque un .sln archivo. El archivo LÉAME de nivel superior del repositorio WebView2Samples proporciona información general similar.
Abra un .sln archivo en Visual Studio. Por ejemplo, abra la copia local de WebView2Samples.sln. Los archivos de solución de este repositorio requieren Visual Studio, no Visual Studio Code.
Abra uno de los .sln archivos. Por ejemplo, abra la copia local del archivo de solución principal de Win32 WebView2Samples/SampleApps/WebView2Samples.sln (descargado como ruta de acceso WebView2Samples-main/SampleApps/WebView2Samples.sln) en Microsoft Visual Studio. Al abrir ese archivo de solución en Visual Studio, Explorador de soluciones contiene los proyectos siguientes:

En general, la configuración inicial del entorno de desarrollo permite abrir cualquier tipo de .sln archivo desde el WebView2Samples repositorio:

Un archivo específico .sln de la plataforma en un subdirectorio del GettingStartedGuides directorio. Estos coinciden con los tutoriales de Introducción y son ejemplos completados que muestran un par de características de API.
El archivo Win32 .sln que contiene varios proyectos de plataforma, en el SampleApps directorio . Se trata de una demostración de API completa.
Un archivo específico .sln de la plataforma en un subdirectorio del SampleApps directorio. Estas son demostraciones de API completas.

Instalación de cargas de trabajo de Visual Studio

Instale cargas de trabajo de Visual Studio si se le solicita. Al abrir un .sln archivo desde el repositorio clonado o descargado WebView2Samples en Microsoft Visual Studio 2019 o 2022, es posible que vea un cuadro de diálogo "no se puede abrir".

Haga clic en el botón Aceptar . A continuación, es posible que vea un instalador de carga de trabajo como:

.
Active la casilla y, a continuación, haga clic en el botón Instalar .

El instalador de Visual Studio se ejecuta para la carga de trabajo de la plataforma:

.

Es posible que se abra una página de archivo de registro del informe de migración, como en file:///C:/Users/username/Documents/WebView2Samples-main/WebView2Samples-main/SampleApps/UpgradeLog.htm:

Para hacer zoom, haga clic con el botón derecho en >Abrir imagen en la nueva pestaña.

Anteriormente, el sufijo de -main directorio está presente para el archivo descargado .zip del repositorio, no si ha clonado el repositorio.

Visual Studio abre el archivo seleccionado .sln en Explorador de soluciones:

Instalación o actualización del SDK de WebView2

El SDK de WebView2 incluye el control WebView2, con tecnología de Microsoft Edge, y permite insertar tecnologías web (HTML, CSS y JavaScript) en las aplicaciones nativas.

Instale el SDK de WebView2 una vez por nodo de proyecto de cada .sln archivo. La instalación del SDK de WebView2 solo se aplica al proyecto en el que está instalado.

En lugar de descargar el Microsoft.Web.WebView2 paquete NuGet del SDK desde nuget.org, instale el paquete NuGet del SDK de WebView2 a través del panel Administrador de paquetes NuGet en Visual Studio. Después de clonar o descargar el repositorio WebView2Samples, abra uno de los archivos del .sln repositorio en Visual Studio y haga clic con el botón derecho en un nodo de proyecto dentro de la solución. Use el panel Administrador de paquetes NuGet para instalar el Microsoft.Web.WebView2 SDK como un paquete NuGet.

El Microsoft.Web.WebView2 SDK está disponible en versiones preliminares y de versión preliminar. Para empezar, se recomienda una versión de versión.

Instale o actualice el SDK de Versión preliminar o Versión preliminar de WebView2, como se indica a continuación:

Abra un .sln archivo en Visual Studio. Por ejemplo, abra la copia local de WebView2Samples.sln. Los archivos de solución de este repositorio requieren Visual Studio, no Visual Studio Code.
En Explorador de soluciones, haga clic con el botón derecho en los nodos de proyecto de la solución, como el nodo de proyecto WebView2GettingStarted (no el nodo de solución) y, a continuación, seleccione Administrar paquetes NuGet.

En la imagen siguiente se muestra un archivo y proyecto de .sln determinados; use el proyecto en el que quiera instalar el SDK:

La pestaña Administrador de paquetes NuGet se abre en Visual Studio.
En la ventana NuGet , haga clic en la pestaña Examinar .
A la derecha de la barra de búsqueda, desactive la casilla Incluir versión preliminar o establézcala si quiere una versión preliminar del SDK, que incluye API experimentales.
En la barra de búsqueda de la esquina superior izquierda, escriba Microsoft.Web.WebView2.
Debajo de la barra de búsqueda, haga clic en la tarjeta Microsoft.Web.WebView2 .
En el panel derecho, haga clic en el botón Instalar (o Actualizar). NuGet descarga el SDK de WebView2 en la máquina para su uso en este proyecto.

Para hacer zoom, haga clic con el botón derecho en >Abrir imagen en la nueva pestaña.
Cierre la pestaña Administrador de paquetes NuGet .

El SDK de WebView2 ya está instalado, por lo que el entorno de desarrollo ahora está configurado para agregar características de WebView2 a las aplicaciones WebView2.