Electron是目前最流行的跨平台桌面应用开发框架之一，它允许开发者使用HTML、CSS、JavaScript等前端技术，结合Node.js的能力，开发出可以在Windows、macOS、Linux系统上运行的桌面应用，像VS Code、Discord等知名应用都是基于Electron开发的。
Electron核心原理
Electron的架构分为主进程和渲染进程两部分。主进程是应用的入口，负责管理应用的生命周期、创建浏览器窗口、调用系统原生能力，一个Electron应用只有一个主进程。渲染进程则是每个浏览器窗口对应的进程，负责渲染页面内容，和普通的网页运行环境类似，同时可以通过预加载脚本和主进程通信。
环境准备
开发Electron应用需要先安装Node.js环境，建议安装LTS版本，安装完成后可以通过以下命令检查版本：
# 检查Node.js版本 node -v # 检查npm版本 npm -v
确认环境正常后，就可以开始创建第一个Electron项目了。
创建基础Electron项目
初始化项目
首先创建一个空的项目目录，进入目录后执行npm初始化命令：
mkdir electron-demo cd electron-demo npm init -y
初始化完成后，安装Electron依赖：
npm install electron --save-dev
项目文件结构
一个基础的Electron项目需要以下文件：
package.json：项目配置文件，定义启动脚本和依赖main.js：主进程文件，负责创建应用窗口index.html：渲染进程的页面文件preload.js：预加载脚本，用于安全地暴露主进程能力给渲染进程
配置启动脚本
修改package.json中的scripts字段，添加启动命令：
{
"name": "electron-demo",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
编写主进程代码
创建main.js文件，编写主进程逻辑：
const { app, BrowserWindow } = require('electron')
const path = require('path')
// 创建浏览器窗口的函数
function createWindow() {
// 创建宽800高600的窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 预加载脚本路径
preload: path.join(__dirname, 'preload.js')
}
})
// 加载渲染进程的页面
win.loadFile('index.html')
}
// 当Electron初始化完成后创建窗口
app.whenReady().then(() => {
createWindow()
// macOS系统中，点击 dock 图标时如果没有窗口打开则创建新窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
// 除了macOS之外，所有窗口关闭时退出应用
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
编写渲染进程页面
创建index.html文件，编写简单的页面内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个Electron应用</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding-top: 50px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>欢迎使用Electron</h1>
<p>这是一个跨平台桌面应用</p>
<button id="btn">点击获取系统信息</button>
<p id="info"></p>
<script src="renderer.js"></script>
</body>
</html>
编写预加载脚本
创建preload.js文件，安全地暴露Node.js能力给渲染进程：
const { contextBridge } = require('electron')
// 暴露一个获取系统平台的方法给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
getPlatform: () => process.platform
})
编写渲染进程交互脚本
创建renderer.js文件，处理页面交互逻辑：
// 获取按钮和信息展示元素
const btn = document.getElementById('btn')
const info = document.getElementById('info')
// 点击按钮时获取系统平台信息
btn.addEventListener('click', () => {
const platform = window.electronAPI.getPlatform()
info.textContent = `当前系统平台是：${platform}`
})
运行应用
在项目根目录执行以下命令启动应用：
npm start
此时会弹出一个桌面窗口，显示页面内容，点击按钮可以获取到当前运行的系统平台信息，说明应用已经正常运行。
打包发布
开发完成后需要将应用打包成不同平台的安装包，常用的打包工具是electron-builder，安装依赖后配置打包脚本即可：
npm install electron-builder --save-dev
在package.json中添加打包配置：
{
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"build": {
"appId": "com.example.electrondemo",
"mac": {
"category": "public.app-category.developer-tools"
},
"win": {
"target": "nsis"
},
"linux": {
"target": "AppImage"
}
}
}
执行npm run dist命令就可以生成对应平台的安装包，实现跨平台分发。