Electron API de referencia rápida y plantillas de configuración

Tabla de referencia rápida de API del proceso principal

Módulo	Descripción de la función	Métodos comunes	Descripción
app	Controlar el ciclo de vida de la aplicación	`app.on('ready')`、`app.quit()`、`app.getPath('userData')`	Gestiona el inicio, cierre, rutas, registro de protocolos, etc. de la aplicación
BrowserWindow	Crear y gestionar ventanas	`new BrowserWindow(options)`、`win.loadFile()`、`win.loadURL()`、`win.webContents`	Contenedor principal de la interfaz de usuario de la aplicación Electron; en su interior se ejecuta el proceso de renderizado
ipcMain	Interfaz de comunicación del proceso principal	`ipcMain.on(channel, callback)`、`ipcMain.handle(channel, handler)`	Escucha mensajes o solicitudes de llamada enviadas por el proceso de renderizado
Menu	Crear menús de aplicación	`Menu.buildFromTemplate(menuTemplate)`、`Menu.setApplicationMenu(menu)`	Permite personalizar elementos de menú, atajos de teclado y menús contextuales
Tray	Gestión de la bandeja del sistema	`new Tray(icon)`、`tray.setToolTip()`、`tray.setContextMenu(menu)`	Muestra un icono en la barra de tareas; se usa comúnmente en aplicaciones residentes en segundo plano
Dialog	Diálogos nativos del sistema	`dialog.showOpenDialog()`、`dialog.showSaveDialog()`、`dialog.showMessageBox()`	Interacciones del sistema como selección de archivos, guardado y avisos de mensajes
Notification	Notificaciones del sistema	`new Notification({ title, body }).show()`	Envía notificaciones nativas del sistema, puede incluir un callback de clic
Shell	Acceder a recursos externos del sistema	`shell.openExternal(url)`、`shell.showItemInFolder(path)`	Abrir páginas web externas, carpetas y ejecutar archivos
Protocol	Registrar protocolos personalizados	`protocol.registerFileProtocol()`、`protocol.handle()`	Se utiliza para carga de recursos personalizados o enlaces profundos
Session	Gestionar sesiones, caché y cookies	`session.defaultSession.cookies.get()`、`clearCache()`	Control de bajo nivel sobre datos de navegación y solicitudes
Net	Solicitudes de red HTTP/HTTPS nativas	`net.request(options)`	Módulo de red de más bajo nivel, con mejor rendimiento que`fetch`
PowerMonitor	Monitorear el estado de energía del sistema	`powerMonitor.on('suspend')`、`on('resume')`	Escucha estados como suspensión, activación y bloqueo de pantalla del equipo
Clipboard	Operaciones con el portapapeles	`clipboard.readText()`、`clipboard.writeText()`	Compatible con copiar y pegar texto, imágenes, etc. entre plataformas
GlobalShortcut	Registrar atajos de teclado globales	`globalShortcut.register('CommandOrControl+X', fn)`	Atajos de teclado que funcionan en todas las ventanas y en segundo plano

Tabla de referencia rápida de API del proceso de renderizado

Módulo	Descripción de la función	Métodos comunes	Descripción
ipcRenderer	Comunicación con el proceso principal	`ipcRenderer.send()`、`ipcRenderer.invoke()`、`ipcRenderer.on()`	Se utiliza para que el proceso de renderizado envíe, reciba e invoque eventos del proceso principal
webFrame	Controlar el contenido de la página actual	`webFrame.setZoomFactor()`、`webFrame.insertCSS()`	Modificar dinámicamente el zoom y los estilos de la página
contextBridge	Exposición segura de API	`contextBridge.exposeInMainWorld('api', {...})`	Al habilitar`contextIsolation`se interactúa de forma segura con el proceso principal
desktopCapturer	Capturar el contenido de la pantalla	`desktopCapturer.getSources({ types: ['window', 'screen'] })`	Se utiliza para capturas de pantalla o grabación de pantalla
Notification	API de notificaciones	`new Notification('标题', { body: '内容' })`	Enviar notificaciones mediante el estándar Notification del navegador
Clipboard	Operaciones con el portapapeles	`navigator.clipboard.readText()`	Puede acceder al portapapeles del sistema (algunas funciones están restringidas)
Web Storage / IndexedDB	Almacenamiento local	`localStorage.setItem()`、`indexedDB.open()`	Guardar datos ligeros o estructurados
Fetch / Axios	Solicitudes de red	`fetch(url)`、`axios.get()`	Se utiliza para acceder a interfaces remotas y cargar recursos
DOM / Window	Control de página	`document.querySelector()`、`window.open()`	Se pueden utilizar todas las API web

Tabla de referencia rápida de módulos auxiliares comunes

Módulo	Función principal	Ejemplo
fs	Operaciones de archivos	`fs.readFileSync(path)`、`fs.writeFile(path, data)`
path	Unión de rutas	`path.join(__dirname, 'index.html')`
os	Información del sistema	`os.platform()`、`os.homedir()`
child_process	Ejecutar procesos secundarios	`exec('ls', callback)`
electron-store	Configuración persistente	`store.set('key', value)`、`store.get('key')`
sqlite3 / better-sqlite3	Base de datos local	`db.prepare('SELECT * FROM notes').all()`
axios / node-fetch	Solicitudes de red	`axios.post(url, data)`
node-gyp	Compilación de módulos nativos	`node-gyp rebuild`

Plantillas de archivos de configuración y explicaciones

Plantilla de package.json y explicación

{
  "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/"
    }
  }
}

Descripción:

Campo	Significado
name / version / description	Nombre de la aplicación, número de versión e información de descripción
main	Archivo de entrada del proceso principal (obligatorio)
scripts	Define los scripts de comandos,`npm start`inicio,`npm run dist`empaquetado
devDependencies	Dependencias de desarrollo (Electron, herramientas de empaquetado, etc.)
build	`electron-builder`elementos de configuración de
appId	ID único de la aplicación, utilizado para firma e identificación de actualizaciones
productName	Nombre de la aplicación que se muestra después del empaquetado
directories.output	Ruta de salida del empaquetado
files	Especifica los archivos y directorios que se incluirán en el paquete de la aplicación
win/mac/linux	Configuración de empaquetado independiente para cada plataforma (iconos, formato de destino)

Plantilla de electron-builder.yml y explicación

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

Descripción:

Elemento de configuración	Descripción
appId / productName	Identificador único y nombre de la aplicación
directories.output	Directorio de salida del empaquetado
files	Lista de archivos a empaquetar (compatible con comodines)
win / mac / linux	Objetivos de compilación y configuración de iconos para diferentes sistemas
publish	Configuración de la fuente de publicación para actualizaciones automáticas (por ejemplo, GitHub Releases)

Plantilla de tsconfig.json de TypeScript y explicación

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

Descripción:

Opción	Significado
target	Versión de JavaScript objetivo de compilación
module	Sistema de módulos; el proceso principal de Electron generalmente usa`commonjs`
outDir / rootDir	Directorio de salida y de código fuente
strict	Habilitar la verificación estricta de tipos
esModuleInterop	Permitir importaciones predeterminadas de módulos que no son ES
resolveJsonModule	Compatibilidad con importación de archivos JSON
skipLibCheck	Omitir la verificación de archivos de declaración para acelerar la compilación

Otras extensiones