Primi Passi: Aggiungere le API di Windows alla tua app Electron

Questa guida illustra come aggiungere funzionalità native di Windows a un'applicazione Electron usando l'interfaccia della riga di comando di sviluppo app di Windows. Si apprenderà come chiamare le API Windows moderne dall'app Electron, testare con l'identità dell'app e creare un pacchetto per la distribuzione.

Cosa costruirai

Al termine di questa guida, si avrà un'app Electron che:

  • ✅ Chiama le moderne API di Windows (Windows SDK e SDK per app di Windows)
  • ✅Usa le funzionalità di intelligenza artificiale Windows da JavaScript (Phi Silica o WinML)
  • ✅ Facoltativamente, usa un componente aggiuntivo nativo quando un'API richiede codice nativo
  • ✅ Viene eseguito con l'identità dell'app per testare le API protette
  • ✅ Pacchetti come MSIX con firma digitale per la distribuzione

Prerequisiti

Prima di iniziare, assicurarsi di avere:

  • Windows 11 (Copilot+ PC se si utilizza Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio con il set di strumenti Desktop nativo - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Processo

Seguire queste guide per configurare l'app Electron, chiamare API Windows moderne e crearne il pacchetto per la distribuzione:

1. Configurazione dell'ambiente di sviluppo

Prima di tutto, si configurerà l'ambiente di sviluppo con gli strumenti e gli SDK necessari. Sono inclusi:

  • Creazione o configurazione di un'app Electron
  • Installazione della CLI di winapp
  • Inizializzazione Windows SDK e asset necessari
  • Configurazione della pipeline di compilazione

Introduzione all'installazione →

2. Chiamare le API di Windows da JavaScript

Se hai abilitato i binding JS durante la configurazione, .winapp/bindings/ contiene classi wrapper .js generate e le dichiarazioni .d.ts corrispondenti per le API di SDK per app di Windows. Importa #winapp/bindings per accedere a tutte le classi esportate. L'importazione #winapp/bindings del pacchetto richiede @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8; i progetti meno recenti possono mantenere un percorso relativo al file di importazione (ad esempio, require('../.winapp/bindings/index.js') da src/index.js) o eseguire l'aggiornamento con npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings.

3. Facoltativo: Creare un componente aggiuntivo nativo

Ignorare questo passaggio se le associazioni JS generate coprono l'API SDK per app di Windows necessaria. Creare un componente aggiuntivo nativo solo quando è necessario un limite nativo, ad esempio Win32, pure COM, librerie C/C++ native o assembly di .NET gestiti.

Opzione A: Creazione di un componente aggiuntivo di notifica C++

Informazioni su come creare un componente aggiuntivo C++ che chiama le API di notifica SDK per app di Windows. Questo è un ottimo punto di partenza per comprendere i componenti aggiuntivi nativi prima di approfondire scenari più complessi.

Creare un componente aggiuntivo di notifica C++ →

Opzione B: Creazione di un componente aggiuntivo Phi Silica

Informazioni su come creare un componente aggiuntivo C# che usa il modello di intelligenza artificiale Phi Silica per riepilogare il testo sul dispositivo. Phi Silica è un piccolo modello linguistico che viene eseguito localmente sui dispositivi Windows 11 con unità di elaborazione neurale.

Creare un Add-on Phi Silica →

Opzione C: Creazione di un componente aggiuntivo WinML

Informazioni su come creare un componente aggiuntivo C# che usa Windows Machine Learning (WinML) per eseguire modelli ONNX personalizzati per la classificazione delle immagini, il rilevamento degli oggetti e altro ancora.

Creare un componente aggiuntivo WinML →

4. Creazione di pacchetti per la distribuzione

Infine, impacchetterai la tua app come MSIX per distribuirla. Sono inclusi:

  • Preparazione dell'app per il rilascio
  • Creazione e firma di un pacchetto MSIX
  • Test del pacchetto installato
  • Informazioni sulle opzioni di distribuzione

Pacchettizza la tua app →

Navigazione rapida

Fase Guida Cosa Imparerai
1️⃣ Setup Installare gli strumenti, inizializzare gli SDK, configurare la pipeline di compilazione
2️⃣ Binding JS di notifica Visualizzare una notifica di SDK per app di Windows direttamente da JavaScript
2️⃣ binding JavaScript per le API di Windows Chiamare un'API SDK per app di Windows, quindi estendere le associazioni alle API Windows SDK
2️⃣ Binding JS di Phi Silica Chiamare il modello di linguaggio locale direttamente da JavaScript
2️⃣ Binding JS di WinML Registrare i provider di esecuzione WinML ed eseguire ONNX Runtime da JavaScript
3️⃣ Componente aggiuntivo notifiche C++ Creare un componente aggiuntivo C++, richiamare le API di notifica, testare con l'identità di debug
3️⃣ Phi Silica Addon Creare un'alternativa per l'addon C# per le API di intelligenza artificiale
3️⃣ Componente aggiuntivo WinML Creare un'alternativa per il componente aggiuntivo C# per WinML
4️⃣ Imballaggio Creare un'app di produzione, creare MSIX, distribuire

Risorse aggiuntive

Ottenere informazioni

  • Last updated on