Erste Schritte: Hinzufügen von Windows-APIs zu Ihrer Elektronen-App

Dieser Leitfaden führt Sie durch das Hinzufügen Windows nativer Funktionen zu einer Electron-Anwendung mithilfe der Windows-App Development CLI. Sie erfahren, wie Sie moderne Windows-APIs aus Ihrer Electron-App aufrufen, mit App-Identität testen und für die Verteilung verpacken.

Was Sie erstellen werden

Am Ende dieses Leitfadens haben Sie eine Electron-App, die:

• ✅ Ruft moderne Windows-APIs auf (Windows SDK und Windows App SDK)
• ✅Verwendet Windows KI-Funktionen aus JavaScript (Phi Silica oder WinML)
• ✅ Optional verwendet ein systemeigenes Addon, wenn eine API nativen Code benötigt.
• ✅ Wird mit App-Identität zum Testen geschützter APIs ausgeführt
• ✅ Pakete als signierte MSIX für die Verteilung

Voraussetzungen

Bevor Sie beginnen, stellen Sie folgendes sicher:

• Windows 11 (Copilot+ PC bei Verwendung von Phi-Silikate)
• Node.js - winget install OpenJS.NodeJS --source winget
• .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
• Visual Studio mit der nativen Desktop-Workload - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Der Prozess

Führen Sie die folgenden Anleitungen aus, um Ihre Electron-App einzurichten, moderne Windows-APIs aufzurufen und sie für die Verteilung zu verpacken:

1. Einrichten der Entwicklungsumgebung

Zunächst richten Sie Ihre Entwicklungsumgebung mit den erforderlichen Tools und SDKs ein. Dazu gehören:

• Erstellen oder Konfigurieren einer Electron-App
• Winapp CLI installieren
• Initialisieren von Windows SDKs und benötigten Ressourcen
• Einrichten der Build-Pipeline

Erste Schritte mit der Einrichtung →

2. Aufrufen von Windows-APIs aus JavaScript

Wenn Sie JS-Bindungen während des Setups aktiviert haben, .winapp/bindings/ enthält generierte .js Wrapperklassen und übereinstimmende .d.ts Deklarationen für Windows App SDK-APIs. Importieren #winapp/bindings , um auf alle exportierten Klassen zuzugreifen. Der Import des Pakets #winapp/bindings erfordert @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8; ältere Projekte können einen relativen Pfad zur importierenden Datei beibehalten (zum Beispiel require('../.winapp/bindings/index.js') aus src/index.js) oder mit npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings ein Upgrade durchführen.

• Anzeigen einer Benachrichtigung aus JavaScript-→ – Rufen Sie die gleiche Windows App SDK Benachrichtigungsoberfläche ohne ein systemeigenes Addon auf.
• Rufen Sie Windows APIs aus JavaScript-→ auf– wählen Sie eine Datei mit Windows App SDK aus, und prüfen Sie sie mit Windows SDK-Imaging-APIs.
• Phi Silica von JavaScript aufrufen → – den Text mit dem lokalen Sprachmodell auf Copilot+ PCs zusammenfassen.
• WinML über JavaScript ausführen → — verwenden Sie die ML-Anbietererkennung des Windows App SDK mit onnxruntime-node.

3. Optional: Erstellen eines nativen Add-Ons

Überspringen Sie diesen Schritt, wenn generierte JS-Bindungen die Windows App SDK API abdecken, die Sie benötigen. Erstellen Sie ein systemeigenes Addon nur, wenn Sie eine systemeigene Grenze benötigen, z. B. Win32, reine COM-, systemeigene C/C++-Bibliotheken oder verwaltete .NET Assemblys.

Option A: Erstellen eines C++-Benachrichtigungs-Addon

Erfahren Sie, wie Sie ein C++-Addon erstellen, das die Windows App SDK Benachrichtigungs-APIs aufruft. Dies ist ein guter Ausgangspunkt für das Verständnis nativer Addons, bevor Sie in komplexere Szenarien eintauchen.

Erstellen eines C++-Benachrichtigungs-Add-Ons →

Option B: Erstellen eines Phi-Silikat-Addon

Erfahren Sie, wie Sie ein C#-Addon erstellen, das das Phi-Silika-KI-Modell verwendet, um Text auf dem Gerät zusammenzufassen. Phi Silika ist ein kleines Sprachmodell, das lokal auf Windows 11 Geräten mit NPUs ausgeführt wird.

Erstelle ein Phi-Silica-Add-on→

Option C: Erstellen eines WinML-Add-Ons

Erfahren Sie, wie Sie ein C#-Addon erstellen, das Windows Machine Learning (WinML) verwendet, um benutzerdefinierte ONNX-Modelle für die Bildklassifizierung, die Objekterkennung und vieles mehr auszuführen.

Erstellen eines WinML-Add-Ons →

4. Verpackung für den Vertrieb

Schließlich verpacken Sie Ihre App als MSIX für die Verteilung. Dazu gehören:

• Erstellen Ihrer App für die Produktion
• Erstellen und Signieren eines MSIX-Pakets
• Testen des installierten Pakets
• Grundlegendes zu Verteilungsoptionen

Ihrer App paketieren →

Schnellnavigation

Phase	Guide	Sie lernen Folgendes
1️⃣	Einrichtung	Installieren von Tools, Initialisieren von SDKs, Konfigurieren der Buildpipeline
2️⃣	Benachrichtigungs-JS-Bindungen	Anzeigen einer Windows App SDK Benachrichtigung direkt aus JavaScript
2️⃣	JavaScript-Bindungen für Windows-APIs	Rufen Sie eine Windows App SDK-API auf, und erweitern Sie dann Bindungen an Windows SDK-APIs.
2️⃣	Phi Silika JS Bindungen	Aufrufen des lokalen Sprachmodells direkt über JavaScript
2️⃣	WinML JS-Bindungen	Registrieren von WinML-Ausführungsanbietern und Ausführen von ONNX-Runtime über JavaScript
3️⃣	C++-Benachrichtigungs-Addon	Erstellen eines C++-Add-Ons, Anrufbenachrichtigungs-APIs, Testen mit Debugidentität
3️⃣	Phi Silica Add-on	Erstellen einer C#-Add-On-Alternative für KI-APIs
3️⃣	WinML-Add-On	Erstellen einer C#-Add-On-Alternative für WinML
4️⃣	Verpackung	Erstellen einer Produktions-App, Erstellen von MSIX, Verteilen

Zusätzliche Ressourcen

• winapp CLI-Dokumentation - Vollständige CLI-Referenz
• Sample Electron App – Vollständiges Arbeitsbeispiel
• AI Dev Gallery – Beispielkatalog aller KI-APIs
• Windows App SDK Samples - Sammlung von Windows App SDK Beispielen
• node-api-dotnet – C# ↔ JavaScript-Interoperabilitätsbibliothek

Hilfe

• Ein Fehler gefunden?Ein Problem melden