Aplicación de ejemplo win32

La aplicación WebView2APISample muestra cómo usar el control WebView2 y las API de WebView2 para agregar características a una aplicación win32 de C++. Este es el ejemplo principal de Win32, y tiene páginas web de prueba para las características y API más recientes, y cientos de menuitems para probar varias API.

• Nombre de ejemplo: WebView2APISample
• Directorio del repositorio: WebView2APISample
• Archivo de solución: WebView2Samples.sln (ubicado en el directorio primario, \SampleApps\)
• Nombre del proyecto en Explorador de soluciones: WebView2APISample

WebView2APISample inserta un control WebView2 en una aplicación nativa win32.

En este ejemplo se usan C++ y HTML/CSS/JavaScript en el entorno WebView2.

WebView2APISample 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 control WebView2 y viceversa.

Este ejemplo y su archivo de solución son únicos: contiene una copia de otros ejemplos, en Explorador de soluciones.

WebView2APISample es una aplicación híbrida creada con el control WebView2 de Microsoft Edge; es decir, esta aplicación combina un lado nativo y un lado de aplicación web del explorador. Consulte Enfoque de aplicaciones híbridas en Introducción a Microsoft Edge WebView2.

La ventana de la aplicación WebView2APISample en ejecución muestra la versión del SDK de WebView2 y también la versión y la ruta de acceso del entorno de ejecución de WebView2. Hay muchos menús y elementos de menú útiles para probar y mostrar las API de WebView2.

Secuencia de artículos

Para empezar a aprender WebView2, use esta secuencia sugerida de artículos y proyectos de ejemplo:

1. Obtenga esta clase WebView2APISample para compilar y ejecutar mediante el artículo presente, incluso si su propia aplicación es para una plataforma diferente.

2. Si está más interesado en una plataforma que no sea Win32, use el artículo Ejemplo para su plataforma; consulte Aplicaciones de ejemplo.

3. Use el artículo Introducción para la plataforma que le interesa; consulte Introducción tutoriales.

Paso 1: Instalar Visual Studio 2022

1. Presione la tecla Windows , escriba Visual Studio 2022 y, a continuación, haga clic en Abrir.

   Se abre el cuadro de diálogo Abrir reciente de Visual Studio.

   Microsoft Visual Studio Code no se admite para este ejemplo.

2. Si Visual Studio 2022 no está instalado, vaya a Visual Studio 2022 y use el botón combinado Descargar Visual Studio .

Continúe con el siguiente paso, Paso 2: Clonar el repositorio WebView2Samples.

Versiones anteriores de Visual Studio

También se admiten Visual Studio 2019 y 2017.

Visual Studio 2019

Este ejemplo se creó con Visual Studio 2019, como un proyecto de Visual Studio 2019. Para abrir el proyecto de este ejemplo tal como está, puede usar Visual Studio 2019.

Visual Studio 2017

Si desea abrir este ejemplo mediante Visual Studio 2017:

1. Abra la solución en Visual Studio 2017.

2. Cambie el conjunto de herramientas de la plataforma del proyecto en Propiedades > del proyecto Propiedades de la configuración Conjunto de herramientas > general > de la plataforma.

3. Es posible que también tenga que instalar una Windows SDK reciente en el equipo.

Paso 2: Clonación del repositorio WebView2Samples

1. Presione Windows + E.

   Se abre una ventana Explorador de archivos.

2. Vaya al lugar donde ha clonado o planee clonar el repositorio WebView2Samples .

   Ruta de acceso de ejemplo:

   C:\Users\localAccount\GitHub\WebView2Samples

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

4. Si aún no se ha abierto, abra un símbolo del sistema de Git Bash: presione la tecla Windows y escriba git bash.

   Confirmaciones de extracción

5. Cambie al directorio del repositorio clonado:

   cd C:/Users/localAccount/GitHub/WebView2Samples`
   

   Sustituya la ruta de acceso en la que ha clonado el repositorio WebView2Samples .

6. Extraiga las confirmaciones más recientes en la copia local del repositorio:

   git pull
   

   Creación de una rama de trabajo

7. Cree una rama de trabajo y cambie a ella:

   git checkout -b test
   

   Devuelve: Switched to branch 'test'

Ahora puede modificar el código de la rama de trabajo sin modificar el código que se encuentra en la rama "principal" del repositorio. Más adelante es posible que quiera volver a la rama "principal", por ejemplo, para extraer nuevas confirmaciones o crear una rama diferente basada en la rama "principal".

Paso 3: Abrir la solución en Visual Studio

Al abrir y compilar el ejemplo, se modificará el ejemplo. El procedimiento recomendado es evitar cambiar el código que se encuentra en la rama "principal", mediante la creación y el cambio a una rama de trabajo, que puede hacer desde Visual Studio.

1. Presione la tecla Windows , escriba Visual Studio 2022 y, a continuación, haga clic en Abrir.

   Se abre el cuadro de diálogo Abrir reciente de Visual Studio:

   

2. Haga clic en Continuar sin código, en la esquina inferior derecha.

3. En Visual Studio 2022, seleccione Archivo>abrir>proyecto o solución.

   Se abre el cuadro de diálogo Abrir proyecto o solución .

4. Vaya al WebView2Samples\SampleApps\WebView2Samples.sln archivo y haga clic en el botón Abrir .

   Ruta de acceso de ejemplo:

   C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
   

   A diferencia de otros ejemplos, no hay un archivo dedicado .sln en el directorio del repositorio de ejemplo que contenga el archivo Léame de este ejemplo. En su lugar, el .sln archivo de este ejemplo (incluidos también otros proyectos de ejemplo) está en el directorio primario.

   El cuadro de diálogo Revisar cambios de proyecto y solución podría abrirse:

   

5. Haga clic en el botón Aceptar .

   La solución se abre en Visual Studio:

   

Paso 4: Actualizar el conjunto de herramientas

Continuando desde arriba: es posible que se abra el cuadro de diálogo Revisar acciones de solución: Redestinar proyectos :

En esta captura de pantalla se muestra lo siguiente:

• Windows SDK versión:10.0 (versión instalada más reciente)
• Conjunto de herramientas de plataforma:Actualización a v143

Estas opciones se enumeran para estos proyectos:

• WebView2APISample.vcxproj : muestra principal presente.

• WebView2APISampleWinComp.vcxproj : un ejemplo diferente.

• Si se abre ese cuadro de diálogo, haga clic en el botón Aceptar .

  El panel Salida de Visual Studio muestra resultados, como:

  Upgrading project 'WebView2APISample'...
  Configuration 'Debug|ARM64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Debug|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Debug|x64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|ARM64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|x64': changing Platform Toolset to 'v143' (was 'v142').
  Upgrading project 'WebView2SampleWinComp'...
  Configuration 'Debug|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Debug|x64': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|Win32': changing Platform Toolset to 'v143' (was 'v142').
  Configuration 'Release|x64': changing Platform Toolset to 'v143' (was 'v142').
  Retargeting End: 2 completed, 0 failed, 0 skipped
  

  En el explorador, se abre una página Informe de migración , como: file:///C:/Users/localAccount/GitHub/WebView2Samples/SampleApps/UpgradeLog.htm

Paso 5: Actualización de .NET

Continuando desde arriba: en Visual Studio, en Explorador de soluciones en la esquina superior derecha, podría aparecer el mensaje: Este proyecto tiene como destino una versión de .NET que no está instalada.

1. Si recibe ese mensaje, haga clic en el vínculo Instalar situado junto al mensaje.

   Se abre el cuadro de diálogo Instalador Visual Studio:

   

2. Haga clic en el botón Instalar .

   Se abre el cuadro de diálogo Control de cuentas de usuario .

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

   En el cuadro de diálogo Instalador Visual Studio se muestra el progreso para la descarga e instalación y, a continuación, se muestra La instalación se ha completado.

4. Haga clic en el botón Cerrar .

   Se cierra el cuadro de diálogo Instalador Visual Studio.

   Explorador de soluciones se muestra sin el mensaje "no instalado".

Paso 6: Instalación de la carga de trabajo de C++ para Visual Studio

Continuando desde arriba: si se le pide que instale cargas de trabajo al intentar compilar el proyecto:

1. En Visual Studio, seleccione Herramientas>Obtener herramientas y características.

   Se abre el cuadro de diálogo Instalador Visual Studio y, a continuación, se abre el cuadro de diálogo Modificar.

2. En la pestaña Cargas de trabajo , seleccione la tarjeta Desarrollo de escritorio con C++ , para que aparezca una marca de verificación en ella.

3. En Detalles de instalación de la derecha, expanda Desarrollo de escritorio con C++.

4. Haga clic en el botón Actualizar o Instalar .

   El instalador se cierra.

Vea también:

• Paso 4: Instalar cargas de trabajo si se le solicita en Introducción a WebView2 en aplicaciones Win32.
• Instale cargas de trabajo de Visual Studio en Configuración del entorno de desarrollo para WebView2.

No es necesario instalar WiX para continuar; que es para un proyecto diferente en este archivo de solución. La instalación de WiX se trata en WiX Burn Bundle para implementar el entorno de ejecución de WebView2.

Paso 7: Compilación y ejecución con el SDK anterior

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.

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

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

   

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

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

   Se abre la ventana de la aplicación WebView2APISample :

   

5. Cierre la ventana de la aplicación de ejemplo.

Paso 8: Actualización del SDK de WebView2 de versión preliminar

La versión del repositorio de este ejemplo tiene instalada una versión preliminar del SDK de WebView2. A continuación, actualizará el SDK de WebView2 a la versión preliminar más reciente (a menos que ya esté instalado el SDK de versión preliminar más reciente). Un SDK de versión preliminar admite las API experimentales más recientes y las API más recientes "Estable en versión preliminar".

1. Compruebe el número de versión del SDK de versión preliminar que se encuentra en la copia del repositorio de la aplicación WebView2APISample en GitHub: vea packages.config.

   Por ejemplo:

   <package id="Microsoft.Web.WebView2" version="1.0.2950-prerelease" targetFramework="native" />
   <package id="Microsoft.Windows.ImplementationLibrary" version="1.0.220201.1" targetFramework="native" />
   

2. Compruebe cuál es el número de versión preliminar más reciente, en Notas de la versión del SDK de WebView2.

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

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

   

5. A la derecha del cuadro de texto Buscar , active la casilla Incluir versión preliminar .

6. A la izquierda, seleccione Microsoft.Web.WebView2.

7. A la derecha, en la lista desplegable Versión , seleccione la versión preliminar más reciente.

8. A la derecha de la lista desplegable Versión , haga clic en el botón Actualizar .

   Se abre el cuadro de diálogo Vista previa de cambios :

   

9. Haga clic en el botón Aplicar .

10. Repita los pasos anteriores para actualizar Microsoft.Windows.Implementation.Library, pero puede seleccionar la versión más reciente en lugar de la versión preliminar más reciente.

    La versión preliminar más reciente del SDK de WebView2 ya está instalada para este proyecto.

Vea también:

• Fases de adición de API en Acerca de las notas de la versión para el SDK de WebView2.

Paso 9: Compilación y ejecución con el SDK actualizado

Suponiendo que ha actualizado la versión preliminar del SDK de WebView2, compile y vuelva a ejecutar el ejemplo:

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

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

   Se abre la ventana de la aplicación WebView2APISample :

   

3. Cierre la ventana de la aplicación de ejemplo.

Ha obtenido, actualizado, compilado y ejecutado la aplicación de ejemplo Win32.

Paso 10: Estudio del ejemplo

En las secciones siguientes se describe cómo funciona el ejemplo.

Visualización de los archivos del proyecto

En estos pasos se supone que ha obtenido, actualizado, compilado y ejecutado la aplicación de ejemplo win32 según los pasos anteriores.

El ejemplo y el proyecto WebView2APISample es el ejemplo principal de Win32.

1. Abra WebView2Samples.sln en Visual Studio.

   Ruta de acceso de ejemplo:

   C:\Users\localAccount\GitHub\WebView2Samples\SampleApps\WebView2Samples.sln
   

   Este archivo de solución contiene el ejemplo principal (WebView2APISample) y otros ejemplos también:

   

2. En Explorador de soluciones, expanda el proyecto WebView2APISample:

   

Arquitectura de aplicaciones híbridas

La aplicación WebView2APISample es un ejemplo de una aplicación híbrida, con un elemento nativo win32 y un elemento WebView:

• La parte win32 puede acceder directamente a las API nativas de Windows. La parte superior de la aplicación WebView2APISample es un componente win32 escrito en C++. Esta parte de la aplicación toma entradas de la interfaz de usuario del usuario y las usa para controlar WebView.

• WebView es un contenedor para tecnologías web estándar (HTML, CSS y JavaScript). La parte principal de la aplicación WebView2APISample es un WebView que se puede reasignar mediante tecnologías web estándar (HTML/CSS/JavaScript). WebView se puede navegar a sitios web o contenido local.

Este enfoque híbrido le permite crear e iterar más rápido mediante tecnologías web, a la vez que puede aprovechar las ventajas de la funcionalidad nativa. La aplicación WebView2APISample muestra cómo el componente Win32 y el componente WebView pueden interactuar entre sí.

Esta aplicación de ejemplo tiene más de 100 menuitems, que muestran muchas API de WebView2 en el marco de Win32/C++. Las secciones siguientes se centran en los conceptos básicos de la implementación de aplicaciones híbridas.

Archivos de proyecto

En esta sección se explican brevemente algunos archivos clave dentro del repositorio. La aplicación WebView2APISample se divide verticalmente en componentes, en lugar de horizontalmente en capas. Cada componente implementa todo el flujo de trabajo de una categoría de características de ejemplo, desde la escucha de comandos de menú hasta la llamada a métodos de API WebView para implementarlos.

App.cpp

Este es el archivo de nivel superior que ejecuta la aplicación WebView2APISample . Lee las opciones de línea de comandos, configura el entorno de proceso y controla el modelo de subprocesos de la aplicación.

AppWindow.cpp (menú Ventana)

Este archivo implementa la ventana de la aplicación, haciendo lo siguiente:

1. Configure todos los controles de Win32.

2. Inicialice el entorno de WebView y el control WebView.

3. Agregue controladores de eventos a WebView y cree todos los componentes que controlan varias características de la aplicación.

La AppWindow clase controla los comandos del menú Ventana de la aplicación de ejemplo.

Este archivo se describe con más detalle en Funciones clave en AppWindow.cpp, a continuación.

FileComponent.cpp (menú Archivo)

Este componente controla los comandos desde el menú Archivo (excepto exit), así como el DocumentTitleChanged evento .

ScriptComponent.cpp (menú Script)

Este componente controla los comandos del menú Script , que implican la interacción con WebView mediante la inserción de JavaScript, la publicación de WebMessages, la adición de objetos nativos a la página web o el uso del protocolo DevTools para comunicarse con la página web.

ProcessComponent.cpp (menú Proceso)

Este componente controla los comandos del menú Proceso , que implican la interacción con el proceso del explorador. También controla el ProcessFailed evento, en caso de que el proceso del explorador o uno de sus procesos de representación se bloquee o no responda.

SettingsComponent.cpp (menú Configuración)

Este componente controla los comandos del menú Configuración . Este componente también se encarga de copiar la configuración de una vista web antigua cuando se crea una nueva. La mayoría del código que interactúa con la ICoreWebView2Settings interfaz se encuentra aquí.

ViewComponent.cpp (menú Ver)

Este componente controla los comandos del menú Ver y cualquier funcionalidad relacionada con el tamaño y la visibilidad de WebView. Cuando se cambia el tamaño de la ventana de la aplicación, se minimiza o se restaura, ViewComponent se cambia el tamaño, se oculta o se muestra la vista web en respuesta. También responde al ZoomFactorChanged evento.

ScenarioWebMessage.cpp y ScenarioWebMessage.html (menú Escenario)

El ScenarioWebMessage componente se crea al seleccionar el elemento de menú Escenario>de mensajería web . Este componente implementa una aplicación de ejemplo con un elemento de C++ y un elemento HTML + JavaScript, que se comunican entre sí mediante la publicación y recepción asincrónica de mensajes.

Este componente se describe con más detalle en ScenarioWebMessage (.html, .cpp y .h), a continuación.

ScenarioAddHostObject.cpp y ScenarioAddHostObject.html (menú Escenario)

Este componente se crea al seleccionar el elemento de menúObjetos host de escenario>. Muestra la comunicación entre la aplicación nativa y la página web HTML mediante la inserción de objetos host. La interfaz del objeto host se declara en HostObjectSample.idly el propio objeto se implementa en HostObjectSampleImpl.cpp.

Vea también:

• Llamada a código de lado nativo desde código del lado web

Funciones clave en AppWindow.cpp

AppWindow.cpp implementa la ventana de la aplicación, haciendo lo siguiente:

1. Configure todos los controles de Win32.

2. Inicialice el entorno de WebView y el control WebView.

3. Agregue controladores de eventos a WebView y cree todos los componentes que controlan varias características de la aplicación.

La AppWindow clase controla los comandos del menú Ventana de la aplicación de ejemplo. A continuación se muestran algunas de las funciones clave de AppWindow.cpp.

InitializeWebView()

En AppWindow.cpp, la InitializeWebView() función crea el entorno WebView2 mediante CreateCoreWebView2EnvironmentWithOptions.

Para ver estas llamadas API en acción, inspeccione el código siguiente desde InitializeWebView():

HRESULT hr = CreateCoreWebView2EnvironmentWithOptions(
    subFolder, nullptr, options.Get(),
    Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
        this, &AppWindow::OnCreateEnvironmentCompleted)
        .Get());
if (!SUCCEEDED(hr))
{
    if (hr == HRESULT_FROM_WIN32(ERROR_FILE_NOT_FOUND))
    {
        MessageBox(
            m_mainWindow,
            L"Couldn't find Edge installation. "
            "Do you have a version installed that's compatible with this "
            "WebView2 SDK version?",
            nullptr, MB_OK);
    }
    else
    {
        ShowFailure(hr, L"Failed to create webview environment");
    }
}

OnCreateEnvironmentCompleted()

Después de crear el entorno, creamos WebView mediante CreateCoreWebView2Controller.

La OnCreateEnvironmentCompleted función de devolución de llamada se pasa a CreateCoreWebView2EnvironmentWithOptions en InitializeWebView(). La devolución de llamada almacena el puntero de entorno y, a continuación, lo usa para crear un nuevo WebView:

HRESULT AppWindow::OnCreateEnvironmentCompleted(
    HRESULT result, ICoreWebView2Environment* environment)
{
    CHECK_FAILURE(result);

    m_webViewEnvironment = environment;

    CHECK_FAILURE(m_webViewEnvironment->CreateCoreWebView2Controller(
        m_mainWindow, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                            this, &AppWindow::OnCreateCoreWebView2ControllerCompleted)
                            .Get()));
    return S_OK;
}

OnCreateCoreWebView2ControllerCompleted()

La OnCreateCoreWebView2ControllerCompleted función de devolución de llamada se pasa a CreateCoreWebView2Controller en InitializeWebView(). Esta devolución de llamada:

• Inicializa el estado relacionado con WebView.
• Registra algunos controladores de eventos.
• Crea los componentes de la aplicación.

RegisterEventHandlers()

Se llama a la RegisterEventHandlers función dentro de CreateCoreWebView2Controller. Configura algunos de los controladores de eventos usados por la aplicación y los agrega a WebView.

Para obtener más información sobre los controladores de eventos en WebView2, vea ICoreWebView2.

A continuación se muestra un fragmento de código de RegisterEventHandlers(), donde se configura un controlador de eventos para el NewWindowRequested evento . Este evento se desencadena cuando JavaScript en la página web llama a window.open(). ICoreWebView2NewWindowRequestedEventHandler hace un nuevo AppWindow y pasa la vista web de la nueva ventana de vuelta al explorador, para que pueda devolverla de la window.open() llamada. A diferencia de nuestras llamadas a CreateCoreWebView2EnvironmentWithOptions y CreateCoreWebView2Controller, en lugar de proporcionar un método para la devolución de llamada, simplemente proporcionamos una expresión lambda de C++ en ese momento y allí:

CHECK_FAILURE(m_webView->add_NewWindowRequested(
    Callback<ICoreWebView2NewWindowRequestedEventHandler>(
        [this](
            ICoreWebView2* sender,
            ICoreWebView2NewWindowRequestedEventArgs* args) {
            wil::com_ptr<ICoreWebView2Deferral> deferral;
            CHECK_FAILURE(args->GetDeferral(&deferral));

            auto newAppWindow = new AppWindow(L"");
            newAppWindow->m_isPopupWindow = true;
            newAppWindow->m_onWebViewFirstInitialized = [args, deferral, newAppWindow]() {
                CHECK_FAILURE(args->put_NewWindow(newAppWindow->m_webView.get()));
                CHECK_FAILURE(args->put_Handled(TRUE));
                CHECK_FAILURE(deferral->Complete());
            };

            return S_OK;
        })
        .Get(),
    nullptr));

ScenarioWebMessage (.html, .cpp y .h)

Los ScenarioWebMessage archivos muestran cómo el host win32 puede modificar WebView, cómo webview puede modificar el host win32 y cómo webview puede modificarse accediendo a la información desde el host win32. Esto se hace de forma asincrónica.

El ScenarioWebMessage componente se crea al seleccionar el elemento de menú Escenario>de mensajería web . El ScenarioWebMessage componente implementa una aplicación de ejemplo con un elemento de C++ y un elemento HTML+JavaScript, que se comunican entre sí mediante la publicación y recepción asincrónica de mensajes:

En las secciones siguientes se muestra cómo funciona cada función discreta mediante la aplicación WebView2APISample y, a continuación, se explica cómo implementar esta funcionalidad.

En primer lugar, vaya a la aplicación web ScenarioWebMessage dentro de la aplicación de ejemplo:

1. Abra (ejecute) la aplicación WebView2APISample .

2. En el menú Escenario , seleccione Mensajería web.

   WebView muestra una página web titulada Página de ejemplo WebMessage (ScenarioWebMessage.html):

   

Para explorar la ScenarioWebMessage funcionalidad, puede seguir las instrucciones de la página o seguir los pasos que se indican a continuación.

Publicación de mensajes desde el host Win32 en WebView

En los pasos siguientes se muestra cómo el host de Win32 puede modificar un WebView. En este ejemplo, convertirá el texto en azul:

1. Abra la página de ejemplo WebMessage (ScenarioWebMessage.html) como se describió anteriormente.

2. En el menú Script , seleccione Post Web Message JSON (Publicar JSON de mensaje web).

   Aparece un cuadro de diálogo que contiene el código {"SetColor":"blue"} escrito previamente.

3. Haga clic en Aceptar.

   El texto de la sección Mensajes de publicación de la página cambia de negro a azul.

Cómo funciona

1. En ScriptComponent.cpp, la llamada a PostWebMessageAsJson publica la entrada del usuario en la ScenarioMessage.html aplicación web:

   // Prompt the user for some JSON and then post it as a web message.
   void ScriptComponent::SendJsonWebMessage()
   {
      TextInputDialog dialog(
         m_appWindow->GetMainWindow(),
         L"Post Web Message JSON",
         L"Web message JSON:",
         L"Enter the web message as JSON.",
         L"{\"SetColor\":\"blue\"}");
      if (dialog.confirmed)
      {
         m_webView->PostWebMessageAsJson(dialog.input.c_str());
      }
   }
   

2. Dentro de la aplicación web, los agentes de escucha de eventos se usan para recibir y responder al mensaje web. El fragmento de código siguiente es de ScenarioWebMessage.html. El agente de escucha de eventos cambia el color del texto si el argumento es "SetColor":

   window.chrome.webview.addEventListener('message', arg => {
      if ("SetColor" in arg.data) {
         document.getElementById("colorable").style.color = arg.data.SetColor;
      }
   });
   

Recepción de mensajes (desde WebView al host win32)

En los pasos siguientes se muestra cómo WebView puede modificar la aplicación host de Win32 cambiando el título de la aplicación Win32:

1. Abra la página de ejemplo WebMessage (ScenarioWebMessage.html) como se describió anteriormente.

2. Observe el título de la aplicación WebView2APISample , que se muestra en la parte superior izquierda de la ventana situada junto al icono. Inicialmente es WebView2APISample: Microsoft Edge WebView2.

3. En la sección Recepción de mensajes de la página, escriba un nuevo título y, a continuación, haga clic en el botón Enviar .

4. Observe el nuevo título que se muestra en la barra de título de la aplicación WebView2APISample .

Cómo funciona

1. En ScenarioWebMessage.html, window.chrome.webview.postMessage() envía la entrada del usuario a la aplicación host:

   function SetTitleText() {
      let titleText = document.getElementById("title-text");
      window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);
   }
   

2. En ScenarioWebMessage.cpp, usamos add_WebMessageReceived para registrar el controlador de eventos. Cuando recibimos el evento, después de validar la entrada, cambiamos el título de la ventana de la aplicación (m_appWindow):

   // Setup the web message received event handler before navigating to
   // ensure we don't miss any messages.
   CHECK_FAILURE(m_webview->add_WebMessageReceived(
      Microsoft::WRL::Callback<ICoreWebView2WebMessageReceivedEventHandler>(
         [this](ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args)
   {
      wil::unique_cotaskmem_string uri;
      CHECK_FAILURE(args->get_Source(&uri));
   
      // Always validate that the origin of the message is what you expect.
      if (uri.get() != m_sampleUri)
      {
         return S_OK;
      }
      wil::unique_cotaskmem_string messageRaw;
      CHECK_FAILURE(args->TryGetWebMessageAsString(&messageRaw));
      std::wstring message = messageRaw.get();
   
      if (message.compare(0, 13, L"SetTitleText ") == 0)
      {
         m_appWindow->SetTitleText(message.substr(13).c_str());
      }
      return S_OK;
   }).Get(), &m_webMessageReceivedToken));
   

Mensajes de ida y vuelta (desde WebView al host de vuelta a WebView)

En los pasos siguientes se muestra cómo WebView puede obtener información del host de Win32 y modificarse a sí mismo mostrando el tamaño de la aplicación Win32.

1. Abra la página de ejemplo WebMessage (ScenarioWebMessage.html) como se describió anteriormente.

2. En la sección Ida y vuelta de la página, haga clic en el botón GetWindowBounds .

   El cuadro de texto situado debajo del botón muestra los límites de la aplicación WebView2APISample .

Cómo funciona

1. Cuando se hace clic en el botón Obtener límites de ventana , se llama a la GetWindowBounds función de ScenarioWebMessage.html . GetWindowBounds llama a window.chrome.webview.postMessage() para enviar un mensaje a la aplicación host:

   function GetWindowBounds() {
       window.chrome.webview.postMessage("GetWindowBounds");
   }
   

2. En ScenarioWebMessage.cpp, usamos add_WebMessageReceived para registrar el controlador de eventos recibidos. Después de validar la entrada, el controlador de eventos obtiene los límites de ventana de la ventana de la aplicación. PostWebMessageAsJson envía los límites a la aplicación web:

   if (message.compare(L"GetWindowBounds") == 0)
   {
      RECT bounds = m_appWindow->GetWindowBounds();
      std::wstring reply =
         L"{\"WindowBounds\":\"Left:" + std::to_wstring(bounds.left)
         + L"\\nTop:" + std::to_wstring(bounds.top)
         + L"\\nRight:" + std::to_wstring(bounds.right)
         + L"\\nBottom:" + std::to_wstring(bounds.bottom)
         + L"\"}";
      CHECK_FAILURE(sender->PostWebMessageAsJson(reply.c_str()));
   }
   

3. En ScenarioWebMessage.html, un agente de escucha de eventos responde al WindowBounds mensaje y muestra los límites de la ventana:

   window.chrome.webview.addEventListener('message', arg => {
      if ("WindowBounds" in arg.data) {
         document.getElementById("window-bounds").value = arg.data.WindowBounds;
      }
   });
   

Recursos adicionales

• Referencia de api de WebView2
• Introducción a WebView2 en aplicaciones Win32
• Introducción a las API de WebView2
• Fases de adición de API en Acerca de las notas de la versión para el SDK de WebView2.