JavaScript_跨平台开发与Electron实战-js教程-PHP中文网

JavaScript_跨平台开发与Electron实战

夢幻星辰

发布： 2025-11-21 20:35:02

原创

322人浏览过

Electron是基于Chromium和Node.js的桌面应用开发框架，支持HTML、CSS、JavaScript技术栈，广泛用于VS Code、Slack等跨平台应用。

javascript_跨平台开发与electron实战

用 JavaScript 做跨平台桌面应用，Electron 是目前最成熟的选择。它让前端开发者能用熟悉的 HTML、CSS 和 JavaScript 技术栈构建 Windows、macOS 和 Linux 上的桌面程序。从 VS Code 到 Slack，不少知名应用都基于 Electron 开发。

Electron 是什么？

Electron 由 GitHub 开发并开源，核心原理是结合了 Chromium 渲染引擎和 Node.js 运行时。这意味着你可以同时访问浏览器 API 和系统底层功能（如文件操作、窗口管理）。每个 Electron 应用包含两个主要进程：

主进程：负责创建窗口、管理生命周期，拥有完整的 Node.js 环境。
渲染进程：每个窗口中的网页运行在独立的渲染进程中，可使用 DOM 操作，但默认受限于沙箱安全策略。

主进程和渲染进程通过 IPC（进程间通信）机制交换数据，这是开发中必须掌握的基础技能。

快速搭建一个 Electron 应用

开始前确保已安装 Node.js。然后初始化项目并安装 Electron：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

在项目根目录创建入口文件 main.js：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  })
  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()
})

登录后复制

再创建一个简单的 index.html 页面：

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

<html>
  <body>
    <h1>Hello from Electron!</h1>
  </body>
</html>

登录后复制

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

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

登录后复制

运行 npm start，就能看到窗口弹出。

实战技巧与优化建议

实际开发中会遇到性能、安全和打包等问题，以下是一些关键点：

避免启用 nodeIntegration：默认关闭更安全。如需调用 Node API，可通过预加载脚本（preload）暴露有限接口。
使用 preload 脚本桥接能力：在 webPreferences 中配置 preload 文件，利用 contextBridge 向渲染进程安全注入方法。
合理使用 IPC：主进程处理文件读写、系统通知等敏感操作，渲染进程只负责界面交互。
控制资源占用：Electron 应用内存消耗较高，尽量减少页面复杂度，避免加载大型第三方库。
打包发布应用：推荐使用 electron-builder 或 electron-packager，支持多平台一键打包成安装包。