个人首页： VON
鸿蒙系列专栏： 鸿蒙开发小型案例总结
综合案例 ：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
本文章所属专栏：Electron for HarmonyOS
用 Electron 构建你的第一个桌面应用
前言
在学习Electron for HarmonyOS 开发之前一定要去了解什么是Electron，Electron 是一个强大的框架，它让你可以用熟悉的 Web 技术（HTML、CSS、JavaScript）开发跨平台的桌面应用程序。VS Code、Slack、Discord 等知名软件都是基于 Electron 构建的。本文将带你 从 0 到 1 创建一个最简单的 Electron 应用。
一、准备工作
1. 安装 Node.js
确保你已安装 Node.js（建议使用 LTS 版本）。在终端中运行：
node -v
npm -v如果能正常输出版本号，说明环境已就绪。
特别注意一点，Node.js v22 不兼容 Electron 截至 2025 年初，Electron 最高支持 Node.js v20.x
我这里版本就有点高了，需要重新安装
卸载原来的高版本
这里直接可以去设置中卸载高版本的node
直接下载链接示例（v20.14.0）：
运行安装程序
- 双击 .msi 文件；
- 按照向导一步步安装（建议默认选项）；
- 安装完成后，重启终端（PowerShell 或 CMD）。
更换适配的npm版本
node版本和npm版本要兼容，这里需要更改一下npm版本
npm install -g npm@10.8.0
2. 创建项目目录
新建一个文件夹，比如 my-electron-app，并在其中初始化 npm 项目：
mkdir my-electron-app
cd my-electron-app
npm init -y这里在桌面创建一个新文件夹即可
把文件夹拖到vscode中进行打开
执行npm init -y这会生成一个 package.json 文件。
二、安装 Electron
在项目根目录下安装 Electron 作为开发依赖：
方法一、用npm下载Electron
npm install --save-dev electron方法二、用cnpm 下载Electron
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --save-dev electron检查安装是否成功
npx electron --version
三、编写主进程代码
Electron 应用包含两个核心部分：
- 主进程（Main Process）：控制应用生命周期和原生窗口。
- 渲染进程（Renderer Process）：每个窗口对应一个，负责显示 Web 内容。
首先，创建主进程入口文件 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();
}
});四、创建页面内容（渲染进程）
新建一个 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>提示：你可以像开发普通网页一样使用 CSS 和 JavaScript。
五、（可选）添加预加载脚本
出于安全考虑，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]);
}
});然后在 index.html 中添加对应元素以显示版本信息（可选）：
<h1>Hello, Electron!</h1>
<p>Chrome: <span id="chrome-version"></span></p>
<p>Node: <span id="node-version"></span></p>
<p>Electron: <span id="electron-version"></span></p>六、配置启动脚本
打开 package.json，添加启动命令：
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^latest"
}
}关键点：
"main"指定主进程入口；"start"脚本让npm start启动 Electron。
七、运行应用
在终端执行：
npm start你会看到一个窗口弹出，显示 “Hello, Electron!” 以及各组件的版本号！
我这里只对版本号进行了展示
恭喜！你已经成功创建了第一个 Electron 桌面应用。
总结
Electron 降低了桌面开发门槛，但也要注意其资源占用较高的特点。合理使用，它将成为你构建跨平台工具的强大利器。
总体来说没有遇到什么太大的问题，主要就是版本号哪里需要注意一下，node和npm版本过高的需要注意一下！！！
项目源码结构总结：
my-electron-app/ ├── main.js ├── preload.js ├── index.html └── package.json
浙公网安备 33010602011771号