Llamada al código WinRT del lado nativo desde el código del lado web

El código JavaScript del lado web puede acceder a los métodos y propiedades de WinRT del lado nativo con la ayuda de la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS). La herramienta wv2winrt genera los archivos de código necesarios para el código JavaScript y permite el uso de métodos y propiedades de cualquier API de WinRT, entre las que se incluyen:

• Las API de WinRT de la aplicación host WebView2.
• API de Windows WinRT.
• API de WinRT de terceros.

Para obtener más información acerca de por qué querría que el código JavaScript del lado web acceda a los métodos y propiedades de la aplicación host de WinRT, vea la introducción de Llamar al código del lado nativo del código del lado web.

Por qué WinRT y .NET usan enfoques diferentes

Este artículo es para las API de WinRT WebView2, no para las API de .NET WebView2. El código de C# indicado en este artículo se compilará para las API de .NET WebView2, pero no se ejecutará. Las llamadas AddHostObjectToScript con el código de C# de este artículo para las API de .NET WebView2 producirían un mensaje de error.

La herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS) es necesaria al proyectar objetos WinRT, ya que WinRT no admite IDispatch ningún otro mecanismo para inspeccionar e interactuar dinámicamente con objetos WinRT, que admiten las plataformas Win32 y .NET de WebView2. Para el uso de .NET de AddHostObjectToScript, consulte Llamar al código del lado nativo desde el código del lado web en lugar de este artículo.

Diferencias de configuración para WinUI 3 vs. WinUI 2

Si la aplicación WebView2 de WinRT tiene como destino WinUI 3 (SDK de Aplicaciones para Windows) en lugar de WinUI 2 (UWP), esta es una introducción a los pasos específicos de WinUI 3 que se proporcionan más adelante:

• En una aplicación no empaquetada, tienes que realizar pasos adicionales que se encuentran en el artículo "Mejorar las aplicaciones de escritorio no empaquetadas con componentes de Windows Runtime".

• Agregar WinRTAdapter a CsWinRTIncludes.

• Para las aplicaciones WinUI 3 (SDK de Windows App), el proyecto de aplicación principal tiene una referencia a WinAppSDK, que incluye directamente su propia copia de los archivos SDK de WebView2, por lo que no puede incluir una referencia al SDK de WebView2 en el proyecto de aplicación principal sin generar mensajes de error.

• No es necesario que la versión del adaptador del proyecto coincida.

• Después de instalar las opciones "predeterminadas" para Visual Studio 2022 Community Edition, en Instalador Visual Studio, haga clic en la tarjeta .NET y, a la derecha, seleccione la casilla SDK de Aplicaciones para Windows C# Templates.

• Si sigue sin aparecer la plantilla de proyecto correcta: en el instalador Visual Studio, haz clic en la tarjeta UWP para seleccionarla, selecciona la casilla de verificación Herramientas de C++ v143 a la derecha y, a continuación, haz clic en el botón Modificar.

Estrategia y objetivo final de este ejemplo

Estrategia

Este artículo le guiará por los siguientes pasos principales:

1. Cree un proyecto WinRTAdapter para la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS).

2. En este ejemplo, especifique las siguientes API del lado host para la proyección:

   • Windows.System.UserProfile Namespace
   • Clase Windows.Globalization.Language

3. Ejecute la herramienta wv2winrt para generar código fuente de C++/WinRT para los espacios de nombres o clases seleccionados.

4. Llame a AddHostObjectToScript en el proyecto principal de WinUI.

5. Llame a métodos y propiedades en el objeto host desde el código JavaScript del lado web (o desde la consola de DevTools).

Objetivo final

En primer lugar, seleccionaremos algunas API de WinRT a las que nos interesa llamar desde código JavaScript. En este ejemplo, usaremos la clase WinRT Language , que se encuentra en el espacio de Windows.Globalization nombres, para las aplicaciones UWP de Windows. La clase Windows.Globalization.Language permite obtener información de idioma del SO nativo del cliente.

En la aplicación host de WebView2, el código JavaScript del lado web puede acceder a métodos y propiedades en el Language objeto que está en el código del lado nativo.

Obtener acceso a las API proyectadas a través de la consola de DevTools

Al final de este tutorial de ejemplo, usará la consola de Microsoft Edge DevTools para probar a leer la propiedad de host displayName de la Language clase:

const Windows = chrome.webview.hostObjects.sync.Windows;
(new Windows.Globalization.Language("en-US")).displayName;

A continuación, la consola de DevTools mostrará English (Estados Unidos), u otro nombre para mostrar en otro idioma, lo que demuestra que ha llamado al código del lado nativo desde el código JavaScript del lado web:

De forma similar, puede tener acceso a los miembros del espacio de nombres Windows.System.UserProfile .

Acceder a las API proyectadas mediante archivos de código fuente

De forma similar, en los archivos de código fuente, en lugar de en la consola de DevTools, puede obtener acceso al objeto host proyectado. En primer lugar, ejecute el código de configuración del script:

// early in setup code:
const Windows = chrome.webview.hostObjects.sync.Windows;

Luego, en el cuerpo principal del código, agregue llamadas a objetos proyectados, como las siguientes:

(new Windows.Globalization.Language("en-US")).displayName;

De forma similar, puede tener acceso a los miembros del espacio de nombres Windows.System.UserProfile .

Comencemos

Paso 1: Crear u obtener un proyecto WebView2 básico

Paso 2: Agregar un proyecto WinRTAdapter para la herramienta wv2winrt

A continuación, cree un proyecto WinRTAdapter para la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS). Este proyecto crea una biblioteca a partir del código que se genera al ejecutar la herramienta. El código generado permite que las API de WinRT se expongan en el control WebView2.

Agregue un proyecto para la herramienta wv2winrt de la siguiente manera:

1. En Visual Studio, abra el proyecto WinUI del paso anterior.

2. En el Explorador de soluciones, haga clic con el botón derecho en la solución (no en el proyecto) y seleccione Agregar>nuevo proyecto. Se abre el cuadro de diálogo Agregar un nuevo proyecto .

3. En el cuadro de texto Buscar, escribe Componente de Windows Runtime (C++/WinRT).

   Enfoque alternativo: Si no agrega un proyecto mediante la plantilla de proyecto para el componente de Windows Runtime (C++/WinRT) como se describe en los pasos numerados siguientes, deberá instalar en su lugar la carga de trabajo de desarrollo de la Plataforma universal de Windows, siguiendo los pasos descritos en Aplicaciones para UWP Introducción a C>++/WinRT.

4. Selecciona la tarjeta de componente de Windows Runtime (C++/WinRT) y, a continuación, haz clic en el botón Siguiente:

   

   Nota: Asegúrese de que la plantilla incluya "C++/WinRT" en su nombre. Si esta plantilla no aparece, instale la carga de trabajo de desarrollo de la Plataforma universal de Windows desde el instalador Visual Studio. Si usa Visual Studio 2019 y sigue sin encontrar la plantilla, instale las plantillas de C++/WinRT y el visualizador para la extensión VS2019 desde Extensiones > de Visual Studio > Administrar extensiones.

   Se abre la ventana Configure su nuevo proyecto .

Configurar y crear el proyecto

La herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS) se ejecutará en este proyecto WinRTAdapter . En un paso a continuación, generará código para las clases seleccionadas en este proyecto.

Paso 3: Instalar la biblioteca de implementación de Windows para el proyecto WinRTAdapter

En el proyecto WinRTAdapter, instale la biblioteca de implementación de Windows (WIL) de la siguiente manera:

WIL ahora está instalado para el proyecto WinRTAdapter . La Biblioteca de implementación de Windows (WIL) es una biblioteca de C++ de solo encabezado para facilitar el uso de codificación COM para Windows. Proporciona interfaces C++ legibles y con seguridad de tipos para patrones de codificación COM de Windows.

Paso 4: Instalar el SDK de versión preliminar de WebView2 para el proyecto WinRTAdapter

En el proyecto WinRTAdapter, instale también una versión preliminar del SDK de WebView2, como se indica a continuación:

El SDK de versión preliminar de WebView2 ya está instalado para el proyecto WinRTAdapter .

Paso 5: Instalar el SDK de versión preliminar de WebView2 (solo WinUI 2)

Paso 6: Generar código fuente para las API de host seleccionadas

A continuación, configure la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS) para incorporar las clases de WinRT que desea usar. Esto genera archivos fuente que luego se compilarán. La generación de código para estas API permite que el código JavaScript del lado web llame a estas API.

En los pasos de ejemplo siguientes, especificaremos dos Windows espacios de nombres y la herramienta wv2winrt generará código fuente solo para las API de esos espacios de nombres:

• Windows.System.UserProfile Namespace
• Clase Windows.Globalization.Language

Más adelante, cuando se esté ejecutando la aplicación de ejemplo, llamará a estas API desde la consola de DevTools para demostrar que estas API especificadas del lado host se pueden llamar desde código del lado web.

Especifique el espacio de nombres y la clase de la siguiente manera:

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto WinRTAdapter y, a continuación, seleccione Propiedades. Se abre el cuadro de diálogo Páginas de propiedades de WinRTAdapter .

2. A la izquierda, expanda y seleccione Propiedades> comunesWebView2.

3. Establezca Usar API de WinRT de WebView2 en No. Esto se hace para que el SDK de WebView2 no copie el componente WinRT de WebView2 en la salida del proyecto. Este proyecto WinRTAdapter no llama a ninguna API de WinRT de WebView2, por lo que no necesita el componente WinRT.

4. Establezca Usar la herramienta wv2winrt en Sí.

5. Establezca Usar mayúsculas y minúsculas de JavaScript en Sí.

6. En la fila Incluir filtros , haga clic en la columna de la derecha, haga clic en el menú desplegable de esa celda y, a continuación, haga clic en Editar. Se abre el cuadro de diálogo Incluir filtros .

7. En el cuadro de texto situado más arriba, pegue las siguientes cadenas en líneas separadas, sin espacios en blanco iniciales ni finales:

   Windows.System.UserProfile
   Windows.Globalization.Language
   

   

   Debe especificar el nombre completo de los espacios de nombres o clases, como se muestra arriba.

8. Haga clic en el botón Aceptar para cerrar el cuadro de diálogo Incluir filtros .

9. Asegúrese de que el cuadro de diálogo Páginas de propiedades de WinRTAdapter tenga el siguiente aspecto para este tutorial:

   

10. Haga clic en el botón Aceptar para cerrar el cuadro de diálogo Páginas de propiedades .

11. Seleccione Guardar archivo> todo (Ctrl+Mayús+S).

Agregar una referencia que apunte al proyecto de adaptador

A continuación, agregue una referencia en el proyecto principal, señalando el proyecto del adaptador.

Generar el código de API

A continuación, genere el código API:

1. Haga clic con el botón derecho en el proyecto WinRTAdapter y, a continuación, seleccione Compilar.

   El código fuente se genera para los espacios de nombres o clases que especificó en el cuadro de diálogo Incluir filtros de la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS):

   • Espacio de nombres Windows.System.UserProfile
   • Clase Windows.Globalization.Language

2. Una vez completada la compilación, seleccione Archivo>Guardar todo (Ctrl+Mayús+S).

<ItemGroup Condition="'$(WebView2UseDispatchAdapter)' == 'true'">
 <Reference Include="$(WebView2SDKPath)lib\Microsoft.Web.WebView2.Core.winmd">
   <!-- wv2winrt needs Dispatch Adapter metadata to generate code -->
 </Reference>
</ItemGroup>

Paso 7: Actualizar el marco de destino (solo WinUI 3)

Paso 8: Agregar el objeto host en el proyecto principal

A continuación, pase el objeto WinRT del lado nativo de la aplicación host al lado web de la aplicación host. Para ello, agregue un InitializeWebView2Async método que llame a AddHostObjectToScript, como se indica a continuación:

El código del lado web de la aplicación host (y la consola DevTools) ahora pueden llamar a métodos y propiedades de los espacios de nombres o clases especificados del objeto host.

Paso 9: Llamar a métodos y propiedades en el objeto host desde el JavaScript del lado web

Obtener acceso a las API proyectadas a través de la consola de DevTools

A continuación, use la consola de DevTools para demostrar que el código del lado web puede llamar a las API del lado host que se especificaron en la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS):

• Windows.System.UserProfile Namespace
• Clase Windows.Globalization.Language

1. Si la aplicación no se está ejecutando, en Visual Studio, presione F5 para ejecutar la aplicación de ejemplo.

2. Haga clic en la parte principal de la ventana de la aplicación de ejemplo de WebView2 para darle el foco y, a continuación, presione Ctrl+Mayús+I para abrir Microsoft Edge DevTools. O bien, haga clic con el botón derecho en la página y seleccione Inspeccionar.

   Se abrirá la ventana Microsoft Edge DevTools.

3. Si no se muestra la ventana Microsoft Edge DevTools, presione Alt+Tab para mostrarla.

4. En la ventana DevTools , seleccione la pestaña Consola .

5. Haz clic en el botón Borrar consola () o haz clic con el botón derecho en la consola y selecciona Borrar consola. Es posible que los mensajes aparezcan periódicamente en la Consola.

6. En la consola de DevTools, pegue el siguiente código de clase Windows.Globalization.Language y luego presione Entrar:

   const Windows = chrome.webview.hostObjects.sync.Windows;
   (new Windows.Globalization.Language("en-US")).displayName;
   

   La Consola genera una cadena de nombre de idioma, como English (Estados Unidos), que demuestra que el código del lado host (lado nativo) de la aplicación se puede llamar desde código JavaScript del lado web:

   

7. Intente omitir los paréntesis. En la consola de DevTools, escriba la siguiente instrucción:

   new Windows.Globalization.Language("en-US").displayName;
   

   La Consola genera una cadena de nombre de idioma, como English (Estados Unidos).

   De forma similar, puede tener acceso a los miembros del espacio de nombres Windows.System.UserProfile .

8. Cierre la ventana DevTools.

9. Cierre la aplicación.

Acceder a las API proyectadas mediante archivos de código fuente

Anteriormente, usamos la consola de DevTools para ejecutar instrucciones de JavaScript que acceden al objeto host proyectado. De forma similar, puede tener acceso al objeto host proyectado desde los archivos de código fuente. Para ello, primero ejecute el código de configuración del script:

// early in setup code:
const Windows = chrome.webview.hostObjects.sync.Windows;

Luego, en el cuerpo principal del código, agregue llamadas a objetos proyectados, como las siguientes:

(new Windows.Globalization.Language("en-US")).displayName;

De manera similar, puede acceder a Windows.System.UserProfile los miembros de API.

Este es el final de los pasos del tutorial. Las secciones siguientes son información general sobre las aplicaciones WebView2 WinRT.

Componentes de WinRT personalizados (de terceros)

La herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS) admite componentes WinRT personalizados de terceros, además de las API WinRT del sistema operativo propio.

Para usar componentes personalizados (de terceros) de WinRT con la herramienta wv2winrt , además de los pasos anteriores, siga los pasos siguientes:

1. Agregue un tercer proyecto (que no sea la aplicación principal y el proyecto WinRTAdapter) a la solución de Visual Studio que implementa la clase WinRT.

2. Haga que el proyecto WinRTAdapter "Agregue una referencia" al nuevo tercer proyecto que contiene la clase WinRT.

3. Actualice el filtro Incluir del proyecto WinRTAdapter en las propiedades para incluir también su nueva clase.

4. Agregue una línea adicional para InitializeWebView2Async agregar el espacio de nombres de la clase winrt:

   WebView2.CoreWebView2.AddHostObjectToScript("MyCustomNamespace", dispatchAdapter.WrapNamedObject("MyCustomNamespace", dispatchAdapter));

5. Para facilitar la llamada a métodos desde la Web, opcionalmente, agregue el proxy de sincronización del espacio de nombres como un objeto global en el script. Por ejemplo:

   window.MyCustomNamespace = chrome.webview.hostObjects.sync.MyCustomNamespace;

Para obtener un ejemplo de esto, consulte el siguiente ejemplo de WebView2:

• uwp-wv2winrt-custom-csharp-winrt - Un ejemplo, como una rama.

Métodos WinRT asincrónicos

Siguiendo los pasos de la guía anterior, debería poder usar proxies sincrónicos. Para las llamadas a métodos asincrónicos, deberá usar chrome.webview.hostObjects.options.forceAsyncMethodMatches.

La forceAsyncMethodMatches propiedad es una matriz de Regex, donde si alguna Regex coincide con el nombre de un método en un proxy de sincronización, el método se ejecutará de forma asincrónica en su lugar. Si se establece en [/Async$/] se hará coincidir con cualquier método que termine con el sufijo Async. Entonces, las llamadas de método coincidentes funcionan como un método en un proxy asincrónico y devuelven una promesa que puede esperar.

Ejemplo:

const Windows = chrome.webview.hostObjects.sync.Windows;
chrome.webview.hostObjects.options.forceAsyncMethodMatches = [/Async$/];

let result = await Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri('https://contoso.com/'));

Para obtener más información, vea la fila en el forceAsyncMethodMatchesmétodo CoreWebView2.AddHostObjectToScript.

Suscripción a eventos de WinRT

Los eventos de WinRT también se exponen a través de los proxies de script. Puede agregar y quitar controladores de eventos de WinRT de instancia y eventos estáticos de WinRT utilizando los addEventListener(string eventName, function handler) métodos and removeEventListener(string eventName, function handler) .

Estos métodos funcionan de forma similar a los métodos DOM del mismo nombre. Llamada addEventListener con un nombre de cadena del evento WinRT al que quieres suscribirte como primer parámetro y una devolución de llamada de función a la que se llamará cada vez que se genere el evento. Si se llama removeEventListener con los mismos parámetros, se cancelará la suscripción de ese evento. Por ejemplo:

const Windows = chrome.webview.hostObjects.sync.Windows;
const coreApplication = Windows.ApplicationModel.Core.CoreApplication;
const coreApplicationView = coreApplication.getCurrentView();
const titleBar = coreApplicationView.titleBar;
titleBar.addEventListener('IsVisibleChanged', () => {
    console.log('titlebar visibility changed to: ' + titleBar.isVisible);
});

Para un evento WinRT que proporciona argumentos de evento, estos se proporcionan como el primer parámetro para la función de controlador de eventos. Por ejemplo, el evento tiene IMapChangedEventArgs<string, object> un Windows.Foundation.Collections.PropertySet.MapChanged objeto arg de evento y ese objeto se proporciona como parámetro para la devolución de llamada.

const Windows = chrome.webview.hostObjects.sync.Windows;
const propertySet = new Windows.Foundation.Collections.PropertySet();
propertySet.addEventListener('MapChanged', eventArgs => {
    const key = eventArgs.key;
    const collectionChange = eventArgs.collectionChange;
    // ...
});

El objeto args del evento también tendrá las siguientes propiedades:

Hacer que los proxies de JavaScript AddHostObjectToScript actúen de forma más parecida a otras API de JavaScript

AddHostObjectToScript usa de forma predeterminada proxies asincrónicos y detallados, pero puede hacer que los proxies de AddHostObjectToScript JavaScript actúen de forma más parecida a otras API de JavaScript. Para obtener más información sobre AddHostObjectToScript su comportamiento predeterminado, consulte AddHostObjectToScript. Además, si va a migrar una aplicación host desde JavaScript, la proyección de WinRT en JavaScript, aplicaciones para UWP o desde WebView basado en EdgeHTML, es posible que desee usar el siguiente enfoque para que coincida mejor con ese comportamiento anterior.

Para que los AddHostObjectToScript proxies de JavaScript actúen de forma más parecida a otras API de JavaScript, establezca las siguientes propiedades:

• chrome.webview.hostObjects.option.defaultSyncProxy - Los proxies pueden ser asincrónicos o sincrónicos. Normalmente sabemos, cuando llamamos a un método en un proxy síncrono, que el resultado también debe ser un proxy sincrónico. Pero en algunos casos, perdemos ese contexto, como cuando proporcionamos una referencia a una función al código nativo, y luego código nativo llama posteriormente a esa función. En estos casos, el proxy será asincrónico, a menos que se establezca esta propiedad.

• chrome.webview.hostObjects.options.forceAsyncMethodMatches - Esta es una matriz de expresiones regulares. Si llama a un método en un proxy sincrónico, la llamada al método se realizará de forma asincrónica si el nombre del método coincide con una cadena o expresión regular que se encuentra en esta matriz. Establecer este valor en [/Async$/] hará que cualquier método que termine siendo Async una llamada a un método asincrónico. Si un método asincrónico no coincide aquí y no se ve obligado a ser asincrónico, el método se invocará de forma sincrónica, bloqueando la ejecución del JavaScript de llamada y, a continuación, devolviendo la resolución de la promesa, en lugar de devolver una promesa.

• chrome.webview.hostObjects.options.ignoreMemberNotFoundError - Si intenta obtener el valor de una propiedad de un proxy y la propiedad no existe en la clase nativa correspondiente, obtendrá una excepción, a menos que establezca esta propiedad en true, en cuyo caso el comportamiento coincidirá con el comportamiento de proyección de WinRT de Chakra (y el comportamiento general de JavaScript) y regresará undefined sin ningún error.

La proyección de WinRT de Chakra coloca los espacios de nombres de WinRT directamente en el objeto raíz. En contraste:

• AddHostObjectToScript Coloca servidores proxy raíz asincrónicos en chrome.webview.hostObjects.
• AddHostObjectToScript Coloca los servidores proxy raíz de sincronización en chrome.webview.hostObjects.sync.

Para acceder a los proxies raíz donde esperaría el código de proyección WinRT de Chakra, puede asignar las ubicaciones del espacio de nombres WinRT del proxy raíz al objeto raíz. Por ejemplo:

window.Windows = chrome.webview.hostObjects.sync.Windows;

Para asegurarse de que el JavaScript que configura todo esto se ejecute antes que nada, puede agregar la instrucción anterior a JavaScript o puede decirle a WebView2 que inserte la instrucción anterior antes de ejecutar cualquier otro script, mediante el CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync método.

En el ejemplo siguiente se demuestran las técnicas anteriores:

webview.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
            "(() => {" +
                    "if (chrome && chrome.webview) {" +
                        "console.log('Setting up WinRT projection options');" +
                        "chrome.webview.hostObjects.options.defaultSyncProxy = true;" +
                        "chrome.webview.hostObjects.options.forceAsyncMethodMatches = [/Async$/,/AsyncWithSpeller$/];" +
                        "chrome.webview.hostObjects.options.ignoreMemberNotFoundError = true;"  +
                        "window.Windows = chrome.webview.hostObjects.sync.Windows;" +
                    "}" +
                "})();");

webView->CoreWebView2->AddScriptToExecuteOnDocumentCreatedAsync(
            LR"(
                (() => {
                    if (chrome && chrome.webview) {
                        console.log('Setting up WinRT projection options');
                        chrome.webview.hostObjects.options.defaultSyncProxy = true;
                        chrome.webview.hostObjects.options.forceAsyncMethodMatches = [/Async$/,/AsyncWithSpeller$/];
                        chrome.webview.hostObjects.options.ignoreMemberNotFoundError = true;
                        window.Windows = chrome.webview.hostObjects.sync.Windows;
                    }
                })();
            )"));

Obtener información sobre las propiedades de WebView2

La información sobre las propiedades de WebView2 está disponible en dos lugares:

• Las páginas de propiedades del proyecto WinRTAdapter.
• wv2winrt.exe ayuda de la línea de comandos. Esta es la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS).

Páginas de propiedades del proyecto WinRTAdapter

En las páginas de propiedades del proyecto WinRTAdapter, para obtener ayuda sobre una propiedad, haga clic en una fila de propiedades. La ayuda se muestra en la parte inferior del cuadro de diálogo:

Ayuda de línea de comandos para propiedades de wv2winrt.exe

La ayuda de la línea de comandos proporciona wv2winrt.exe información sobre los parámetros de la herramienta wv2winrt (la herramienta de proyección WebView2 WinRT JS). Por ejemplo:

Vea también

Tutorial y ejemplo:

• Introducción a las aplicaciones de WinUI 2 (UWP): tutorial: pasos para crear una aplicación con WebView2 mediante una plantilla de proyecto.
• Aplicación de ejemplo de WinUI 2 (UWP) - Ejemplo: pasos para descargar, compilar, ejecutar y actualizar el ejemplo.

Referencia de la API:

• WinRT: Método CoreWebView2.AddHostObjectToScript
• Win32: Método ICoreWebView2::AddHostObjectToScript
• .NET: Método CoreWebView2.AddHostObjectToScript

Artículo equivalente en .NET:

• Llamar al código del lado nativo desde el código del lado web : cubre Win32/C++ y también cubre algunos aspectos de .NET/C# dentro de fotogramas.