Konfigurera Electron för Utveckling av Windows API

Den här guiden beskriver hur du konfigurerar din Electron-utvecklingsmiljö för Utveckling av Windows API. Du installerar nödvändiga verktyg, initierar dina project och konfigurerar Windows SDK:er.

I slutet av den här guiden har du en Electron-app som:

  • Anropar moderna Windows-API:er (Windows SDK och Windows App SDK)
  • Kan använda inbyggda tillägg med AI-funktioner (Phi Silica eller WinML)
  • Körs med appidentitet för testning av skyddade API:er
  • Kan paketeras som en signerad MSIX för distribution

Förutsättningar

  • Windows 11 (Copilot+ PC om du använder Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio med den interna skrivbordsarbetsbelastningen - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Steg 1: Skapa en ny Electron-app

Börja med en ny Electron-app med hjälp av Electron Forge. Om du har en befintlig app hoppar du över det här steget.

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

Kontrollera att appen körs:

npm start

Steg 2: Installera winapp CLI

npm install --save-dev @microsoft/winappcli

Steg 3: Initiera projektet för Windows-utveckling

npx winapp init

När du uppmanas att göra det:

  • Paketnamn: Tryck på Enter för att acceptera standardvärdet (my-windows-app)
  • Utgivarens namn: Tryck på Enter för att acceptera standardvärdet eller ange ditt namn
  • Version: Tryck på Retur för att acceptera 1.0.0.0
  • Startpunkt: Tryck på Retur för att acceptera standardinställningen (my-windows-app.exe)
  • Konfigurera SDK:er: Välj "Stabila SDK:er"

Vad gör winapp init ?

Det här kommandot konfigurerar allt du behöver för Windows-utveckling:

  1. Skapa .winapp/ mapp som innehåller rubriker och bibliotek från Windows SDK och Windows App SDK
  2. Genererar appxmanifest.xml – Appmanifestet som krävs för appidentitet och MSIX-paketering
  3. Skapar Assets/ mapp – Innehåller appikoner och visuella tillgångar
  4. Skapar winapp.yaml – Spårar SDK-versioner och projektkonfiguration
  5. Installerar Windows App SDK runtime – Nödvändiga körningskomponenter för moderna API:er
  6. Aktiverar utvecklarläge i Windows – krävs för felsökning

Anmärkning

Mappen .winapp/ läggs automatiskt till .gitignore i och ska inte checkas in i källkontrollen.

Steg 4: Lägga till återställning i bygg-pipelinen

Lägg till ett postinstall-skript i din package.json för att säkerställa att Windows-SDK:erna är tillgängliga när andra utvecklare klonar din project:

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

Det här skriptet körs efter npm install och:

  1. winapp restore – Laddar ned och återställer alla Windows SDK-paket
  2. winapp node add-electron-debug-identity – Registrerar din Electron-app med felsökningsidentitet

För plattformsoberoende projekt skapar du 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.');
}

package.jsonUppdatera sedan :

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

Steg 5: Förståelse av felsökningsidentitet

Kommandot winapp node add-electron-debug-identity:

  1. Läser din appxmanifest.xml för att hämta appinformation och funktioner
  2. electron.exe Registrerar sig i din node_modules med en tillfällig identitet
  3. Gör att du kan testa api:er som krävs för identitet utan att skapa ett fullständigt MSIX-paket

Kör det här kommandot manuellt när du ändrar appxmanifest.xml eller länkade tillgångar:

npx winapp node add-electron-debug-identity

Testa konfigurationen:

npm start

Anmärkning

Det finns en känd Windows-bugg med gles paketering av Elektronprogram som kan orsaka krascher eller tomma fönster. Lägg till --no-sandbox i startskriptet som en lösning: "start": "electron-forge start -- --no-sandbox". Det här problemet påverkar inte fullständig MSIX-paketering. Om du vill ångra felsökningsidentiteten kör du npx winapp node clear-electron-debug-identity.

Nästa steg

Nu när utvecklingsmiljön har konfigurerats skapar du interna tillägg och anropar Windows-API:er:

  • Last updated on