已发布·持续改进
Framework · 2013 年发布
Electron 是一个开源框架，可用 JavaScript、HTML 和 CSS 构建运行于 Windows、macOS 和 Linux 的桌面应用。
Electron 是一个用 Web 技术构建桌面应用程序的开源框架。它把负责渲染的 Chromium 和负责访问操作系统的 Node.js 打包进同一个运行时，因此一套代码就能发布为 Windows、macOS 和 Linux 应用。它于 2013 年在 GitHub 诞生，最初名为 Atom Shell，是 Atom 编辑器的基础，现在是 OpenJS Foundation 旗下的项目。
当熟悉 Web 开发的团队需要快速做出桌面应用时，Electron 的优势最为明显。Visual Studio Code、Slack 和 Discord 的桌面版都基于它构建，你可以直接沿用 React、Vue 等 Web 框架以及整个 npm 生态。由于每个应用都自带一份 Chromium，安装包体积和内存占用通常较大，这一点需要在一开始就考虑进去。
入门时先安装 Node.js，然后用 Electron Forge 创建项目，或者在空项目中添加 electron 包。官方教程会依次讲解主进程、预加载脚本和渲染器的结构，以及它们之间如何通过 IPC 通信。使用 Electron Fiddle 无需搭建项目就能运行小示例，是快速熟悉 API 的好办法。
Chromium 负责显示 HTML 和 CSS，主进程则通过 Node.js 访问文件系统、网络等操作系统功能。
同一份 JavaScript 或 TypeScript 代码即可生成 Windows、macOS 和 Linux 应用，并打包成各平台的原生安装程序。
窗口、菜单、托盘图标、通知、文件对话框、剪贴板和自动更新等桌面功能都以 JavaScript API 的形式提供。
主进程与渲染进程相互隔离，借助上下文隔离和预加载脚本，只向界面暴露真正需要的功能。
Electron 通过 Node.js 和 npm 安装与运行。请安装 Node.js 的 LTS 版本，并确认能显示两者的版本号。
node -v && npm -v在新文件夹中创建 package.json，并把 electron 安装为开发依赖。然后将 package.json 的 main 字段设为 main.js，并添加运行 electron . 的 start 脚本。
mkdir my-electron-app && cd my-electron-app && npm init -y && npm install --save-dev electron如果希望项目一开始就具备打包和发布能力，可以使用官方工具 Electron Forge 的创建命令。在生成的文件夹中运行 npm start 即可启动应用。
npm init electron-app@latest my-appmain.js 是主进程的入口。应用就绪后，它会创建一个 800×600 的 BrowserWindow，并加载同一文件夹中的 index.html。按照 macOS 的惯例，关闭所有窗口后应用仍会保留，因此只在其他平台上退出应用。在 main.js 旁边放一个简单的 index.html，然后运行 npm start。
main.js
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({ width: 800, height: 600 })
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()
})
npm init -y
npm install --save-dev electron
npm pkg set main=main.js scripts.start="electron ."
npm start共六章，带你从安装一步步了解 Electron 的核心概念。
在这里提问、分享经验，交流关于 Electron 的看法。
还没有讨论。来发起第一个吧。
0 条评论
登录 · 登录后即可发表评论。
来发表第一条评论吧。