Electron 桌面应用开发实战指南

引言

当前前端开发竞争激烈，掌握桌面端技能有助于提升竞争力。招聘市场中，许多岗位要求全栈能力，甚至涉及桌面端开发。Electron 允许使用 HTML、CSS、JavaScript 技术栈构建跨平台桌面应用，无需学习 C# 或 C++。

虽然跨平台能力强，但需注意不同操作系统的路径分隔符、系统通知 API 差异及功能支持情况。本文旨在解析 Electron 架构，提供项目搭建、安全配置及性能优化方案。

Electron 架构解析

核心架构：Chromium 与 Node.js

Electron 的核心由两部分组成：Chromium 负责渲染界面，Node.js 负责操作系统级别的操作。Chromium 运行 HTML、CSS、JavaScript，而 Node.js 允许在应用中直接调用 fs 模块读写文件、启动系统命令或访问数据库。

Electron 将这两个部分分为"主进程"（Main Process）和"渲染进程"（Renderer Process）。主进程运行 Node.js，负责创建窗口、管理生命周期及系统操作。渲染进程是 Chromium 实例，负责展示界面和响应用户交互。

两者通过 IPC（进程间通信）机制通信。渲染进程不能直接访问系统 API，需发送消息给主进程处理，这种设计增强了安全性。

// 主进程 main.js - 应用入口
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true,
            enableRemoteModule: false,
            nodeIntegration: false
        }
    });

    mainWindow.loadFile('index.html');

    mainWindow.(,  {
        mainWindow = ;
    });
}

app.().(createWindow);

app.(,  {
     (process. !== ) {
        app.();
    }
});

ipcMain.(,  (event, filePath) => {
     {
         content =  fs..(filePath, );
         { : , content };
    }  (error) {
         { : , : error. };
    }
});

Electron 桌面应用开发实战指南