Electron 学习笔记#

// src/main/index.js
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      contextIsolation: true,   // 安全：隔离上下文
      nodeIntegration: false,   // 安全：禁用 Node.js in renderer
    },
  });

  // 开发环境加载 dev server，生产环境加载打包文件
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173');
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.whenReady().then(() => {
  createWindow();

  // macOS: 点击 Dock 图标时重新创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 非 macOS: 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

// src/renderer/index.js
// 渲染进程通过 window.api 调用 preload 暴露的安全 API
document.getElementById('btn').addEventListener('click', async () => {
  const result = await window.api.readFile('example.txt');
  document.getElementById('output').textContent = result;
});

// src/preload/index.js
const { contextBridge, ipcRenderer } = require('electron');

// 通过 contextBridge 暴露安全的 API 给渲染进程
contextBridge.exposeInMainWorld('api', {
  // 异步读取文件（通过 IPC 转发给主进程）
  readFile: (filename) => ipcRenderer.invoke('read-file', filename),
  // 监听主进程发来的事件
  onFileChanged: (callback) => ipcRenderer.on('file-changed', callback),
  // 获取应用版本
  getVersion: () => ipcRenderer.invoke('get-version'),
});

const { BrowserWindow } = require('electron');

const win = new BrowserWindow({
  width: 1200,
  height: 800,
  minWidth: 800,
  minHeight: 600,
  maxWidth: 1920,
  maxHeight: 1080,
  x: 100,           // 窗口初始 x 位置
  y: 100,           // 窗口初始 y 位置
  resizable: true,
  movable: true,
  minimizable: true,
  maximizable: true,
  closable: true,
  focusable: true,
  fullscreenable: true,
  title: 'My App',
  icon: '/path/to/icon.png',
  frame: true,       // 是否显示标题栏
  transparent: false, // 是否透明
  alwaysOnTop: false, // 是否置顶
  skipTaskbar: false, // 是否在任务栏显示
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false,
  },
});

const win = new BrowserWindow({
  frame: false,       // 无原生标题栏
  titleBarStyle: 'hidden', // macOS: 保留交通灯按钮
  webPreferences: { ... },
});

// 渲染进程中的窗口控制按钮
document.getElementById('minimize').addEventListener('click', () => {
  window.api.minimize();
});
document.getElementById('maximize').addEventListener('click', () => {
  window.api.maximize();
});
document.getElementById('close').addEventListener('click', () => {
  window.api.close();
});

// 主进程：多窗口管理器
const windows = new Map();

function createWindow(name, options) {
  if (windows.has(name)) {
    windows.get(name).focus();
    return windows.get(name);
  }

  const win = new BrowserWindow(options);
  windows.set(name, win);

  win.on('closed', () => {
    windows.delete(name);
  });

  return win;
}

// 主窗口
createWindow('main', { width: 1200, height: 800 });

// 设置窗口
createWindow('settings', {
  width: 600,
  height: 400,
  parent: windows.get('main'), // 模态窗口
  modal: true,
});

// 主进程转发消息
ipcMain.on('message-to-main', (event, message) => {
  // 转发给主窗口
  windows.get('main').webContents.send('message-from-sub', message);
});

// 或者用 BroadcastChannel（渲染进程间直接通信）
// 渲染进程 A
const bc = new BroadcastChannel('app-channel');
bc.postMessage({ type: 'update', data: 'hello' });

// 渲染进程 B
const bc = new BroadcastChannel('app-channel');
bc.onmessage = (event) => {
  console.log('收到:', event.data);
};

// 主进程
const { ipcMain, dialog } = require('electron');
const fs = require('fs');

ipcMain.handle('dialog:openFile', async () => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [{ name: 'Text', extensions: ['txt', 'md'] }],
  });
  if (result.canceled) return null;
  return fs.readFileSync(result.filePaths[0], 'utf-8');
});

// preload
contextBridge.exposeInMainWorld('api', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
});

// 渲染进程
const content = await window.api.openFile();
console.log(content);

// 主进程
ipcMain.on('app:minimize', () => {
  BrowserWindow.getFocusedWindow()?.minimize();
});

// preload
contextBridge.exposeInMainWorld('api', {
  minimize: () => ipcRenderer.send('app:minimize'),
});

// 渲染进程
document.getElementById('min-btn').addEventListener('click', () => {
  window.api.minimize();
});

// 主进程：主动通知渲染进程
mainWindow.webContents.send('update:available', { version: '1.2.0' });

// preload
contextBridge.exposeInMainWorld('api', {
  onUpdateAvailable: (callback) => {
    ipcRenderer.on('update:available', (_, data) => callback(data));
  },
});

// 渲染进程
window.api.onUpdateAvailable((data) => {
  showNotification(`新版本 ${data.version} 可用！`);
});

const { Menu } = require('electron');

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        accelerator: 'CmdOrCtrl+N',
        click: () => createNewDocument(),
      },
      {
        label: '打开',
        accelerator: 'CmdOrCtrl+O',
        click: async () => {
          const { filePaths } = await dialog.showOpenDialog({
            properties: ['openFile'],
          });
          if (filePaths[0]) openFile(filePaths[0]);
        },
      },
      { type: 'separator' },
      {
        label: '退出',
        accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Alt+F4',
        role: 'quit',
      },
    ],
  },
  {
    label: '编辑',
    submenu: [
      { role: 'undo', label: '撤销' },
      { role: 'redo', label: '重做' },
      { type: 'separator' },
      { role: 'cut', label: '剪切' },
      { role: 'copy', label: '复制' },
      { role: 'paste', label: '粘贴' },
      { role: 'selectAll', label: '全选' },
    ],
  },
  {
    label: '视图',
    submenu: [
      { role: 'reload', label: '重新加载' },
      { role: 'forceReload', label: '强制重新加载' },
      { role: 'toggleDevTools', label: '开发者工具' },
      { type: 'separator' },
      { role: 'resetZoom', label: '重置缩放' },
      { role: 'zoomIn', label: '放大' },
      { role: 'zoomOut', label: '缩小' },
      { type: 'separator' },
      { role: 'togglefullscreen', label: '全屏' },
    ],
  },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

if (process.platform === 'darwin') {
  // macOS: 第一个菜单是应用菜单
  template.unshift({
    label: app.getName(),
    submenu: [
      { role: 'about' },
      { type: 'separator' },
      { role: 'services' },
      { type: 'separator' },
      { role: 'hide' },
      { role: 'hideOthers' },
      { role: 'unhide' },
      { type: 'separator' },
      { role: 'quit' },
    ],
  });
}

const { Tray, Menu, nativeImage } = require('electron');

let tray;

function createTray() {
  const icon = nativeImage.createFromPath(path.join(__dirname, 'assets/tray-icon.png'));
  // macOS: 托盘图标应该是模板图片（黑白透明）
  icon.setTemplateImage(true);

  tray = new Tray(icon);
  tray.setToolTip('My Electron App');

  const contextMenu = Menu.buildFromTemplate([
    { label: '显示窗口', click: () => mainWindow.show() },
    { label: '设置', click: () => openSettings() },
    { type: 'separator' },
    { label: '退出', click: () => app.quit() },
  ]);

  tray.setContextMenu(contextMenu);

  // 点击托盘图标
  tray.on('click', () => {
    if (mainWindow.isVisible()) {
      mainWindow.hide();
    } else {
      mainWindow.show();
    }
  });
}

const { dialog } = require('electron');

// 打开文件
async function openFileDialog() {
  const result = await dialog.showOpenDialog(mainWindow, {
    title: '选择文件',
    defaultPath: app.getPath('documents'),
    properties: ['openFile', 'multiSelections'],
    filters: [
      { name: '图片', extensions: ['jpg', 'png', 'gif', 'webp'] },
      { name: '所有文件', extensions: ['*'] },
    ],
  });
  if (!result.canceled) {
    console.log('选中文件:', result.filePaths);
  }
}

// 保存文件
async function saveFileDialog() {
  const result = await dialog.showSaveDialog(mainWindow, {
    title: '保存文件',
    defaultPath: path.join(app.getPath('documents'), 'untitled.txt'),
    filters: [
      { name: '文本文件', extensions: ['txt'] },
      { name: 'Markdown', extensions: ['md'] },
    ],
  });
  if (!result.canceled) {
    fs.writeFileSync(result.filePath, content, 'utf-8');
  }
}

// 显示消息框
const result = await dialog.showMessageBox(mainWindow, {
  type: 'warning',
  title: '确认删除',
  message: '确定要删除这个文件吗？',
  detail: '此操作不可撤销。',
  buttons: ['删除', '取消'],
  defaultId: 1,    // 默认聚焦"取消"
  cancelId: 1,     // ESC 键对应"取消"
});

if (result.response === 0) {
  // 用户点了"删除"
  deleteFile();
}

const fs = require('fs/promises');
const path = require('path');
const { app } = require('electron');

// Electron 提供的路径 API
const userDataPath = app.getPath('userData');    // 用户数据目录
const documentsPath = app.getPath('documents');   // 文档目录
const downloadsPath = app.getPath('downloads');   // 下载目录
const tempPath = app.getPath('temp');             // 临时目录

// 读写配置文件
async function readConfig() {
  const configPath = path.join(userDataPath, 'config.json');
  try {
    const data = await fs.readFile(configPath, 'utf-8');
    return JSON.parse(data);
  } catch {
    return { theme: 'dark', language: 'zh' }; // 默认值
  }
}

async function writeConfig(config) {
  const configPath = path.join(userDataPath, 'config.json');
  await fs.writeFile(configPath, JSON.stringify(config, null, 2), 'utf-8');
}

const { globalShortcut } = require('electron');

app.whenReady().then(() => {
  // 注册全局快捷键（应用未聚焦时也生效）
  globalShortcut.register('CommandOrControl+Shift+D', () => {
    mainWindow.show();
    mainWindow.focus();
  });

  globalShortcut.register('CommandOrControl+Alt+S', () => {
    takeScreenshot();
  });
});

// 应用退出时取消注册
app.on('will-quit', () => {
  globalShortcut.unregisterAll();
});

// 通过菜单项的 accelerator 属性
{
  label: '保存',
  accelerator: 'CmdOrCtrl+S',
  click: () => saveDocument(),
}

// 或在渲染进程中监听键盘事件
document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

const { clipboard } = require('electron');

// 主进程
function copyToClipboard(text) {
  clipboard.writeText(text);
}

function readClipboard() {
  return clipboard.readText();
}

// 图片
const image = clipboard.readImage();
if (!image.isEmpty()) {
  // 保存图片到文件
  const pngBuffer = image.toPNG();
  fs.writeFileSync('screenshot.png', pngBuffer);
}

const Store = require('electron-store');

const store = new Store({
  defaults: {
    windowBounds: { width: 1200, height: 800 },
    recentFiles: [],
    settings: {
      theme: 'dark',
      fontSize: 14,
      autoSave: true,
    },
  },
});

// 读取
const theme = store.get('settings.theme'); // 'dark'

// 写入
store.set('settings.theme', 'light');

// 删除
store.delete('settings.fontSize');

// 记住窗口位置
mainWindow.on('close', () => {
  const bounds = mainWindow.getBounds();
  store.set('windowBounds', bounds);
});

const Database = require('better-sqlite3');

const db = new Database(path.join(app.getPath('userData'), 'app.db'));

// 建表
db.exec(`
  CREATE TABLE IF NOT EXISTS notes (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    content TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
  )
`);

// 插入
const insert = db.prepare('INSERT INTO notes (title, content) VALUES (?, ?)');
const info = insert.run('我的笔记', '内容...');
console.log('插入 ID:', info.lastInsertRowid);

// 查询
const selectAll = db.prepare('SELECT * FROM notes ORDER BY updated_at DESC');
const notes = selectAll.all();

// 渲染进程中可直接用 Web API
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

// IndexedDB 适合大量结构化数据
const request = indexedDB.open('MyAppDB', 1);
request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('files', { keyPath: 'id' });
};

const { Notification } = require('electron');

function showNotification(title, body) {
  if (Notification.isSupported()) {
    new Notification({
      title,
      body,
      icon: path.join(__dirname, 'assets/icon.png'),
      silent: false,
    }).show();
  }
}

// 渲染进程也可以用 Web Notification API
// new Notification('标题', { body: '内容' });

const { powerMonitor } = require('electron');

powerMonitor.on('on-ac', () => {
  console.log('切换到交流电源');
  // 可以暂停省电模式，恢复后台任务
});

powerMonitor.on('on-battery', () => {
  console.log('切换到电池供电');
  // 降低后台任务频率
});

powerMonitor.on('suspend', () => {
  console.log('系统即将休眠');
  // 保存状态
});

powerMonitor.on('resume', () => {
  console.log('系统从休眠恢复');
});

// 获取电池信息
const batteryLevel = powerMonitor.getSystemIdleTime();

const { screen } = require('electron');

// 获取所有显示器
const displays = screen.getAllDisplays();
displays.forEach((display, i) => {
  console.log(`显示器 ${i}: ${display.bounds.width}x${display.bounds.height}`);
  console.log(`  位置: (${display.bounds.x}, ${display.bounds.y})`);
  console.log(`  缩放: ${display.scaleFactor}`);
});

// 获取鼠标位置
const cursorPos = screen.getCursorScreenPoint();

// 在鼠标所在的显示器上显示窗口
const currentDisplay = screen.getDisplayNearestPoint(cursorPos);
win.setPosition(currentDisplay.bounds.x + 100, currentDisplay.bounds.y + 100);

// 注册文件关联（package.json 或 forge.config.js）
// forge.config.js
module.exports = {
  packagerConfig: {
    fileAssociations: [
      { ext: 'myapp', name: 'My App File', role: 'Editor' },
    ],
    protocols: [
      { name: 'My App Protocol', schemes: ['myapp'] },
    ],
  },
};

// 主进程处理文件打开
app.on('open-file', (event, path) => {
  event.preventDefault();
  openFile(path);
});

// 处理深链接
app.on('open-url', (event, url) => {
  event.preventDefault();
  console.log('深链接:', url); // myapp://page/settings
});

// 1. 延迟加载非关键模块
const lazyLoad = (module) => {
  let cached;
  return () => cached || (cached = require(module));
};
const getDatabase = lazyLoad('./database');

// 2. 使用 v8-compile-cache
require('v8-compile-cache');

// 3. 分离主进程和渲染进程的打包
// 主进程只打包 Node.js 依赖，渲染进程用 Vite/Webpack

// 1. 及时销毁不需要的窗口
win.on('closed', () => {
  win = null; // 让 GC 回收
});

// 2. 限制渲染进程数量
// 能用标签页就不用新窗口
const { session } = require('electron');

// 3. 清理 session 缓存
session.defaultSession.clearCache();
session.defaultSession.clearStorageData({
  storages: ['cookies', 'localstorage'],
});

// 4. 启用 Chromium 垃圾回收
app.commandLine.appendSwitch('js-flags', '--max-old-space-size=256');

// 1. 使用 requestAnimationFrame 而非 setInterval 做动画
// 2. 大列表用虚拟滚动（react-window / vue-virtual-scroller）
// 3. 图片懒加载
// 4. 避免同步 IPC 调用（ipcRenderer.sendSync 会阻塞渲染进程）

// 5. 使用 webContents 的 backgroundThrottling
win.webContents.backgroundThrottling = true; // 后台时降低 FPS

const win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,      // 隔离上下文
    nodeIntegration: false,      // 禁用 Node.js
    sandbox: true,               // 启用沙箱
    webSecurity: true,           // 同源策略
    allowRunningInsecureContent: false, // 禁止 HTTP
    spellcheck: true,
  },
});

// 主进程：验证来自渲染进程的消息
ipcMain.handle('file:read', (event, filePath) => {
  // 验证 sender
  const senderWindow = BrowserWindow.fromWebContents(event.sender);
  if (!senderWindow) return;

  // 验证文件路径（防止路径穿越攻击）
  const allowedDir = app.getPath('userData');
  const resolvedPath = path.resolve(filePath);
  if (!resolvedPath.startsWith(allowedDir)) {
    throw new Error('不允许访问此路径');
  }

  return fs.readFileSync(resolvedPath, 'utf-8');
});

module.exports = {
  packagerConfig: {
    name: 'MyApp',
    executableName: 'myapp',
    icon: 'assets/icon',
    asar: true,             // 打包为 asar 归档
    prune: true,            // 移除 devDependencies
    overwrite: true,
    // 平台特定配置
    win: {
      target: ['nsis'],
    },
    mac: {
      target: ['dmg'],
      category: 'public.app-category.productivity',
    },
    linux: {
      target: ['AppImage', 'deb'],
      category: 'Utility',
    },
  },
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'myapp',
        setupIcon: 'assets/setup-icon.ico',
      },
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-dmg',
      config: {},
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-appx',
      config: {},
    },
  ],
};