告别踩坑！2026 Electron 鸿蒙 PC 环境搭建一步到位，收藏直接用

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

告别踩坑！2026 Electron 鸿蒙 PC 环境搭建一步到位，收藏直接用

nutpi

2026-03-05

0 评论 230 浏览 0 收藏

13 分钟

当跨平台开发框架Electron遇上鸿蒙系统，开发者迎来了"一次编写，多端运行"的新可能。本文详解Electron鸿蒙版的完整搭建流程：从DevEco Studio环境配置、官方编译产物获取，到HAP包构建与真机调试。

什么是 Electron？

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。它结合了 Chromium 渲染引擎和 Node.js 运行时环境，使开发者能够使用 Web 技术创建原生应用程序。

项目地址：https://gitcode.com/jianguoxu/harmonypc-electron

Electron 的核心特性

跨平台支持：一次编写，即可运行在 Windows、macOS 和 Linux 等多个平台
Web 技术：使用熟悉的 HTML、CSS 和 JavaScript 进行开发
丰富的 API：提供访问系统级功能的 API，如文件系统、通知、系统托盘等
活跃的社区：拥有庞大的开发者社区和丰富的生态系统
成熟的应用案例：VS Code、Slack、Discord 等知名应用都基于 Electron 构建

Electron 鸿蒙版的意义

随着鸿蒙系统的快速发展，Electron 鸿蒙版让开发者能够：

将现有的 Electron 应用快速迁移到鸿蒙平台
利用鸿蒙系统的分布式能力和原生特性
扩展应用的覆盖范围，服务更多鸿蒙用户
保持代码一致性，降低跨平台开发成本

前置准备

在开始之前，请确保您的开发环境满足以下要求：

硬件要求

开发电脑：支持鸿蒙开发的 PC 或 Mac（建议 8GB 以上内存）

鸿蒙设备：支持 HarmonyOS 6 的设备（如华为 MateBook、平板等）

软件要求

操作系统：Windows 10/11、macOS 10.15+

DevEco Studio：最新版本（建议 6.0.0+）

Node.js：建议使用 Node.js 18.x 或更高版本

华为开发者账号：用于访问官方仓库和下载资源

步骤 1: 安装和配置 DevEco Studio

1.1 下载 DevEco Studio

访问华为开发者联盟[1]

下载最新版本的 DevEco Studio（建议选择 6.0.0 或更高版本）
根据您的操作系统选择对应的安装包

1.2 安装 DevEco Studio

Windows 系统：

运行下载的 .exe 安装程序
按照安装向导完成安装
建议安装路径不要包含中文字符和空格

macOS 系统：

打开下载的 .dmg 文件
将 DevEco Studio 拖拽到 Applications 文件夹
从 Applications 启动 DevEco Studio

1.3 配置开发环境

1）首次启动配置

选择 “Standard” 标准安装模式
选择安装位置（建议使用默认路径）
等待安装必要的 SDK 和工具链

2）配置 SDK

API 17 或更高版本
Native SDK（用于原生开发）
Previewer（预览器）
进入 File → Settings → HarmonyOS SDK

3）确保已安装以下组件：

配置 Node.js
DevEco Studio 内置了 Node.js 环境

如需使用自定义 Node.js 版本，可在 Settings → Languages & Frameworks → Node.js 中配置

1.4 配置华为开发者账号

1）注册华为开发者账号

2）在 DevEco Studio 中登录：

点击右上角的登录按钮
使用华为账号登录
同意服务条款

步骤 2: 获取 Electron 编译产物

2.1 访问官方仓库

使用华为账号登录 **Electron HarmonyOS 仓库**[2]。

2.2 下载 Release 包

选择 Electron 34 版本（推荐使用最新稳定版）
下载最新日期的编译产物
文件通常为 .zip 格式，大小约 200-300MB

步骤 3: 解压编译产物到项目目录

3.1 创建项目目录

首先，在您的工作目录中创建一个新项目文件夹：

mkdir harmonypc-electron
cd harmonypc-electron

3.2 解压文件结构

将下载的压缩包逐层解压到项目目录，最终文件结构应如下：

ohos_hap/
├── electron/
│ ├── libs/ # 原生库文件
│ │ ├── libelectron.so # Electron 核心引擎
│ │ ├── libadapter.so # 鸿蒙适配层
│ │ ├── libffmpeg.so # 多媒体支持
│ │ └── libc++_shared.so
│ └── src/
└── web_engine/ # Web 引擎适配模块

3.3 确认关键文件

确保以下关键库文件存在于 electron/libs/arm64-v8a/ 目录：

✅ libelectron.so (约 150-200MB)
✅ libadapter.so (约 5-10MB)
✅ libffmpeg.so (约 10-20MB)
✅ libc++_shared.so (约 1-2MB)

步骤 4: 放置 Electron 应用代码

4.1 应用代码目录

将你的 Electron 应用代码（或编译产物）放置到以下目录：

web_engine/src/main/resources/resfile/resources/app/

4.2 标准 Electron 应用结构

典型的 Electron 应用应包含以下文件：

app/
├── main.js # 主进程入口文件（必需）
├── package.json # 项目配置文件（必需）
├── index.html # 渲染进程页面
├── renderer.js # 渲染进程逻辑
└── node_modules/ # 依赖包（如果有）

4.3 基础示例代码

如果你还没有 Electron 应用，可以使用以下简单示例：

main.js (主进程):

const { app, BrowserWindow } = require(‘electron’);
const path = require(‘path’);
functioncreateWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile(‘index.html’);
}
app.whenReady().then(createWindow);
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit();
}
});

package.json:

{
“name”: “electron-harmonyos-app”,
“version”: “1.0.0”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
}
}

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Hello HarmonyOS!</title>
</head>
<body>
<h1>欢迎使用 Electron on HarmonyOS!</h1>
<p>这是运行在鸿蒙系统上的 Electron 应用</p>
</body>
</html>