跨平台JavaScript_Electron桌面应用开发

Electron通过结合Chromium和Node.js使前端开发者能用HTML、CSS、JavaScript构建跨平台桌面应用，其核心由主进程（管理窗口与系统功能）和渲染进程（展示UI）组成，两者通过预加载脚本与IPC安全通信，使用electron-builder可打包为各平台可执行文件，关键在于理清进程分工与通信机制。

Electron 让前端开发者可以用熟悉的 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，支持 Windows、macOS 和 Linux。它结合了 Chromium 渲染引擎和 Node.js 运行环境，让你既能写网页，又能访问系统底层功能。

Electron 核心架构

Electron 应用由两个主要进程组成：

• 主进程（Main Process）：负责创建窗口、管理应用生命周期和调用系统原生功能（如菜单、托盘图标）。每个应用只有一个主进程。
• 渲染进程（Renderer Process）：每个窗口都是一个独立的渲染进程，运行在 Chromium 中，负责 UI 展示。可以有多个渲染进程，彼此隔离。

主进程使用 BrowserWindow 创建窗口，每个窗口加载一个 HTML 页面，就像打开一个网页一样，但这个页面能通过预加载脚本与 Node.js 通信。

快速搭建开发环境

初始化项目并安装 Electron：

npm init -y
npm install electron --save-dev

在 package.json 中添加启动命令：

"scripts": {
  "start": "electron main.js"
}

创建 main.js 作为入口文件：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: __dirname + '/preload.js'
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

安全与进程通信

直接在渲染进程中启用 Node.js 有安全风险。推荐做法是通过预加载脚本暴露有限接口：

创建 preload.js：

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

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => ipcRenderer.send(channel, data),
  on: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args))
})

在渲染进程中发送消息：

window.electronAPI.send('msg-from-renderer', 'Hello Main')

在主进程中监听：

ipcMain.on('msg-from-renderer', (event, data) => {
  console.log(data)
})

打包与发布

使用 electron-builder 打包应用：

npm install --save-dev electron-builder

配置 package.json：

"build": {
  "productName": "MyApp",
  "appId": "com.example.myapp",
  "win": { "target": "nsis" },
  "mac": { "target": "dmg" },
  "linux": { "target": "AppImage" }
}

添加打包命令：

"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

运行 npm run dist 即可生成对应平台的可执行文件。

基本上就这些。Electron 降低了桌面开发门槛，只要会写网页就能做出跨平台应用，关键是理清主进程和渲染进程的分工，合理设计通信机制，注意安全设置。不复杂但容易忽略细节。