本篇文章参考大佬文章，大佬文章链接如下

https://blog.csdn.net/2302_80329073/article/details/155160346

一、项目运行环境准备

1.1安装 Node.js

注意Node.js v22 不兼容 Electron 截至 2025 年初，Electron 最高支持 Node.js v20.x

确保你已安装 Node.js（建议使用 LTS 版本）。在终端中运行：

node -v

npm -v

如果版本过高，🔗 直接下载链接示例（v20.14.0）：

https://nodejs.org/dist/v20.14.0/node-v20.14.0-x64.msi

如果版本过高

下载完之后运行安装程序
  • 双击 .msi 文件；
  • 按照向导一步步安装（建议默认选项）；
  • 安装完成后，重启终端（PowerShell 或 CMD）。

1.2更换适配的npm版本

node版本和npm版本要兼容，这里需要更改一下npm版本

npm install -g npm@10.8.0

1.3创建项目目录

我在D盘下创建了一个my-electron-app目录

1.4安装 Electron

进入my-electron-app目录终端

执行

npm install -g cnpm --registry=https://registry.npmmirror.com

再执行

cnpm install --save-dev electron

命令成功运行之后，再终端执行npx electron --version命令查看是否安装成功

二、编写主进程代码

2.1创建主进程入口文件 main.js

进入到my-electron-app目录，新建一个.txt记事本文件把下面代码复制进去，然后ctrl＋s保存退出去将文件名改为main文件拓展名改成.js

代码如下：

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 可选：用于安全注入脚本
    }
  });

  // 加载本地 HTML 文件
  win.loadFile('index.html');
}

// 当 Electron 初始化完成后触发
app.whenReady().then(() => {
  createWindow();

  // macOS 下即使所有窗口关闭，应用也不退出
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 所有平台：当所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

2.2创建页面内容（渲染进程）

进入到my-electron-app目录，新建一个.txt记事本文件把下面代码复制进去，然后ctrl＋s保存退出去将文件名改为index文件拓展名改成.html

代码如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个 Electron 应用</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #f0f0f0;
    }
    h1 {
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Hello, Electron!</h1>
</body>
</html>

2.3添加预加载脚本

出于安全考虑，Electron 默认禁用了渲染进程对 Node.js API 的直接访问。如需在页面中调用部分 Electron 功能，可通过 preload.js 暴露有限接口。

进入到my-electron-app目录，新建一个.txt记事本文件把下面代码复制进去，然后ctrl＋s保存退出去将文件名改为preload文件拓展名改成.js

代码如下：

// preload.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

2.4配置启动脚本

打开 package.json，添加启动命令，添加完后package.json代码如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^39.2.5"
  }
}

三、环境搭建完毕开始运行应用

进入my-electron-app终端输入npm start

项目运行成功

四、注意事项

4.1注意事项一

上面四个文件的添加均是在my-electron-app目录下添加

4.2注意事项二

Electron 降低了桌面开发门槛，但也要注意其资源占用较高的特点。合理使用，它将成为你构建跨平台工具的强大利器。

总体来说没有遇到什么太大的问题，主要就是版本号哪里需要注意一下，node和npm版本过高的需要注意一下，更换一下版本

# 学习 # electron
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter 三方库 holiday_jp 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、全维度的日本法定节假日（公休日）查询与日历调度引擎

本文介绍了Flutter三方库holiday_jp在鸿蒙(OpenHarmony)系统中的适配应用，该库专注于提供日本法定假期数据。文章从原理分析、安装配置、核心API到典型应用场景，详细阐述了如何在鸿蒙出海应用中实现日本节假日的精准查询与调度。通过holiday_jp库，开发者可以轻松处理复杂的日本假期逻辑，包括自动补休计算等，为针对日本市场的鸿蒙应用提供极致的本土化体验。文中还提供了实战代码示

avatar 人工智能6S服务平台
cover

鸿蒙学习实战之路-STG系列(11/11)-Screen Time Guard Kit完整实战案例

avatar 人工智能6S服务平台

Flutter 三方库 http_status_code 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、严谨、工业级的网络响应审计与 HTTP 状态码语义化控制引擎

本文介绍了如何在鸿蒙（OpenHarmony）系统中适配Flutter三方库http_status_code，构建工业级网络响应审计系统。该库通过RFC标准定义HTTP状态码枚举和描述查询，提升代码可读性、维护性和错误处理能力。文章详细解析了其原理、鸿蒙适配方案、核心API及典型应用场景，包括网络拦截器自动化和监控大屏开发。同时指出需注意非标状态码处理和国际化等挑战，并提供了实战示例。该库为鸿蒙应

avatar 人工智能6S服务平台