electron 安装教程

复制代码

# 全局安装 cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

# 安装 Electron
cnpm install --save-dev electron

打包（electron-builder）镜像配置

打包时需额外配置 electron-builder-binaries 镜像，避免下载依赖失败。

1. 全局配置（推荐）

复制代码

# 设置 builder 镜像
npm config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/

核心功能开发

1. 安全通信：IPC 机制（必学）

Electron 主进程与渲染进程的通信核心是 IPC（进程间通信） ，需遵循安全规范（禁用 Node 集成、使用预加载脚本）。

（1）编写预加载脚本（preload.js）

通过 contextBridge 向渲染进程暴露受控 API ，避免直接暴露 ipcRenderer：

javascript

运行

复制代码

const { contextBridge, ipcRenderer } = require('electron/renderer');

// 向渲染进程挂载全局 API（window.electronAPI）
contextBridge.exposeInMainWorld('electronAPI', {
  // 渲染→主进程：单向通知
  sendMessage: (msg) => ipcRenderer.send('renderer-to-main', msg),
  // 渲染→主进程：双向请求（带返回值，推荐）
  requestData: (data) => ipcRenderer.invoke('main-handle', data),
  // 主→渲染进程：监听消息
  onMainMessage: (callback) => ipcRenderer.on('main-to-renderer', (_, msg) => callback(msg))
});

（2）渲染进程通信（renderer.js）

调用预加载脚本暴露的 API 完成通信：

javascript

运行

复制代码

// 1. 渲染→主进程：单向发送消息
document.addEventListener('DOMContentLoaded', () => {
  // 发送消息到主进程
  window.electronAPI.sendMessage('渲染进程已加载！');

  // 2. 渲染→主进程：双向请求数据
  const requestData = async () => {
    try {
      const result = await window.electronAPI.requestData('获取系统信息');
      console.log('主进程返回结果：', result);
    } catch (err) {
      console.error('请求失败：', err);
    }
  };
  requestData();

  // 3. 监听主进程推送的消息
  window.electronAPI.onMainMessage((msg) => {
    console.log('收到主进程消息：', msg);
    // 更新 UI
    const div = document.createElement('div');
    div.innerText = `主进程推送：${msg}`;
    document.body.appendChild(div);
  });
});

（3）主进程监听 / 处理通信（main.js）

补充 IPC 监听和处理逻辑：

javascript

运行

复制代码

// 在 createWindow 函数后添加
// 监听渲染进程的单向消息
ipcMain.on('renderer-to-main', (event, msg) => {
  console.log('收到渲染进程消息：', msg);
  // 主动向渲染进程推送消息
  mainWindow.webContents.send('main-to-renderer', `主进程已接收：${msg}`);
});

// 处理渲染进程的双向请求
ipcMain.handle('main-handle', async (event, data) => {
  if (data === '获取系统信息') {
    return {
      platform: process.platform,  // 系统平台（win32/darwin/linux）
      nodeVersion: process.version,  // Node 版本
      electronVersion: process.versions.electron  // Electron 版本
    };
  }
  throw new Error('未知请求类型');
});

2. 常用功能开发

（1）打开文件对话框

主进程调用 dialog 模块实现，渲染进程通过 IPC 触发：

javascript

运行

复制代码

// main.js 中添加
const { dialog } = require('electron');

// 监听打开文件请求
ipcMain.handle('open-file-dialog', async () => {
  const result = await dialog.showOpenDialog(mainWindow, {
    properties: ['openFile'],  // 选择文件
    filters: [                 // 文件过滤
      { name: '文本文件', extensions: ['txt', 'md', 'js'] },
      { name: '所有文件', extensions: ['*'] }
    ]
  });
  return result.canceled ? null : result.filePaths[0];
});