Краткий справочник по Electron API и шаблон конфигурации

Краткий справочник по API главного процесса

Модуль Описание функций Общие методы Описание
app Управление жизненным циклом приложения app.on('ready')、app.quit()、app.getPath('userData') Управление запуском приложения, завершением работы, путями, регистрацией протоколов и т. д.
BrowserWindow Создание окон и управление ими new BrowserWindow(options)、win.loadFile()、win.loadURL()、win.webContents Основной контейнер пользовательского интерфейса приложения Electron, внутри которого выполняется процесс рендеринга
ipcMain Интерфейс связи главного процесса ipcMain.on(channel, callback)、ipcMain.handle(channel, handler) Прослушивание сообщений или запросов на вызов, отправленных процессом рендеринга
Меню Создание меню приложения Menu.buildFromTemplate(menuTemplate)、Menu.setApplicationMenu(menu) Настраиваемые пункты меню, сочетания клавиш и контекстные меню
Трей Управление системным треем new Tray(icon)、tray.setToolTip()、tray.setContextMenu(menu) Отображение значка на панели задач, обычно используется для фоновых резидентных приложений
Диалог Системные нативные диалоги dialog.showOpenDialog()、dialog.showSaveDialog()、dialog.showMessageBox() Системные взаимодействия, такие как выбор файлов, сохранение и запросы сообщений
Уведомление Системное уведомление new Notification({ title, body }).show() Отправка нативных системных уведомлений с необязательными обратными вызовами по клику
Шелла Вызов внешних системных ресурсов shell.openExternal(url)、shell.showItemInFolder(path) Открытие внешних веб-страниц, папок и исполняемых файлов
Протокол Зарегистрировать пользовательский протокол protocol.registerFileProtocol()、protocol.handle() Для загрузки пользовательских ресурсов или глубоких ссылок
Сессия Управление сессиями, кэшем и файлами cookie session.defaultSession.cookies.get()、clearCache() Низкоуровневый контроль над данными просмотра и запросами
Сеть Нативные сетевые запросы HTTP/HTTPS net.request(options) Низкоуровневый сетевой модуль с более высокой производительностью, чем...fetch
PowerMonitor Мониторинг состояния питания системы powerMonitor.on('suspend')、on('resume') Отслеживание сна, пробуждения, блокировки экрана и других состояний компьютера
Буфер обмена Операции с буфером обмена clipboard.readText()、clipboard.writeText() Поддержка кроссплатформенного копирования и вставки текста, изображений и т. д.
GlobalShortcut Регистрация глобальных горячих клавиш globalShortcut.register('CommandOrControl+X', fn) Сочетания клавиш, работающие во всех окнах и в фоновом режиме

Краткий справочник по API процесса рендеринга

Модуль Описание функций Общие методы Описание
ipcRenderer Связь с главным процессом ipcRenderer.send()、ipcRenderer.invoke()、ipcRenderer.on() Используется процессом рендеринга для отправки, получения и вызова событий главного процесса
webFrame Управление содержимым текущей страницы webFrame.setZoomFactor()、webFrame.insertCSS() Динамическое изменение масштаба и стилей страницы
contextBridge Безопасно предоставлять API contextBridge.exposeInMainWorld('api', {...}) При включенииcontextIsolationПри безопасном взаимодействии с главным процессом
desktopCapturer Захват содержимого экрана desktopCapturer.getSources({ types: ['window', 'screen'] }) Для функций создания снимков экрана или записи экрана
Уведомление Notification API new Notification('标题', { body: '内容' }) Отправляйте уведомления с помощью стандартного для браузера Notification API
Буфер обмена Операции с буфером обмена navigator.clipboard.readText() Может получать доступ к системному буферу обмена (некоторые функции ограничены)
Web Storage / IndexedDB Local Storage localStorage.setItem()、indexedDB.open() Сохранение легковесных или структурированных данных
Fetch / Axios Сетевой запрос fetch(url)、axios.get() Для доступа к удалённым API и загрузки ресурсов
DOM / Window Управление страницей document.querySelector()、window.open() Все Web API доступны

Краткий справочник по распространённым вспомогательным модулям

Модуль Основные возможности Пример
fs Операции с файлами fs.readFileSync(path)、fs.writeFile(path, data)
path Объединение путей path.join(__dirname, 'index.html')
os Информация о системе os.platform()、os.homedir()
child_process Запуск дочернего процесса exec('ls', callback)
electron-store Постоянная конфигурация store.set('key', value)、store.get('key')
sqlite3 / better-sqlite3 Локальная база данных db.prepare('SELECT * FROM notes').all()
axios / node-fetch Сетевой запрос axios.post(url, data)
node-gyp Компиляция нативных модулей node-gyp rebuild

Шаблоны файлов конфигурации и инструкции

Шаблон package.json и инструкции

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

Описание:

Fields Значение
name / version / description Информация о названии приложения, номере версии и описании
main Входной файл главного процесса (обязательно)
scripts Определите скрипты команд,npm startStart,npm run distPack
devDependencies Зависимости для разработки (Electron, инструменты упаковки и т. д.)
build electron-builderЭлемент конфигурации
appId Уникальный ID приложения, используемый для подписи и идентификации обновлений
productName Имя приложения, отображаемое после упаковки
directories.output Путь вывода упаковки
files Укажите файлы и каталоги для упаковки в приложение
win/mac/linux Независимая конфигурация упаковки для каждой платформы (иконки, целевые форматы)

Шаблон electron-builder.yml и инструкции

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

Описание:

Элемент конфигурации Описание
appId / productName Уникальный идентификатор и имя приложения
directories.output Каталог вывода упаковки
files Список упаковываемых файлов (поддерживает подстановочные знаки)
win / mac / linux Цели сборки и конфигурации значков для разных систем
publish Конфигурация источника релизов для автообновлений (например, GitHub Releases)

Шаблон TypeScript tsconfig.json и пояснение

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

Описание:

Параметры Значение
target Целевая версия JavaScript для компиляции
module Модульная система, обычно используемая главным процессом Electroncommonjs
outDir / rootDir Каталоги вывода и исходного кода
strict Включить строгую проверку типов
esModuleInterop Разрешить импорт по умолчанию для не-ES модулей
resolveJsonModule Поддержка импорта JSON-файлов
skipLibCheck Пропускать проверки файлов объявлений для ускорения компиляции
Другие расширения