Freigeben über

Einrichten von Electron für die Entwicklung von Windows-API

Dieser Leitfaden führt Sie durch die Einrichtung Ihrer Electron-Entwicklungsumgebung für die Entwicklung von Windows-API. Sie installieren die erforderlichen Tools, initialisieren Ihre project und konfigurieren Windows-SDKs.

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

  • Ruft moderne Windows-APIs (Windows SDK und Windows App SDK) auf.
  • Kann native Addons mit KI-Funktionen (Phi Silica oder WinML) verwenden
  • Wird mit App-Identität zum Testen geschützter APIs ausgeführt
  • Kann als signiertes MSIX für die Verteilung verpackt werden

Voraussetzungen

  • 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"

Schritt 1: Erstellen einer neuen Electron-App

Beginnen Sie mit einer frischen Electron-App mit Electron Forge. Wenn Sie über eine vorhandene App verfügen, überspringen Sie diesen Schritt.

npm create electron-app@latest my-windows-app
cd my-windows-app

Überprüfen Sie, ob die App ausgeführt wird:

npm start

Schritt 2: Installieren der winapp CLI

npm install --save-dev @microsoft/winappcli

Schritt 3: Initialisieren Sie das Projekt für Windows-Entwicklung

npx winapp init

Wenn Sie dazu aufgefordert werden:

  • Paketname: Drücken Sie die EINGABETASTE, um die Standardeinstellung zu akzeptieren (my-windows-app)
  • Publisher Name: Drücken Sie die EINGABETASTE, um die Standardeinstellung zu akzeptieren oder Ihren Namen einzugeben.
  • Version: Drücken Sie die EINGABETASTE, um 1.0.0.0 zu akzeptieren.
  • Einstiegspunkt: Drücken Sie die EINGABETASTE, um die Standardeinstellung zu übernehmen (my-windows-app.exe)
  • Setup-SDKs: Wählen Sie "Stabile SDKs" aus.

Was macht winapp init das?

Mit diesem Befehl wird alles eingerichtet, was Sie für die Windows-Entwicklung benötigen:

  1. Erstellt .winapp/ Ordner mit Headern und Bibliotheken aus dem Windows SDK und Windows App SDK
  2. Generiert appxmanifest.xml – Das App-Manifest, das für die App-Identität und das MSIX-Paket erforderlich ist
  3. Erstellt Assets/ ordner – Enthält App-Symbole und visuelle Ressourcen
  4. Creates winapp.yaml – Verfolgt SDK-Versionen und Projektkonfiguration
  5. Installs Windows App SDK runtime – Notwendige Laufzeitkomponenten für moderne APIs
  6. Aktiviert den Entwicklermodus in Windows – Erforderlich für das Debuggen

Hinweis

Der .winapp/ Ordner wird .gitignore automatisch hinzugefügt und sollte nicht in die Quellcodeverwaltung eingecheckt werden.

Schritt 4: Wiederherstellung zur Build-Pipeline hinzufügen

Fügen Sie ein Skript postinstall in Ihr package.json ein, um sicherzustellen, dass die Windows-SDKs verfügbar sind, wenn andere Entwickler Ihr Projekt klonen.

{
  "scripts": {
    "postinstall": "winapp restore && winapp node add-electron-debug-identity"
  }
}

Dieses Skript läuft nach npm install und:

  1. winapp restore – Lädt alle Windows SDK-Pakete herunter und stellt sie wieder her
  2. winapp node add-electron-debug-identity - Registriert Ihre Electron-App mit Debugidentität

Für plattformübergreifende Projekte erstellen Sie Folgendes: scripts/postinstall.js.

if (process.platform === 'win32') {
  const { execSync } = require('child_process');
  try {
    execSync('npx winapp restore && npx winapp cert generate --if-exists skip && npx winapp node add-electron-debug-identity', {
      stdio: 'inherit'
    });
  } catch (error) {
    console.warn('Warning: Windows-specific setup failed.');
  }
} else {
  console.log('Skipping Windows-specific setup on non-Windows platform.');
}

Aktualisieren Sie dann package.json:

{
  "scripts": {
    "postinstall": "node scripts/postinstall.js"
  }
}

Schritt 5: Grundlegendes zur Debugidentität

Der Befehl winapp node add-electron-debug-identity:

  1. Liest Ihre appxmanifest.xml, um Details und Funktionen der App abzurufen.
  2. Registriert electron.exe in Ihrem node_modules mit einer temporären Identität.
  3. Ermöglicht es Ihnen, identitätsrelevante APIs zu testen, ohne ein vollständiges MSIX-Paket zu erstellen.

Führen Sie diesen Befehl manuell aus, wann immer Sie appxmanifest.xml oder verknüpfte Ressourcen ändern.

npx winapp node add-electron-debug-identity

Testen Sie Ihr Setup:

npm start

Hinweis

Es gibt ein bekanntes Windows-Problem mit dünner Paketierung von Electron-Anwendungen, das Abstürze oder leere Fenster verursachen kann. Fügen Sie --no-sandbox zu Ihrem Startskript als Problemumgehung hinzu: "start": "electron-forge start -- --no-sandbox". Dieses Problem wirkt sich nicht auf die gesamte MSIX-Verpackung aus. Um die Debug-Identität rückgängig zu machen, führen Sie npx winapp node clear-electron-debug-identity aus.

Nächste Schritte

Nachdem Ihre Entwicklungsumgebung eingerichtet ist, erstellen Sie systemeigene Addons, und rufen Sie Windows-APIs auf:

  • Last updated on