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

Electron hello world 初体验 - 实践

news 2026/6/12 2:48:47

简介

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:\Users\whero> node -v
v20.10.0
C:\Users\whero> npm -v
10.2.3

说明：

nodejs建议使用 LTS 版本
Node.js v22 不兼容 Electron 截至 2025 年上半年，Electron 最高支持 Node.js v20.x
node版本和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:\Users\whero\Desktop\electron-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]);
}
});

此时工程目录下的文件：
在这里插入图片描述

配置启动脚本

在 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"
}
}