1. node
可以和Python类比理解：
Python：需要安装 Python 解释器（如 Python 3.x），才能运行 .py 文件。Node.js：需要安装 Node.js 运行时（基于 V8 引擎），才能运行 .js 文件。
Python 有 pip，Node.js 有 npm（Node Package Manager），两者都提供了丰富的第三方库生态，便于快速构建应用。
2. electron
Electron 是一个开源的跨平台桌面应用程序开发框架，它允许开发者使用 JavaScript、HTML 和 CSS 构建桌面 GUI 应用程序。Electron 的核心设计是基于 Chromium 浏览器引擎（用于前端渲染）和 Node.js（用于后端逻辑），从而将 Web 技术与系统级功能结合，实现跨平台（Windows、macOS、Linux）的桌面应用开发。
- Chromium：Electron 内嵌了完整的 Chromium 浏览器引擎，用于渲染用户界面（UI）。
- Node.js：Electron 集成了 Node.js，允许开发者调用操作系统底层 API（如文件系统、网络请求等）。
主进程与渲染进程：
主进程（Main Process）：负责管理应用生命周期（启动、退出）、创建窗口、处理系统事件等。
渲染进程（Renderer Process）：每个窗口对应一个渲染进程，运行 Web 页面（HTML/CSS/JS），通过 ipcRenderer 与主进程通信。
3. 安装Electron开发环境
以Ubuntu为例。
1
2
3
4
5
6
7
8
|
sudo apt install nodejs
sudo apt install npm
# 安装yarn包管理工具，比npm更先进的包管理工具
sudo npm install -g yarn
# 配置npm国内源
npm config set registry https://registry.npmmirror.com
|
安装electron环境
1
2
3
4
5
6
7
8
9
10
11
12
|
# 创建项目目录并进入
mkdir my-electron-app && cd my-electron-app
# 初始化项目
npm init -y
# 安装依赖（Ubuntu）
sudo apt update
sudo apt install -y build-essential libglu1-mesa-dev libx11-dev libxkbfile-dev libsecret-1-dev
# 安装 Electron，需要VPN从国外源下载，国内源下载不了。
npm install electron --save-dev
|
然后看一下项目结构：
1
2
3
4
|
my-electron-app/
├── node_modules/ # electron
├── package.json
└── package-lock.json
|
使用electron 编写一个小程序：
1
2
3
4
5
6
7
|
./my-electron-app
├── node_modules/
├── index.html # 渲染进程
├── main.js # 主进程
├── renderer.js # 渲染进程逻辑
├── package.json
└── package-lock.json
|
1
2
3
4
5
6
7
8
9
10
11
|
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^30.0.0"
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const { app, BrowserWindow } = require('electron');
// 创建窗口
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // 禁用 Node.js 集成（安全建议）
contextIsolation: true, // 启用上下文隔离（安全建议）
preload: __dirname + '/preload.js' // 预加载脚本（可选）
}
});
// 加载 HTML 页面
win.loadFile('index.html');
}
// 当应用初始化完成后创建窗口
app.whenReady().then(createWindow);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Electron</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<button id="demo-btn">点击我</button>
<script src="renderer.js"></script>
</body>
</html>
|
1
2
3
4
|
// 点击按钮触发事件
document.getElementById('demo-btn').addEventListener('click', () => {
alert('你点击了按钮！');
});
|
- 运行程序： npm start
