Electron hello world 初体验

简介

Electron 是一个强大的 开发跨平台的桌面应用程序 框架，框架大家应该都明白的，框架就像是一套工具箱，里面有很多工具可以帮助程序员更快、更方便地编写应用程序，只需要按照既定的规则使用这些工具就可以了。
看一下官网的介绍：

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS 和 Linux——不需要本地开发经验。

优点

跨平台支持：
首先便是跨平台，Electron 框架可在主流的操作系统（例如 Windows、Mac OS 和 Linux 等）上运行，可以有效地减少开发者在不同平台上开发应用程序的工作量和时间。一套代码多平台运行，这点很重要。前端技术支持：
通过使用 HTML、CSS 和 JavaScript 等前端技术栈进行开发，拥有大量的UI组件和模板，开发出来的桌面应用界面更加美观、交互体验更好。本地能力支持：
Electron 除了支持 Web API，而且还允许调用很多操作系统底层 API 来访问计算机的硬件设备，甚至可以自己用 C++、Go 来编写本地模块，可以完成很多 Web 应用无法做到的事情。调试测试支持：
Electron 框架开发的应用程序是基于Chrome内核的，可以直接使用Chrome内核的开发者工具进行调试和测试，提高了开发效率。自动更新支持：
Electron 应用程序在发布后可以自动更新，这意味着当有新版本可用时，用户会自动收到更新提示，无需手动下载和安装更新文件。

Electron构建的应用

Visual Studio Code：微软推出的跨平台轻量级代码编辑器。对于前端小伙伴来说，VSCode 并不陌生，没错，它是使用了 Electron 框架。Skype：微软推出的跨平台在线通讯工具，支持语音和视频通话。小伙伴的 Windows 系统中就有，大家也不陌生吧。Postman：跨平台的 API 开发和测试工具。测试人员/开发人员测试的利器。微信开发者工具：为开发者提供的用于微信小程序开发的开发工具。微信公众号/小程序开发人员肯定知道。迅雷X：据说 10.1版本开始，采用 Electron 软件框架完全重写了迅雷主界面。钉钉网易云音乐有道翻译Typora（Markdown编辑器）

环境准备

1、node、npm 环境安装


Microsoft Windows [版本 10.0.19045.5487]
(c) MicrosoftCorporation。保留所有权利。
C:Userswhero> node -v
v20.10.0

C:Userswhero> npm -v
10.2.3

说明：

nodejs建议使用 LTS 版本Node.js v22 不兼容 Electron 截至 2025 年上半年，Electron 最高支持 Node.js v20.xnode版本和npm版本要兼容

2、工程目录创建


mkdir electron-wtt
cd electron-wtt
npm init -y

3、安装 electron

推荐使用 cnpm 下载，npm 或者 yarn 安装过程太慢了。
· 安装 cnpm


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

安装 electron


cnpm install --save-dev electron

检查 electron 是否安装成功


C:UserswheroDesktopelectron-wtt> npx electron --version
v39.2.3

代码编写

Electron 应用是基于Chrome内核，所以和浏览器类似的，应用包含两个核心部分：

主进程（Main Process）：控制整个应用生命周期和原生窗口。渲染进程（Renderer Process）：每个窗口对应一个，负责显示 Web 内容。

编写主进程

主进程编写在程序的入口文件 index.js:


// index.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();
  }
});

渲染进程

创建页面内容，新建一个 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;
        }

        div {
            font-size: 30px;
            color: aqua;
        }
    </style>
</head>

<body>
    <div>Hello, World! welcome to Electron!</div>
</body>

</html>

添加预加载脚本 (可选步骤)

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

创建 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]);
    }
  });

此时工程目录下的文件：
Electron hello world 初体验

配置启动脚本

在 package.json 文件中，对 scripts 代码块添加 electron 的启动命令：


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