Electron API-Kurzreferenz und Konfigurationsvorlage

Kurzreferenz zur Hauptprozess-API

Modul Funktionsbeschreibung Häufige Methoden Beschreibung
app Anwendungslebenszyklus steuern app.on('ready')、app.quit()、app.getPath('userData') App-Start, Beenden, Pfade, Protokollregistrierung usw. verwalten.
BrowserWindow Fenster erstellen und verwalten new BrowserWindow(options)、win.loadFile()、win.loadURL()、win.webContents Der Haupt-UI-Container einer Electron-App, in dem der Renderer-Prozess läuft
ipcMain Kommunikationsschnittstelle des Hauptprozesses ipcMain.on(channel, callback)、ipcMain.handle(channel, handler) Auf Nachrichten oder Aufrufanfragen lauschen, die vom Renderer-Prozess gesendet werden
Menü Anwendungsmenü erstellen Menu.buildFromTemplate(menuTemplate)、Menu.setApplicationMenu(menu) Anpassbare Menüeinträge, Tastenkürzel und Kontextmenüs
Tray System-Tray-Verwaltung new Tray(icon)、tray.setToolTip()、tray.setContextMenu(menu) Ein Symbol in der Taskleiste anzeigen, wird häufig für im Hintergrund laufende Anwendungen verwendet
Dialog Systemeigene Dialoge dialog.showOpenDialog()、dialog.showSaveDialog()、dialog.showMessageBox() Systeminteraktionen wie Datei-, Speicher- und Nachrichtenaufforderungen
Benachrichtigung Systembenachrichtigung new Notification({ title, body }).show() Native Systembenachrichtigungen senden, mit optionalen Klick-Callbacks
Shell Externe Systemressourcen aufrufen shell.openExternal(url)、shell.showItemInFolder(path) Externe Webseiten, Ordner und ausführbare Dateien öffnen
Protokoll Benutzerdefiniertes Protokoll registrieren protocol.registerFileProtocol()、protocol.handle() Für benutzerdefiniertes Laden von Ressourcen oder Deep-Links
Sitzung Sitzungen, Cache und Cookies verwalten session.defaultSession.cookies.get()、clearCache() Low-Level-Kontrolle über Browserdaten und -anfragen
Netz Native HTTP/HTTPS-Netzwerkanfragen net.request(options) Ein Netzwerkmodul auf niedrigerer Ebene mit besserer Leistung als...fetch
PowerMonitor System-Energiestatus überwachen powerMonitor.on('suspend')、on('resume') Auf Ruhezustand, Aufwachen, Sperrbildschirm und andere Zustände des Computers lauschen
Zwischenablage Zwischenablage-Operationen clipboard.readText()、clipboard.writeText() Unterstützt plattformübergreifendes Kopieren und Einfügen von Text, Bildern usw.
GlobalShortcut Globale Tastenkürzel registrieren globalShortcut.register('CommandOrControl+X', fn) Tastaturkürzel, die fensterübergreifend und im Hintergrund funktionieren

Kurzreferenz zur Renderer-Prozess-API

Modul Funktionsbeschreibung Häufige Methoden Beschreibung
ipcRenderer Mit dem Hauptprozess kommunizieren ipcRenderer.send()、ipcRenderer.invoke()、ipcRenderer.on() Wird vom Renderer-Prozess verwendet, um Ereignisse des Hauptprozesses zu senden, zu empfangen und aufzurufen
webFrame Inhalt der aktuellen Seite steuern webFrame.setZoomFactor()、webFrame.insertCSS() Seitenzoom und Stile dynamisch ändern
contextBridge APIs sicher bereitstellen contextBridge.exposeInMainWorld('api', {...}) Beim AktivierencontextIsolationBei sicherer Interaktion mit dem Hauptprozess
desktopCapturer Bildschirminhalt aufnehmen desktopCapturer.getSources({ types: ['window', 'screen'] }) Für Screenshot- oder Bildschirmaufnahmefunktionen
Benachrichtigung Notification API new Notification('标题', { body: '内容' }) Benachrichtigungen mit der browserstandardkonformen Notification API senden
Zwischenablage Zwischenablage-Operationen navigator.clipboard.readText() Kann auf die Systemzwischenablage zugreifen (einige Funktionen sind eingeschränkt)
Web Storage / IndexedDB Local Storage localStorage.setItem()、indexedDB.open() Leichtgewichtige oder strukturierte Daten speichern
Fetch / Axios Netzwerkanfrage fetch(url)、axios.get() für den Zugriff auf entfernte APIs und das Laden von Ressourcen
DOM / Window Seitensteuerung document.querySelector()、window.open() Alle Web-APIs sind verfügbar

Kurzreferenz für gängige Hilfsmodule

Modul Hauptfunktionen Beispiel
fs Dateioperationen fs.readFileSync(path)、fs.writeFile(path, data)
path Pfad zusammenfügen path.join(__dirname, 'index.html')
os Systeminformationen os.platform()、os.homedir()
child_process Untergeordneten Prozess ausführen exec('ls', callback)
electron-store Persistente Konfiguration store.set('key', value)、store.get('key')
sqlite3 / better-sqlite3 Lokale Datenbank db.prepare('SELECT * FROM notes').all()
axios / node-fetch Netzwerkanfrage axios.post(url, data)
node-gyp Kompilierung nativer Module node-gyp rebuild

Vorlagen und Anweisungen für Konfigurationsdateien

package.json-Vorlage und Anweisungen

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "示例 Electron 应用",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron": "^33.0.0",
    "electron-builder": "^24.6.0"
  },
  "build": {
    "appId": "com.example.myelectronapp",
    "productName": "MyElectronApp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "main.js",
      "preload.js",
      "renderer/**/*"
    ],
    "win": {
      "target": "nsis",
      "icon": "assets/icon.ico"
    },
    "mac": {
      "category": "public.app-category.productivity",
      "icon": "assets/icon.icns"
    },
    "linux": {
      "target": "AppImage",
      "icon": "assets/"
    }
  }
}

Beschreibung:

Fields Bedeutung
name / version / description App-Name, Versionsnummer und Beschreibungsinformationen
main Einstiegsdatei des Hauptprozesses (erforderlich)
scripts Befehlsskripte definieren,npm startStart,npm run distPack
devDependencies Entwicklungsabhängigkeiten (Electron, Paketierungstools usw.)
build electron-builderKonfigurationselement
appId Eindeutige App-ID, verwendet für Signierung und Update-Identifikation
productName App-Name, der nach der Paketierung angezeigt wird
directories.output Ausgabepfad der Paketierung
files Dateien und Verzeichnisse angeben, die in die Anwendung verpackt werden sollen
win/mac/linux Unabhängige Paketierungskonfiguration für jede Plattform (Icons, Zielformate)

electron-builder.yml-Vorlage und Anweisungen

appId: com.example.myelectronapp
productName: MyElectronApp
directories:
  output: dist
files:
  - "main.js"
  - "preload.js"
  - "renderer/**/*"
win:
  target: nsis
  icon: assets/icon.ico
mac:
  target: dmg
  icon: assets/icon.icns
linux:
  target: AppImage
  icon: assets/
publish:
  provider: github
  repo: my-electron-app
  owner: username

Beschreibung:

Konfigurationselement Beschreibung
appId / productName Eindeutige App-Kennung und Name
directories.output Ausgabeverzeichnis für die Paketierung
files Liste der gepackten Dateien (unterstützt Wildcards)
win / mac / linux Build-Ziele und Icon-Konfigurationen für verschiedene Systeme
publish Konfiguration der Release-Quelle für Auto-Updates (z. B. GitHub Releases)

TypeScript tsconfig.json-Vorlage und Erklärung

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Beschreibung:

Optionen Bedeutung
target Kompilierungsziel JavaScript-Version
module Modulsystem, wird im Allgemeinen vom Electron-Hauptprozess verwendetcommonjs
outDir / rootDir Ausgabe- und Quellverzeichnisse
strict Strikte Typprüfung aktivieren
esModuleInterop Default-Importe von Nicht-ES-Modulen zulassen
resolveJsonModule Unterstützung für den Import von JSON-Dateien
skipLibCheck Deklarationsdatei-Prüfungen überspringen, um die Kompilierung zu beschleunigen
Weitere Erweiterungen