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

news2025/1/10 9:39:18

创建一个基本的 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"
    }
  }
}