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 charsetUTF-8 titleHello 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 包重新签名安装到设备启动应用效果