构建您的一个Electron应用程序-CSDN博客

本文链接：https://blog.csdn.net/qq_45616003/article/details/126484892

本文详细介绍了如何从零开始搭建一个Electron应用。首先，通过检查Node.js和npm的版本确保环境就绪。接着，创建一个新的Electron项目，配置package.json文件，并指定入口文件为`src/main.js`。然后，在`src/main.js`中编写代码来创建和管理应用窗口。最后，提供了一个简单的`src/index.html`作为应用加载的网页。遵循这些步骤，你将能够成功构建一个基本的Electron桌面应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、检查node.js是否安装

node -v
npm -version

在这里插入图片描述

2、构建一个electron应用

mkdir my-electron-app

cd my-electron-app

npm init 

npm install electron --save-dev

3、配置入口文件package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js", // 入口文件
  "scripts": {
    "start": "electron ." // npm 启动脚本命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^20.0.3"
  }
}

4、入口文件src/main.js

// 导入
// app，它控制应用程序的事件生命周期。
// BrowserWindow，它创建和管理应用程序窗口。
const { app, BrowserWindow } = require('electron')
// 编写一个可重用的函数来实例化
// createWindow()函数将您的网页加载到一个新的 BrowserWindow 实例中
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  win.loadFile('src/index.html')
}
// 应用
// 如果没有打开窗口，则打开一个窗口
app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});
// 关闭所有窗口后退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

5、入口文件加载的网页src/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Electron</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <h3>This is a Electron App!</h3>
    <p>👋</p>
  </body>
</html>

效果

在这里插入图片描述