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

欢迎加入开源鸿蒙PC社区：https://harmonypc.csdn.net/

什么是 Electron？

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

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+ 或 Linux
  • DevEco Studio：最新版本（建议 5.0.0+）
  • Node.js：建议使用 Node.js 18.x 或更高版本
  • 华为开发者账号：用于访问官方仓库和下载资源

步骤 1: 安装和配置 DevEco Studio

1.1 下载 DevEco Studio
  1. 访问 华为开发者联盟
  2. 下载最新版本的 DevEco Studio（建议选择 6.0.0 或更高版本）
  3. 根据您的操作系统选择对应的安装包
1.2 安装 DevEco Studio

Windows 系统：

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

macOS 系统：

  • 打开下载的 .dmg 文件
  • 将 DevEco Studio 拖拽到 Applications 文件夹
  • 从 Applications 启动 DevEco Studio
1.3 配置开发环境

  1. 首次启动配置

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

  2. 配置 SDK

    • 进入 File → Settings → HarmonyOS SDK
    • 确保已安装以下组件：
      • API 17或更高版本
      • Native SDK（用于原生开发）
      • Previewer（预览器）

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

image-20260301142322309

步骤 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/
3.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');

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>

步骤 5: 使用 DevEco Studio 运行项目

5.1 打开项目
  1. 启动 DevEco Studio
  2. 选择 File → Open
  3. 打开 ohos_hap 项目目录
5.2 配置签名

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

  1. 进入 File → Project Structure → Signing Configs
  2. 自动生成调试签名或配置发布签名
5.3 连接设备
  1. 使用 USB Type-C 数据线连接开发电脑和鸿蒙设备
  2. 在设备上启用开发者模式和 USB 调试
  3. 在 DevEco Studio 中确认设备已连接（顶部工具栏会显示设备名称）
5.4 编译和运行

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

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

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

常见问题排查

问题 1: 设备连接失败

症状: DevEco Studio 中看不到设备

解决方案:

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

问题 2: 编译失败

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

解决方案:

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

问题 3: 应用无法启动

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

解决方案:

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

问题 4: 签名配置错误

症状: 提示签名配置无效

解决方案:

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

进阶配置

使用自定义 Electron 应用

如果您已有成熟的 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
    • 优化性能和用户体验

配置应用图标和启动页

  1. 替换应用图标：

    • 图标路径：ohos_hap/AppScope/resources/base/media/app_icon.png
    • 建议尺寸：512x512 像素

  2. 配置启动页：

    • 编辑 ohos_hap/src/main/resources/base/element/string.json
    • 修改应用名称和描述

性能优化建议

  1. 减少包体积

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

  2. 提升启动速度

    • 延迟加载非关键模块
    • 优化主进程代码
    • 使用代码分割

  3. 内存优化

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

相关资源

效果展示

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

image-20260301143554424

恭喜！您已成功搭建了 Electron 鸿蒙PC开发环境，可以开始开发跨平台应用了。
项目地址：https://atomgit.com/jianguoxu/harmonypc-electron

# electron # harmonyos # javascript
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter-OH 插件volume_controller 适配 HarmonyOS 实战：以系统音量控制为例

随着 HarmonyOS NEXT 的快速发展，越来越多的 Flutter 应用需要支持鸿蒙平台。是一款跨平台的系统音量控制插件，支持 Android、iOS、macOS、Windows、Linux。本文将详细介绍如何将其适配到 HarmonyOS 平台，为 Flutter 插件开发者提供完整的适配参考。适配目标：在 volume_controller 插件中新增 OHOS 平台支持，实现获取/设

avatar 人工智能6S服务平台

Flutter-OH 插件volume_controller 在鸿蒙平台的使用指南

在 HarmonyOS 应用开发中，经常需要控制或监听系统媒体音量，例如音乐播放器、视频应用、游戏等场景。是一款支持鸿蒙平台的 Flutter 音量控制插件，提供简洁的 API 实现音量获取、设置、监听和静音功能。需求背景：Flutter 应用在鸿蒙设备上需要与系统音量交互，实现与 Android/iOS 一致的用户体验。插件简介：volume_controller 是跨平台系统音量控制插件，支持

avatar 人工智能6S服务平台
cover

Flutter三方库 confetti 适配 OpenHarmony —— 实现彩纸效果

avatar 人工智能6S服务平台