当前位置：首页 > news >正文

创建基本的 Electron 应用项目的详细步骤

news 2025/2/9 12:48:57

创建一个基本的 Electron 应用项目的详细步骤。我们将从安装 Node.js 开始，然后创建项目文件夹并初始化 Electron 项目。

1. 安装 Node.js

首先，确保你已经安装了 Node.js 和 npm。你可以在终端中运行以下命令来检查是否已经安装：

node -v
npm -v

如果终端返回了 Node.js 和 npm 的版本信息，说明你已经安装了它们。如果没有返回版本信息，你需要先安装 Node.js。

你可以从官网下载并安装最新版本的 Node.js。安装完成后，再次运行上述命令检查版本信息。

2. 创建项目文件夹

打开终端，创建一个名为 demo 的文件夹，并进入该文件夹：

mkdir demo
cd demo

3. 初始化项目

在 demo 文件夹中初始化一个新的 Node.js 项目。运行以下命令：

npm init -y

这将创建一个默认的 package.json 文件，其中包含了项目的元数据。

4. 安装 Electron

安装 Electron 作为项目的开发依赖

npm install --save-dev electron

5. 配置项目

创建主进程文件

在项目根目录下创建一个名为 main.js 的文件，这是 Electron 应用的主进程文件。编辑 main.js，添加以下内容：

const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,icon: path.join(__dirname, '/img/logo.ico'), // 设置图标webPreferences: {preload: path.join(__dirname, 'preload.js')}});mainWindow.loadFile('index.html');// 隐藏菜单栏Menu.buildFromTemplate([]);Menu.setApplicationMenu(null);
}app.whenReady().then(() => {createWindow();app.on('activate', function() {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});app.on('window-all-closed', function() {if (process.platform !== 'darwin') app.quit();
});

创建预加载文件

在项目根目录下创建一个名为 preload.js 的文件，这是预加载脚本文件，用于在主进程和渲染进程之间进行通信。编辑 preload.js，添加以下内容：

const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electron', {send: (channel, data) => {ipcRenderer.send(channel, data);},receive: (channel, func) => {ipcRenderer.on(channel, (event, ...args) => func(...args));}
});

创建 HTML 文件

在项目根目录下创建一个名为 index.html 的文件，这是 Electron 应用的主界面。编辑 index.html，添加以下内容：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Electron App</title>
</head>
<body><h1>Welcome to Electron App</h1><button id="sendButton">Send Message</button><script src="renderer.js"></script>
</body>
</html>

创建渲染进程文件

在项目根目录下创建一个名为 renderer.js 的文件，这是渲染进程的脚本文件。编辑 renderer.js，添加以下内容：

document.getElementById('sendButton').addEventListener('click', () => {window.electron.send('message', 'Hello from Renderer');
});window.electron.receive('response', (data) => {alert(`Received response: ${data}`);
});

6. 修改 `package.json`

确保 package.json 文件中有启动脚本。编辑 package.json，添加 start 脚本：

{"name": "demo","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^33.3.1"}
}

7. 启动项目

在终端中运行以下命令来启动 Electron 应用：

npm start

运行效果：

8. 安装 Electron 和 electron-builder

npm install electron --save-dev
npm install electron-builder --save-dev

9.配置 `package.json`

在 package.json 文件中添加或修改以下内容：

{"name": "your-app-name","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","build": "electron-builder"},"build": {"appId": "com.yourcompany.yourapp","productName": "YourAppName","directories": {"buildResources": "build","output": "release"},"files": ["dist/**/*","node_modules/**/*","package.json"],"win": {"target": "nsis","icon": "build/icon.ico"},"mac": {"target": "dmg","icon": "build/icon.icns"},"linux": {"target": "AppImage","icon": "build/icon.png"}}
}