昨天 17:27 发布于广东

关注

Electron 进阶教程：从功能完善到性能优化

在前一篇基础教程中，我们掌握了 Electron 的核心架构、环境搭建和基础功能开发。但要构建生产级应用，还需要深入了解菜单定制、系统集成、进程通信模式、安全加固和性能优化等进阶内容。本文将带你突破 “能用” 到 “好用” 的瓶颈，打造体验更接近原生的桌面应用。

一、应用菜单与快捷键：打造原生交互体验

Electron 允许通过代码完全自定义应用菜单（包括顶部菜单栏、右键上下文菜单），并绑定快捷键，让操作更符合用户的系统使用习惯。

1. 自定义顶部菜单栏

顶部菜单栏是桌面应用的核心交互入口，通过 Menu 和 MenuItem 模块可实现完全定制。在 main.js 中添加如下代码：

javascript

运行

const { app, BrowserWindow, Menu, MenuItem } = require('electron');

// 定义菜单模板
const menuTemplate = [
  {
    label: '文件', // 菜单名称（macOS 下第一个菜单会显示应用名，可通过 label: app.name 统一）
    submenu: [
      {
        label: '新建',
        accelerator: 'CmdOrCtrl+N', // 快捷键：Windows/Linux 用 Ctrl，macOS 用 Cmd
        click: () => {
          // 点击事件：例如创建新窗口或重置内容
          console.log('新建文件');
        }
      },
      {
        label: '打开',
        accelerator: 'CmdOrCtrl+O',
        click: () => { console.log('打开文件'); }
      },
      { type: 'separator' }, // 分隔线
      {
        label: '退出',
        accelerator: 'CmdOrCtrl+Q',
        click: () => { app.quit(); } // 退出应用
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { label: '撤销', accelerator: 'CmdOrCtrl+Z', role: 'undo' }, // 使用内置角色（自动实现功能）
      { label: '重做', accelerator: 'Shift+CmdOrCtrl+Z', role: 'redo' },
      { type: 'separator' },
      { label: '剪切', accelerator: 'CmdOrCtrl+X', role: 'cut' },
      { label: '复制', accelerator: 'CmdOrCtrl+C', role: 'copy' },
      { label: '粘贴', accelerator: 'CmdOrCtrl+V', role: 'paste' }
    ]
  },
  {
    label: '视图',
    submenu: [
      {
        label: '刷新',
        accelerator: 'F5',
        click: (_, focusedWindow) => { // focusedWindow 为当前激活窗口
          if (focusedWindow) focusedWindow.reload();
        }
      },
      {
        label: '开发者工具',
        accelerator: 'CmdOrCtrl+Shift+I',
        click: (_, focusedWindow) => {
          if (focusedWindow) focusedWindow.webContents.toggleDevTools();
        }
      }
    ]
  }
];

// 构建菜单并设置为应用菜单
const mainMenu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(mainMenu);

关键说明：

role 属性：Electron 内置了 undo、copy 等角色，自动实现对应功能，无需手动编写逻辑；
accelerator 快捷键：通过 CmdOrCtrl 适配不同系统，F5 等按键直接写名称；
macOS 兼容：第一个菜单默认显示应用名，可通过 label: app.name 统一跨平台显示。

2. 右键上下文菜单

在渲染进程中，可通过监听鼠标右键事件，动态创建上下文菜单（如文本编辑时的右键菜单）。在 index.html 的脚本中添加：

javascript

运行

const { ipcRenderer, remote } = require('electron');
const { Menu, MenuItem } = remote; // 渲染进程通过 remote 访问主进程模块

// 监听右键点击事件
document.addEventListener('contextmenu', (e) => {
  e.preventDefault(); // 阻止默认右键菜单
  
  // 创建上下文菜单
  const contextMenu = new Menu();
  contextMenu.append(new MenuItem({ label: '复制', role: 'copy' }));
  contextMenu.append(new MenuItem({ label: '粘贴', role: 'paste' }));
  contextMenu.append(new MenuItem({ type: 'separator' }));
  contextMenu.append(new MenuItem({
    label: '自定义选项',
    click: () => { alert('自定义右键功能'); }
  }));
  
  // 在鼠标位置显示菜单
  contextMenu.popup({ window: remote.getCurrentWindow() });
});

注意：remote 模块在 Electron 14+ 中默认禁用，需在 BrowserWindow 配置中开启：

javascript

运行

// main.js 中创建窗口时
new BrowserWindow({
  webPreferences: {
    enableRemoteModule: true, // 启用 remote 模块
    contextIsolation: false // 配合关闭上下文隔离
  }
});

二、系统级功能集成：突破浏览器限制

Electron 提供了丰富的系统级 API，让应用能调用原生功能，如通知、托盘图标、剪贴板等，大幅提升应用实用性。

1. 系统通知（Notification）

通过 Notification API 发送系统通知（需用户授权），在主进程或渲染进程中均可使用：

javascript

运行

// 主进程或渲染进程中
function showNotification(title, body) {
  // 检查系统是否支持通知
  if (Notification.isSupported()) {
    new Notification({
      title: title, // 通知标题
      body: body,   // 通知内容
      icon: './icon.png' // 通知图标（可选）
    }).show();
  }
}

// 调用示例
showNotification('新消息', '您有一条未读通知');

注意：macOS 下通知需要在 info.plist 中配置权限描述（打包时需添加）。

2. 托盘图标（Tray）

托盘图标是后台运行应用的常用入口（如微信、钉钉），可在主进程中创建：

javascript

运行

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

let tray = null;

app.whenReady().then(() => {
  // 创建托盘图标（推荐使用 24x24 或 32x32 的 png 图片）
  tray = new Tray(path.join(__dirname, 'tray-icon.png'));
  
  // 设置托盘提示文本
  tray.setToolTip('我的 Electron 应用');
  
  // 创建托盘右键菜单
  const contextMenu = Menu.buildFromTemplate([
    { label: '显示窗口', click: () => { mainWindow.show(); } },
    { label: '隐藏窗口', click: () => { mainWindow.hide(); } },
    { type: 'separator' },
    { label: '退出', click: () => { app.quit(); } }
  ]);
  tray.setContextMenu(contextMenu);
  
  // 点击托盘图标切换窗口显示/隐藏
  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
});

3. 剪贴板操作（clipboard）

通过 clipboard 模块读写系统剪贴板，支持文本、图片等格式：

javascript

运行

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

// 写入文本到剪贴板
clipboard.writeText('复制的内容');

// 读取剪贴板文本
const text = clipboard.readText();
console.log('剪贴板内容：', text);

// 处理图片（需配合 nativeImage 模块）
const { nativeImage } = require('electron');
const image = nativeImage.createFromPath('./image.png');
clipboard.writeImage(image); // 写入图片

三、IPC 通信高级模式：从简单调用到复杂交互

基础教程中我们用了 ipcMain.handle 和 ipcRenderer.invoke 实现单次通信，但实际开发中还有更多场景需要处理，如双向通信、广播通知等。

1. 双向持续通信（ipcMain.on 与 ipcRenderer.send）

适用于需要多次数据交互的场景（如实时日志推送）：

javascript

运行

// 主进程（main.js）
ipcMain.on('message-from-renderer', (event, data) => {
  console.log('收到渲染进程消息：', data);
  // 向渲染进程发送回应（可多次发送）
  event.reply('message-from-main', '主进程已收到：' + data);
});

// 渲染进程（index.html）
ipcRenderer.send('message-from-renderer', 'Hello 主进程！');
// 监听主进程的回应
ipcRenderer.on('message-from-main', (event, data) => {
  console.log('收到主进程消息：', data);
});

2. 多窗口通信与广播

当应用有多个窗口时，可通过主进程转发实现跨窗口通信：

javascript

运行

// 主进程：监听窗口 A 的消息，转发给所有窗口
ipcMain.on('broadcast', (event, data) => {
  // 获取所有打开的窗口
  const allWindows = BrowserWindow.getAllWindows();
  allWindows.forEach(window => {
    // 排除发送消息的窗口自身
    if (window.webContents.id !== event.sender.id) {
      window.webContents.send('broadcast', data);
    }
  });
});

// 窗口 A（渲染进程）：发送广播
ipcRenderer.send('broadcast', '这是一条广播消息');

// 窗口 B（渲染进程）：接收广播
ipcRenderer.on('broadcast', (event, data) => {
  console.log('收到广播：', data);
});

3. 同步通信（谨慎使用）

ipcMain.onSync 和 ipcRenderer.sendSync 可实现同步通信，但会阻塞进程，仅适用于极简单场景：

javascript

运行

// 主进程
ipcMain.onSync('sync-request', (event, data) => {
  return '同步回应：' + data; // 必须返回值
});

// 渲染进程
const result = ipcRenderer.sendSync('sync-request', '需要同步处理的数据');
console.log(result); // 输出：同步回应：需要同步处理的数据

四、安全加固：防范常见风险

Electron 应用因同时具备前端和 Node.js 能力，若配置不当可能引发安全风险（如 XSS 攻击、恶意代码执行）。生产环境需做好以下加固：

1. 禁用不必要的权限

关闭 nodeIntegration：默认禁用渲染进程的 Node.js 访问权限（仅在必要时开启）；
启用 contextIsolation：隔离渲染进程的上下文，防止恶意脚本篡改原生 API；
限制 webviewTag：如需使用 <webview> 标签，需显式开启并限制允许加载的 URL。

javascript

运行

// 安全的窗口配置
new BrowserWindow({
  webPreferences: {
    nodeIntegration: false, // 禁用 Node.js 集成
    contextIsolation: true, // 启用上下文隔离
    webviewTag: false, // 禁用 webview 标签（如需使用则设为 true）
    allowRunningInsecureContent: false, // 禁止加载非 HTTPS 内容
    enableRemoteModule: false // 禁用 remote 模块（推荐用 IPC 替代）
  }
});

2. 验证和限制外部资源

加载外部 URL 时，需验证域名合法性，防止加载恶意页面：

javascript

运行

// 主进程：监听页面跳转，验证 URL
mainWindow.webContents.on('will-navigate', (event, url) => {
  const allowedDomains = ['https://example.com', 'https://trusted.com'];
  const isAllowed = allowedDomains.some(domain => url.startsWith(domain));
  if (!isAllowed) {
    event.preventDefault(); // 阻止跳转
    console.warn('禁止访问非法域名：', url);
  }
});

3. 内容安全策略（CSP）

在 HTML 头部添加 CSP 元标签，限制资源加载来源，防止 XSS 攻击：

html

预览

<meta http-equiv="Content-Security-Policy" 
  content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">

default-src 'self'：仅允许加载本地资源；
script-src 'self'：仅允许执行本地脚本；
避免使用 'unsafe-eval' 和 'unsafe-inline'（必要时才添加）。

五、性能优化：解决 “体积大、内存高” 痛点

Electron 应用常被诟病 “体积大、内存占用高”，通过以下手段可显著优化：

1. 减小应用体积

按需打包依赖：使用 electron-builder 并配置 package.json 的 files 字段，仅打包必要文件：json
使用 ASAR 打包：将应用资源压缩为单个 .asar 文件，减少文件数量并保护代码：json

2. 降低内存占用

限制渲染进程数量：避免创建过多窗口，复杂界面可使用单窗口 + 路由（如 Vue/React 路由）；
优化页面渲染：减少 DOM 节点数量，避免不必要的重绘重排，使用 will-change 提示浏览器优化；
及时销毁资源：关闭窗口时手动清理事件监听、定时器和大型对象：javascript运行

3. 启动速度优化

简化主进程初始化逻辑：将非必要操作延迟到窗口显示后执行；
启用 V8 代码缓存：Electron 会自动缓存编译后的代码，首次启动后速度提升明显；
显示启动屏：通过 SplashScreen 模块（第三方）显示启动画面，掩盖初始化耗时。

六、高级打包与自动更新

基础教程中的 electron-packager 仅能生成可执行文件，生产环境推荐使用 electron-builder，支持生成安装包、签名和自动更新。

1. 使用 electron-builder 打包

bash

运行

# 安装依赖
npm install electron-builder --save-dev

在 package.json 中配置：

json

"scripts": {
  "dist": "electron-builder"
},
"build": {
  "appId": "com.example.myapp", // 应用唯一标识（反向域名格式）
  "productName": "我的应用",
  "directories": {
    "output": "release" // 输出目录
  },
  "win": {
    "target": ["nsis", "zip"], // 生成安装包和压缩包
    "icon": "build/icon.ico"
  },
  "mac": {
    "target": ["dmg", "zip"],
    "icon": "build/icon.icns"
  },
  "linux": {
    "target": ["deb", "rpm"]
  }
}

执行 npm run dist 即可生成对应系统的安装包。

2. 实现自动更新

结合 electron-updater 实现应用自动更新（需配合后端服务器存储更新包）：

javascript

运行

// 主进程中
const { autoUpdater } = require('electron-updater');

// 配置更新服务器地址（存放打包后的更新文件）
autoUpdater.setFeedURL({
  provider: 'generic',
  url: 'https://your-server.com/updates/' // 需替换为实际地址
});

// 检查更新
autoUpdater.checkForUpdates();

// 监听更新事件
autoUpdater.on('update-available', () => {
  console.log('有新版本可用，开始下载...');
});

autoUpdater.on('update-downloaded', () => {
  // 下载完成后提示安装
  autoUpdater.quitAndInstall();
});