Nastavení vývoje rozhraní Electron for Windows API

Tato příručka vás provede nastavením vývojového prostředí Elektron pro vývoj rozhraní API pro Windows. Nainstalujete potřebné nástroje, inicializujete project a nakonfigurujete sady Windows SDK.

Na konci tohoto průvodce budete mít aplikaci Elektron, která:

  • Volání moderních rozhraní API systému Windows (Windows SDK a Windows App SDK)
  • Může používat nativní doplňky s funkcemi AI (Phi Silica nebo WinML).
  • Spouští se s identitou aplikace pro testování chráněných rozhraní API.
  • Dá se zabalit jako podepsaný MSIX pro distribuci.

Předpoklady

  • Windows 11 (Pc Copilot+ při použití Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio s nativní desktopovou pracovní zátěží - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Krok 1: Vytvoření nové aplikace Elektron

Začněte s novou aplikací Elektron pomocí Elektron Forge. Pokud máte existující aplikaci, tento krok přeskočte.

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

Ověřte, že aplikace běží:

npm start

Krok 2: Instalace rozhraní příkazového řádku winapp

npm install --save-dev @microsoft/winappcli

Krok 3: Inicializace project pro vývoj pro Windows

npx winapp init

Po zobrazení výzvy:

  • Název balíčku: Stisknutím klávesy Enter přijměte výchozí hodnotu (my-windows-app).
  • Publisher název: Stisknutím klávesy Enter přijměte výchozí hodnotu nebo zadejte své jméno.
  • Verze: Stisknutím klávesy Enter přijměte verzi 1.0.0.0.
  • Vstupní bod: Stisknutím klávesy Enter přijměte výchozí (my-windows-app.exe)
  • Instalační sady SDK: Vyberte stabilní sady SDK.

Co dělá winapp init ?

Tento příkaz nastaví vše, co potřebujete pro vývoj pro Windows:

  1. Vytvoří složku .winapp/ obsahující hlavičky a knihovny ze sady Windows SDK a Windows App SDK
  2. Generuje appxmanifest.xml – Manifest aplikace vyžadovaný pro identitu aplikace a balení MSIX
  3. Vytvoří Assets/ složku – obsahuje ikony aplikací a vizuální prostředky.
  4. Creates winapp.yaml – Sleduje verze sady SDK a konfiguraci project
  5. Instalace Windows App SDK runtime – Požadované komponenty modulu runtime pro moderní rozhraní API
  6. Povolí vývojářský režim ve Windows – vyžaduje se pro ladění.

Poznámka:

Složka .winapp/ se automaticky přidá do .gitignore a neměla by být zavedena do správy zdrojového kódu.

Krok 4: Přidání obnovení do kanálu buildu

Přidejte skript do postinstallpackage.json, abyste zajistili, že jsou sady Windows SDK dostupné, když ostatní vývojáři naklonují váš projekt.

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

Tento skript se spustí po npm install a:

  1. winapp restore - Stáhne a obnoví všechny balíčky Windows SDK.
  2. winapp node add-electron-debug-identity - Zaregistruje aplikaci Electron s identitou pro ladění.

Pro projekty napříč platformami vytvořte 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.');
}

Pak aktualizujte package.json:

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

Krok 5: Pochopení ladicí identity

Příkaz winapp node add-electron-debug-identity:

  1. Přečte vaše appxmanifest.xml a zjistí podrobnosti a schopnosti aplikace.
  2. Zaregistruje electron.exe ve vaší node_modules s dočasnou identitou.
  3. Umožňuje otestovat rozhraní API, která vyžadují identitu, bez vytvoření kompletního balíčku MSIX.

Tento příkaz spusťte ručně pokaždé, když upravíte appxmanifest.xml nebo propojené prostředky:

npx winapp node add-electron-debug-identity

Otestujte nastavení:

npm start

Poznámka:

Existuje známá chyba ve Windows se „sparse packaging“ aplikací Electron, která může způsobit pády nebo prázdná okna. Přidejte --no-sandbox do spouštěcího skriptu alternativní řešení: "start": "electron-forge start -- --no-sandbox". Tento problém nemá vliv na úplné balení MSIX. Pokud chcete vrátit zpět ladicí identitu, spusťte příkaz npx winapp node clear-electron-debug-identity.

Další kroky

Teď, když je vaše vývojové prostředí nastavené, vytvořte nativní doplňky a volejte rozhraní API systému Windows:

  • Last updated on