2026年Electron 鸿蒙PC环境搭建指南
步骤 1: 获取 Electron 编译产物
1.1 访问官方仓库
使用华为账号登录 Electron HarmonyOS 仓库。
1.2 下载 Release 包
- 选择 Electron 37 版本（推荐使用最新稳定版）
- 下载最新日期的编译产物
- 文件通常为
.zip格式，大小约 200-300MB
步骤 2: 解压编译产物到项目目录
2.1 解压文件结构
将下载的压缩包逐层解压到项目目录，最终文件结构应如下：
ohos_hap/
├── electron/
│ ├── libs/ # 原生库文件
│ │ ├── libelectron.so # Electron 核心引擎
│ │ ├── libadapter.so # 鸿蒙适配层
│ │ ├── libffmpeg.so # 多媒体支持
│ │ └── libc++_shared.so
│ └── src/
└── web_engine/ # Web 引擎适配模块2.2 确认关键文件
确保以下关键库文件存在于 electron/libs/arm64-v8a/ 目录：
- ✅
libelectron.so(约 150-200MB) - ✅
libadapter.so(约 5-10MB) - ✅
libffmpeg.so(约 10-20MB) - ✅
libc++_shared.so(约 1-2MB)
步骤 3: 放置 Electron 应用代码
3.1 应用代码目录
将你的 Electron 应用代码（或编译产物）放置到以下目录：
web_engine/src/main/resources/resfile/resources/app/3.2 标准 Electron 应用结构
典型的 Electron 应用应包含以下文件：
app/
├── main.js # 主进程入口文件（必需）
├── package.json # 项目配置文件（必需）
├── index.html # 渲染进程页面
├── renderer.js # 渲染进程逻辑
└── node_modules/ # 依赖包（如果有）3.3 基础示例代码
如果你还没有 Electron 应用，可以使用以下简单示例：
main.js (主进程):
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
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>步骤 4: 使用 DevEco Studio 运行项目
4.1 打开项目
- 启动 DevEco Studio
- 选择
File→Open - 打开
ohos_hap项目目录
4.2 配置签名
如果是首次运行，需要配置应用签名：
- 进入
File→Project Structure→Signing Configs - 自动生成调试签名或配置发布签名
4.3 连接设备
- 使用 USB Type-C 数据线连接开发电脑和鸿蒙设备
- 在设备上启用开发者模式 和 USB 调试
- 在 DevEco Studio 中确认设备已连接（顶部工具栏会显示设备名称）
4.4 编译和运行
-
点击右上角的 ▶️ Run 按钮（或按
Shift + F10） -
系统会自动进行以下操作：
-
- 编译 HAP 包
- 重新签名
- 安装到设备
- 启动应用
效果
