Introducción: Añadir APIs de Windows a tu aplicación Electron

En esta guía se explica cómo agregar funcionalidades nativas de Windows a una aplicación Electron mediante la CLI de desarrollo de Aplicación de Windows. Aprenderá a llamar a las API de Windows modernas desde la aplicación Electron, probar con la identidad de la aplicación y empaquetar para su distribución.

Lo que construirás

Al final de esta guía, habrás creado una aplicación de Electron que:

  • ✅ Llama a las API modernas de Windows (Windows SDK y SDK de Aplicaciones para Windows)
  • ✅ Usa las capacidades de IA de Windows desde JavaScript (Phi Silica o WinML)
  • ✅ Opcionalmente, usa un complemento nativo cuando una API necesita código nativo.
  • ✅ Se ejecuta con la identidad de la aplicación para probar las API protegidas
  • ✅ Paquetes firmados como MSIX para la distribución

Prerrequisitos

Antes de empezar, asegúrese de que tiene:

  • Windows 11 (Copilot+ PC si usa Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • SDK de .NET v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio con la carga de trabajo de escritorio nativo - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

El proceso

Siga estas guías para configurar la aplicación Electron, llamar a las API de Windows modernas y empaquetarla para su distribución:

1. Configurar el entorno de desarrollo

En primer lugar, configurará el entorno de desarrollo con las herramientas y SDK necesarios. Esto incluye lo siguiente:

  • Creación o configuración de una aplicación Electron
  • Instalación de la CLI de winapp
  • Inicialización de Windows SDK y recursos necesarios
  • Configuración del flujo de trabajo de compilación

Comenzar con la Configuración →

2. Llamada a las API de Windows desde JavaScript

Si ha habilitado enlaces JS durante la instalación, .winapp/bindings/ contiene clases contenedoras generadas .js y declaraciones coincidentes .d.ts para las API de SDK de Aplicaciones para Windows. Importar #winapp/bindings para acceder a todas las clases exportadas. La #winapp/bindings importación de paquetes requiere @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8; los proyectos más antiguos pueden mantener una ruta de acceso relativa al archivo de importación (por ejemplo, require('../.winapp/bindings/index.js') desde src/index.js) o actualizar con npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings.

3. Opcional: Crear un complemento nativo

Omita este paso si los enlaces JS generados cubren la API de SDK de Aplicaciones para Windows que necesita. Cree un complemento nativo solo cuando necesite un límite nativo, como Win32, COM puro, bibliotecas nativas de C/C++ o ensamblados de .NET administrados.

Opción A: Crear un complemento de notificación de C++

Aprenda a crear un complemento de C++ que llame a las API de notificación de SDK de Aplicaciones para Windows. Este es un excelente punto de partida para comprender los complementos nativos antes de profundizar en escenarios más complejos.

Crear un complemento de notificación de C++ →

Opción B: Crear un Phi Silica Addon

Aprenda a crear un complemento de C# que use el modelo phiLice AI para resumir texto en el dispositivo. PhiLice es un modelo de lenguaje pequeño que se ejecuta localmente en dispositivos Windows 11 con NPUs.

Crear un complemento de Phi Silica →

Opción C: Crear un complemento WinML

Obtenga información sobre cómo crear un complemento de C# que use Windows Machine Learning (WinML) para ejecutar modelos ONNX personalizados para la clasificación de imágenes, la detección de objetos y mucho más.

Creación de un complemento winML →

4. Empaquetado para distribución

Por último, empaquetará la aplicación como MSIX para su distribución. Esto incluye lo siguiente:

  • Preparación de tu aplicación para producción
  • Creación y firma de un paquete MSIX
  • Prueba del paquete instalado
  • Descripción de las opciones de distribución

Empaquetar la aplicación →

Navegación rápida

Fase Guía Temas que se abordarán
1️⃣ Setup Instalación de herramientas, inicialización de SDK, configuración de la canalización de compilación
2️⃣ Vinculaciones JS para notificaciones Mostrar una notificación de SDK de Aplicaciones para Windows directamente desde JavaScript
2️⃣ enlaces JS de las API de Windows Llame a una API de SDK de Aplicaciones para Windows y, a continuación, extienda los enlaces a las API del SDK de Windows.
2️⃣ Vinculaciones de JS para Phi Silica Llamada al modelo de lenguaje local directamente desde JavaScript
2️⃣ Enlaces JS de WinML Registro de proveedores de ejecución de WinML y ejecución de ONNX Runtime desde JavaScript
3️⃣ Complemento de notificación de C++ Crear un complemento de C++, llamar a APIs de notificación, probar con el identificador de depuración
3️⃣ Adición de Sílice phi Creación de una alternativa de complemento de C# para las API de IA
3️⃣ Complemento WinML Creación de una alternativa de complemento de C# para WinML
4️⃣ Empaquetado Compilación de la aplicación de producción, creación de MSIX, distribución

Recursos adicionales

Obtener ayuda

  • Last updated on