我的第一个Electron程序

## 第一步:安装NodeJS

进入NodeJS官网：https://nodejs.org/zh-cn
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/1794200260.png)
点击下载LTS版本(长期支持版)，静待下载完成后打开点击Next，
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/4036036181.png)
选择路径时尽量选择非系统盘且无中文路径的路径。
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/3838881925.png)
之后按照提示完成安装即可，完成后需要在系统变量中检查是否有选择的安装路径，若没有需要手动添加：
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/2486341164.png)
在终端输入`node -v`回车，若出现版本号即为安装成功！
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/1078551079.png)

## 第二步:新建一个NodeJS项目

在任意位置新建一个文件夹，将其命名为`MyFristElectron`
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/822263603.png)

在该文件夹中运行终端，输入`npm init`以初始化项目，
将其项目入口改为`main.js`符合electron项目习惯。
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/2537950205.png)

完成后输入`npm install electron`来安装依赖包，如果你需要安装特定版本，则应在后面添加@，如`npm install electron@22.3.0`
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/1330079805.png)

electron项目结构一般为以下示例：

your-electron-app/
├── src/                   # 核心源代码
│   ├── main/             # 主进程代码（必须）
│   │   ├── main.js       # 主进程入口文件
│   │   ├── ipcHandlers/  # IPC 通信处理逻辑（可选）
│   │   └── ...           # 其他主进程模块
│   │
│   ├── renderer/         # 渲染进程代码（前端部分）
│   │   ├── public/       # 静态资源（HTML/CSS/图片）
│   │   │   ├── index.html
│   │   │   ├── styles/
│   │   │   └── assets/
│   │   │
│   │   ├── src/          # 前端框架代码（如 React/Vue）
│   │   │   ├── App.jsx   # 根组件
│   │   │   ├── components/
│   │   │   └── ...
│   │   │
│   │   └── preload.js    # 预加载脚本（桥接主进程和渲染进程）
│   │
│   └── shared/           # 主进程和渲染进程共享的代码（如工具类）
│
├── build/                # 构建输出目录（自动生成）
│   ├── app/              # 打包后的应用程序
│   └── installer/        # 安装包（如 .exe, .dmg）
│
├── scripts/              # 自定义脚本（如打包、部署）
│   ├── build.js
│   └── ...
│
├── test/                 # 测试代码（单元测试/E2E测试）
│   ├── main/
│   ├── renderer/
│   └── ...
│
├── package.json          # 项目依赖和配置
├── electron-builder.json  # 打包配置（如图标、签名）
├── .env                  # 环境变量（可选）
└── ...                   # 其他配置文件（如 .gitignore）

**但作为第一个项目，可以简化一下结构：**

your-electron-app/
├── src/                   # 核心源代码
│   │
│   ├── public/       # 静态资源（HTML/CSS/图片）
│   │   ├── index.html
│   │   ├── styles/
│   │   └── assets/
│   │   │
│   └── preload.js    # 预加载脚本（桥接主进程和渲染进程）
│
├── build/                # 构建输出目录（自动生成）
│   ├── app/              # 打包后的应用程序
│   └── installer/        # 安装包（如 .exe, .dmg）
│
├──  main.js       # 主进程入口文件
├── package.json          # 项目依赖和配置
├── .env                  # 环境变量（可选）
└── ...                   # 其他配置文件（如 .gitignore）your-electron-app/
├── src/                   # 核心源代码
│   │
│   ├── public/       # 静态资源（HTML/CSS/图片）
│   │   ├── index.html
│   │   ├── styles/
│   │   └── assets/
│   │   │
│   └── preload.js    # 预加载脚本（桥接主进程和渲染进程）
│
├── build/                # 构建输出目录（自动生成）
│   ├── app/              # 打包后的应用程序
│   └── installer/        # 安装包（如 .exe, .dmg）
│
├──  main.js       # 主进程入口文件
├── package.json          # 项目依赖和配置
├── .env                  # 环境变量（可选）
└── ...                   # 其他配置文件（如 .gitignore）

## 第三步:编写代码

#### 1、修改package文件

修改package.json文件，以便于调试，在scripts对象中追加一个执行命令：
`"scripts": { "start": "electron ." }`
![2025-02-26T14:02:21.png][9]

#### 2、创建main.js

将main.js作为应用的入口文件，需要在main里添加创建Win窗口命令

```js
/ 导入electron对象
// app 控制应用程序的事件生命周期。
// BrowserWindow 创建并控制浏览器窗口。
const { app,BrowserWindow } = require('electron')
const path = require('path'); // path用于处理文件路径
__rendererdir = './src/renderer'
__publicdir = './src/public'

// 控制ready事件
app.on('ready',()=> {
// 新建窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // 控制是否在渲染进程中启用 Node.js 集成
contextIsolation: true, // 控制是否在渲染进程中启用上下文隔离
preload: path.join(__dirname, __rendererdir + '/preload.js')
}
})
// 让窗口加载html文件
win.loadFile( __publicdir + '/index.html' )
// 浏览器调试工具
win.webContents.openDevTools()
})
```

#### 3、创建index.html

根据项目结构，需要在`./src/public/`中创建index.html文件，并将其添加以下内容

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello,World!</h1>
</body>
</html>
```

#### 4、创建preload.js(预加载脚本)

预加载脚本用于应用的浏览器环境js与main进程通信，预加载程序，因为在除了main.js外，其他js脚本中不可进行与Windows系统的交互，需要通过nodejs与其交互，根据项目结构须在`./src/renderer/`中创建preload.js文件，创建完成后项目文件如下
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/2923670463.png)

#### 5、启动测试

在终端中输入`npm run start`进行启动测试，出现如下图结果说明启动成功
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/574075311.png)

## 第四步:热加载调试

如果觉得每次编写代码后调试都需要重新启动项目麻烦，可以添加热加载模块`electon-reloader`，通过在终端输入
`npm install --save-dev electron-reloader`
来安装到dev测试环境中，完成后在main.js代码中添加

```js
// 开启热加载
const reloader = require('electron-reloader')
reloader(module)
```

即可开启热加载。

## 第五步:主进程与渲染进程之间的通信

主进程(main.js)是Electron 应用的入口点，负责管理整个应用的生命周期和系统资源，具有唯一性，权限高：可以直接调用 node.js API 和 Electron 的系统级功能（如文件系统、系统菜单、对话框等）。
渲染进程是每个 Electron 窗口所调用的脚本文件（HTML/CSS/JavaScript）负责显示网页内容，渲染进程默认不启用`nodeIntegration`，避免恶意代码攻击，所以无法直接调用nodejs的API，当操作需要使用nodejs API时，可用`IPC（Inter-Process Communication）`配合预加载脚本来进行与main之间的通信，以main为主体执行相关操作。

#### 1、添加`ipcMain`模块

在main.js中，修改第四行`const { app,BrowserWindow } = require('electron')`将其添加一个`ipcMain`的模块
`const { app, BrowserWindow, ipcMain } = require('electron')`

#### 2、创建IPC监听实现窗口关闭与最小化

在main.js中，添加以下代码：

```js
ipcMain.on('window-control', (event, action) => { // 监听主进程发送过来的消息
const win = BrowserWindow.fromWebContents(event.sender) // 获取发送消息的窗口
if (!win) return

switch (action) {
case 'minimize': // 最小化窗口
	win.minimize();
	break;
case 'close': // 关闭窗口
	win.close();
	break;
}
})
```

`ipcMain.on()`用于监听渲染进程发送的单向异步消息（不需要返回结果），如果需要回复渲染进程，需通过`event.reply`手动发送响应，若有需要可以为同一个事件注册多个监听器。
`ipcMain.handle()`用于处理渲染进程发起的请求-响应式异步调用（需要返回结果），同一事件只能注册一个处理函数，后注册的会覆盖前者，更符合现代异步编程模式（如 async/await）。

#### 3、编写预加载脚本

在preload.js中，添加以下代码：

```js
const { contextBridge, ipcRenderer } = require('electron'); // 引用electron的api

contextBridge.exposeInMainWorld('app', {
control: (action) => ipcRenderer.send('window-control', action) // 控制窗口
});
```

`contextBridge`是 Electron 中用于安全隔离渲染进程与主进程的关键模块，它通过预加载脚本（preload）将有限的 Node.js 或主进程功能暴露给渲染进程，同时避免直接暴露全局对象（如 require 或 process），从而提升应用的安全性。

#### 4、修改index内容

在`<body>`中添加两个按钮：

```html
<button onclick="window.app.control('minimize')">最小化窗口</button>
<button onclick="window.app.control('close')">关闭窗口</button>
```

![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/2119189144.png)

#### 5、启动调试

保存后在终端输入`npm run start`启动调式

## 资源下载

[hide]<botton class="link-botton" onClick="window.open('https://pan.soki.me/f/pLf4/MyFirstElectron.zip')">MyFirstElectron.zip</botton><botton class="link-botton" onClick="window.open('https://pan.soki.me/f/wNsL/node-v22.14.0-x64.msi')">node-v22.14.0-x64.msi</botton>[/hide]

## 第一步:安装NodeJS

## 第二步:新建一个NodeJS项目

在任意位置新建一个文件夹，将其命名为`MyFristElectron`
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/822263603.png)

electron项目结构一般为以下示例：

**但作为第一个项目，可以简化一下结构：**

## 第三步:编写代码

#### 1、修改package文件

修改package.json文件，以便于调试，在scripts对象中追加一个执行命令：
`"scripts": { "start": "electron ." }`
![2025-02-26T14:02:21.png][9]

#### 2、创建main.js

将main.js作为应用的入口文件，需要在main里添加创建Win窗口命令

#### 3、创建index.html

根据项目结构，需要在`./src/public/`中创建index.html文件，并将其添加以下内容

#### 4、创建preload.js(预加载脚本)

#### 5、启动测试

在终端中输入`npm run start`进行启动测试，出现如下图结果说明启动成功
![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/574075311.png)

## 第四步:热加载调试

```js
// 开启热加载
const reloader = require('electron-reloader')
reloader(module)
```

即可开启热加载。

## 第五步:主进程与渲染进程之间的通信

#### 1、添加`ipcMain`模块

在main.js中，修改第四行`const { app,BrowserWindow } = require('electron')`将其添加一个`ipcMain`的模块
`const { app, BrowserWindow, ipcMain } = require('electron')`

#### 2、创建IPC监听实现窗口关闭与最小化

在main.js中，添加以下代码：

```js
ipcMain.on('window-control', (event, action) => { // 监听主进程发送过来的消息
const win = BrowserWindow.fromWebContents(event.sender) // 获取发送消息的窗口
if (!win) return

switch (action) {
case 'minimize': // 最小化窗口
	win.minimize();
	break;
case 'close': // 关闭窗口
	win.close();
	break;
}
})
```

#### 3、编写预加载脚本

在preload.js中，添加以下代码：

```js
const { contextBridge, ipcRenderer } = require('electron'); // 引用electron的api

contextBridge.exposeInMainWorld('app', {
control: (action) => ipcRenderer.send('window-control', action) // 控制窗口
});
```

#### 4、修改index内容

在`<body>`中添加两个按钮：

```html
<button onclick="window.app.control('minimize')">最小化窗口</button>
<button onclick="window.app.control('close')">关闭窗口</button>
```

![请输入图片描述](https://www.soki.me/usr/uploads/2025/02/2119189144.png)

#### 5、启动调试

保存后在终端输入`npm run start`启动调式

## 资源下载

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

最后修改：2025 年 10 月 09 日

👆请简单粗暴地爱我。

我的第一个Electron程序

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Spring框架依赖注入

MySQL知识扩展

Day12 - JDBC驱动安装及其简单使用方法

Java常用注解表

Electron的简介

Vue3过渡与动画

AlibabaCloud微服务注册与发现

Day10 - SQL高级查询与数据库设计精要

SpringCloud负载均衡与Feign调用

Vue3setup语法糖

我的第一个Electron程序

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

我的第一个Electron程序

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款