Electron

安装

1. 1

   准备 Node.js

   Electron 通过 Node.js 和 npm 安装与运行。请安装 Node.js 的 LTS 版本，并确认能显示两者的版本号。

   node -v && npm -v

   复制
2. 2

   在项目中添加 Electron

   在新文件夹中创建 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

   复制
3. 3

   使用 Electron Forge 开始

   如果希望项目一开始就具备打包和发布能力，可以使用官方工具 Electron Forge 的创建命令。在生成的文件夹中运行 npm start 即可启动应用。

   npm init electron-app@latest my-app

   复制

第一个程序

打开第一个窗口

main.js 是主进程的入口。应用就绪后，它会创建一个 800×600 的 BrowserWindow，并加载同一文件夹中的 index.html。按照 macOS 的惯例，关闭所有窗口后应用仍会保留，因此只在其他平台上退出应用。在 main.js 旁边放一个简单的 index.html，然后运行 npm start。

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 Forge

官方的一体化工具，涵盖项目创建、开发运行、打包、生成安装程序和发布。

electron-builder

广泛使用的打包工具，支持多平台安装程序、代码签名和自动更新。

Electron Fiddle

官方实验工具，可以快速编写小型 Electron 示例，并在不同的 Electron 版本中运行。

Playwright

可启动 Electron 应用进行端到端测试，操作窗口并在主进程中执行代码。

官方文档与参考资料

• 官方Electron
• 官方Electron Documentation
• 官方Electron Forge
• 学习Electron Tutorial
• 学习Electron Fiddle
• 参考BrowserWindow API
• 参考Electron Security Checklist
• 社区electron/electron on GitHub

使用的语言

• TypeScriptTypeScript 为 JavaScript 加入静态类型，在代码运行前发现错误，让大型代码库更易于维护。
• JavaScriptJavaScript 是一门以 ECMAScript 为标准的动态编程语言，可在所有 Web 浏览器以及 Node.js 等运行时中运行。