Introdução: adicionando APIs de Windows ao aplicativo Electron

Este guia explica como adicionar recursos nativos de Windows a um aplicativo Electron usando a CLI de Desenvolvimento do aplicativo do Windows. Você aprenderá a chamar APIs de Windows modernas de seu aplicativo Electron, testar com a identidade do aplicativo e empacotar para distribuição.

O que você construirá

Ao final deste guia, você terá um aplicativo Electron que:

  • ✅ Chama APIs de Windows modernas (Windows SDK e SDK do Aplicativo Windows)
  • ✅ Usa os recursos de IA do Windows no JavaScript (Phi Silica ou WinML)
  • ✅ Opcionalmente, usa um complemento nativo quando uma API precisa de código nativo
  • ✅ É executado com a identidade do aplicativo para testar APIs protegidas
  • ✅ Pacotes como um MSIX assinado para distribuição

Pré-requisitos

Antes de começar, verifique se você tem:

  • Windows 11 (Pc Copilot+ se estiver usando Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • SDK do .NET v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio com a Carga de Trabalho para Aplicativos Desktop Nativos - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

O processo

Siga estes guias para configurar seu aplicativo Electron, chamar APIs de Windows modernas e empacotá-lo para distribuição:

1. Configurando o ambiente de desenvolvimento

Primeiro, você configurará seu ambiente de desenvolvimento com as ferramentas e os SDKs necessários. Isso inclui:

  • Criando ou configurando um aplicativo Electron
  • Instalando a CLI do winapp
  • Inicializando Windows SDKs e ativos necessários
  • Configurando o pipeline de build

Comece a Configuração →

2. Usar APIs do Windows a partir do JavaScript

Se você habilitou associações JS durante a instalação, .winapp/bindings/ contém classes wrapper geradas .js e declarações correspondentes .d.ts para APIs de SDK do Aplicativo Windows. Importe #winapp/bindings para acessar todas as classes exportadas. A importação do pacote #winapp/bindings requer @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8; projetos mais antigos podem manter um caminho relativo ao arquivo importador (por exemplo, require('../.winapp/bindings/index.js') a partir de src/index.js) ou fazer upgrade com npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings.

3. Opcional: criar um complemento nativo

Ignore esta etapa se as associações JS geradas abrangem a API de SDK do Aplicativo Windows necessária. Crie um complemento nativo somente quando precisar de um limite nativo, como Win32, COM puro, bibliotecas C/C++ nativas ou assemblies .NET gerenciados.

Opção A: Criando um complemento de notificação do C++

Saiba como criar um complemento C++ que chama as APIs de notificação SDK do Aplicativo Windows. Este é um ótimo ponto de partida para entender os complementos nativos antes de se aprofundar em cenários mais complexos.

Criar um complemento de notificação do C++ →

Opção B: Criando um addon Phi Silica

Saiba como criar um complemento C# que usa o modelo de IA do Phi Silica para resumir o texto no dispositivo. O Phi Silica é um modelo de linguagem pequeno que é executado localmente em dispositivos Windows 11 com NPUs.

Criar um complemento Phi Silica →

Opção C: Criando um complemento WinML

Saiba como criar um complemento C# que usa Windows Machine Learning (WinML) para executar modelos ONNX personalizados para classificação de imagem, detecção de objetos e muito mais.

Criar um addon WinML →

4. Empacotamento para Distribuição

Por fim, você empacotará seu aplicativo como um MSIX para distribuição. Isso inclui:

  • Compilando seu aplicativo para produção
  • Criando e assinando um pacote MSIX
  • Testando o pacote instalado
  • Noções básicas sobre as opções de distribuição

Empacotar seu aplicativo →

Navegação Rápida

Phase Guide O que você vai aprender
1️⃣ Setup Instalar ferramentas, inicializar SDKs, configurar o pipeline de build
2️⃣ Vínculos JS de notificação Mostrar uma notificação de SDK do Aplicativo Windows diretamente do JavaScript
2️⃣ vinculações JS para APIs do Windows Chame uma API de SDK do Aplicativo Windows e, em seguida, estenda as associações para apIs do SDK Windows
2️⃣ Bindings JS do Phi Silica Chamar o modelo de idioma local diretamente do JavaScript
2️⃣ Vinculações JS do WinML Registrar provedores de execução do WinML e executar o ONNX Runtime do JavaScript
3️⃣ Complemento de notificação do C++ Criar complemento em C++, utilizar APIs de notificação, testar com identidade de depuração
3️⃣ Complemento Phi Silica Criar uma alternativa de complemento em C# para APIs de IA
3️⃣ Complemento WinML Criar uma alternativa de complemento em C# para WinML
4️⃣ Embalagem Criar aplicativo de produção, criar MSIX, distribuir

Recursos adicionais

Obter Ajuda

  • Last updated on