2026年Electron 鸿蒙PC环境搭建指南

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 打开项目

1. 启动 DevEco Studio
2. 选择 File → Open
3. 打开 ohos_hap 项目目录

4.2 配置签名

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

1. 进入 File → Project Structure → Signing Configs
2. 自动生成调试签名或配置发布签名

4.3 连接设备

1. 使用 USB Type-C 数据线连接开发电脑和鸿蒙设备
2. 在设备上启用开发者模式 和 USB 调试
3. 在 DevEco Studio 中确认设备已连接（顶部工具栏会显示设备名称）

4.4 编译和运行

1. 点击右上角的 ▶️ Run 按钮（或按 Shift + F10）

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

3. • 编译 HAP 包
   • 重新签名
   • 安装到设备
   • 启动应用

效果