步骤 1: 准备工作
1. 安装 Node.js:
- 确保你的计算机上安装了 [Node.js](https://nodejs.org/)，因为 Electron 是基于 Node.js 构建的。
2. 创建项目文件夹:
- 在你选择的位置创建一个新的文件夹，用于存放你的 Electron 项目。
3. 初始化 npm 项目:
- 在项目文件夹中打开终端，运行以下命令初始化 npm 项目：
npm init -y
4. 安装 Electron:
- 运行以下命令安装 Electron：
npm install electron --save-dev
步骤 2: 创建主进程文件
1. 创建主进程文件:
- 在项目文件夹中创建一个名为 main.js 的文件，用于定义 Electron 应用程序的主进程。
2. 编写主进程代码:
- 编写以下基本的主进程代码，创建一个最小的 Electron 窗口：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
步骤 3: 创建渲染进程文件
1. 创建渲染进程文件:
- 在项目文件夹中创建一个名为 index.html 的文件，用于定义 Electron 窗口的内容。
2. 编写渲染进程代码:
- 编写一个简单的 HTML 文件，例如：
<!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
步骤 4: 运行 Electron 应用
1. 修改 package.json 文件:
- 在 package.json 文件中，将 "scripts" 部分的 "test" 修改为 "start"：
"scripts": {
"start": "electron main.js"
}
2. 运行应用:
- 运行以下命令启动 Electron 应用：
npm start
这样，你就完成了一个简单的 Electron 应用的创建。在这个示例中，我们创建了一个最小的 Electron 窗口，加载了一个简单的 HTML 页面。
请注意，这只是一个入门级的示例。随着你深入了解 Electron，你可以添加更多功能，如菜单、对话框、文件系统访问等，以创建更复杂和实用的桌面应用。
转载请注明出处：http://www.zyzy.cn/article/detail/10889/Electron