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

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

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.1 创建项目目录

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

mkdir harmonypc-electroncd 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:

Hello HarmonyOS! 欢迎使用 Electron on HarmonyOS! 这是运行在鸿蒙系统上的 Electron 应用

5.1 打开项目

• 启动 DevEco Studio
• 选择 File → Open
• 打开 ohos_hap 项目目录

5.2 配置签名

如果是首次运行，需要配置应用签名：

进入 File → Project Structure → Signing Configs

自动生成调试签名或配置发布签名

5.3 连接设备

• 使用 USB Type-C 数据线连接开发电脑和鸿蒙设备
• 在设备上启用开发者模式和 USB 调试
• 在 DevEco Studio 中确认设备已连接

5.4 编译和运行

Run 按钮（或按 Shift + F10）

系统会自动进行以下操作：

常见问题排查 问题 1: 设备连接失败

症状: DevEco Studio 中看不到设备

解决方案:

• 确认 USB 数据线正常工作
• 检查设备是否开启 USB 调试模式
• 尝试更换 USB 端口
• 在设备上重新授权 USB 调试

症状: 编译过程中出现错误

解决方案:

• 检查 SDK 是否完整安装
• 确认 Node.js 版本是否正确
• 清理项目缓存：Build → Clean Project
• 重新同步 Gradle

症状: 应用安装成功但无法打开

解决方案:

• 检查 libelectron.so 等库文件是否完整
• 确认应用代码目录结构正确
• 查看 DevEco Studio 的 Logcat 日志
• 尝试卸载后重新安装

症状: 提示签名配置无效

解决方案:

• 重新生成调试签名
• 检查签名证书是否过期
• 确认华为开发者账号是否已登录

如果您已有成熟的 Electron 应用，可以：

1）打包应用

npm run build # 或使用 electron-builder npm run package

2）复制到鸿蒙项目

将打包后的应用文件复制到 web_engine/src/main/resources/resfile/resources/app/

确保 package.json 和 main.js 在正确位置

3）适配鸿蒙特性

• 利用鸿蒙的分布式能力
• 集成鸿蒙原生 API
• 优化性能和用户体验

替换应用图标：

图标路径：ohos_hap/AppScope/resources/base/media/app_icon.png

建议尺寸：512×512 像素

配置启动页：

编辑 ohos_hap/src/main/resources/base/element/string.json

修改应用名称和描述

性能优化建议

1）减少包体积

• 只包含必要的依赖
• 使用 Tree Shaking 去除无用代码
• 压缩资源文件

2）提升启动速度

3）内存优化

• 及时释放不再使用的资源
• 避免内存泄漏
• 使用 DevTools 进行性能分析

相关资源

• Electron 官方文档[3]
• 鸿蒙开发者文档[4]
• DevEco Studio 使用指南[5]
• Electron GitHub[6]
• 鸿蒙 PC Electron[7]

效果展示

成功运行后，您将看到 Electron 应用在鸿蒙设备上正常运行：

恭喜！您已成功搭建了 Electron 鸿蒙 PC 开发环境，可以开始开发跨平台应用了。

参考资料

[1] 华为开发者联盟: https://developer.huawei.com/consumer/cn/deveco-studio/

[2] Electron HarmonyOS 仓库: https://devcloud.cn-north-4.huaweicloud.com/codehub/project/b19f5ea8ffd4492ea8c06ca2ebf3f858/codehub/2821214/home?ref=electron34-release

[3] Electron 官方文档: https://www.electronjs.org/docs

[4] 鸿蒙开发者文档: https://developer.huawei.com/consumer/cn/doc/

[5] DevEco Studio 使用指南: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-overview-V5

[6] Electron GitHub: https://github.com/electron/electron

[7] 鸿蒙PC Electron: https://atomgit.com/openharmony-sig/electron

题图来自Unsplash，基于 CC0 协议。