前言

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。通过将 Chromium 渲染引擎和 Node.js 运行时嵌入到二进制文件中，Electron 允许开发者使用统一的 Web 技术栈，创建可在 Windows、macOS、Linux 和 HarmonyOS 上运行的原生桌面应用。先给大家展示一下最后Electron生成的跨平台鸿蒙PC应用成果：

在这里插入图片描述

Electron 架构优势

1、跨平台: 一套代码，多端运行
2、Web 技术栈: 使用熟悉的前端技术开发桌面应用
3、丰富生态: npm 生态系统中数十万个包可直接使用
4、原生能力: 可访问系统底层 API 和硬件资源

系统要求

开发环境要求

  • 操作系统: Windows 10/11、macOS 10.15+、Ubuntu 22.04+
  • IDE: DevEco Studio 5.0+ （鸿蒙官方 IDE）
  • Node.js: 建议 v18.x 或更高版本
  • 内存: 至少 8GB RAM（推荐 16GB）
  • 存储空间: 至少 20GB 可用空间
  • 目标设备要求
  • 鸿蒙设备: HarmonyOS NEXT (API 20)
  • 设备类型: 平板电脑或 2in1 设备
  • 连接方式: USB Type-C 数据线

重要提示: 如果需要从源码编译 Electron，必须使用 Ubuntu 22.04 环境。但对于大多数开发场景，直接使用预编译产物即可。

操作指南

步骤1、获取 Electron 编译产物
1.1 访问官方仓库

使用华为账号登录 ，访问
Electron HarmonyOS地址

1.2 下载 Release 包

选择 Electron 34 版本（推荐使用最新稳定版）
下载最新日期的编译产物
文件通常为 .zip 格式，大小约 200-300MB
在这里插入图片描述

提示: 建议下载最新日期的版本以获得最新的 bug 修复和功能更新。

步骤 2: 解压编译产物到项目目录
2.1 解压文件结构

将下载的压缩包逐层解压到项目目录，最终文件结构应如下：
在这里插入图片描述

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 编译和运行
  • 编辑器打开这一级的目录ohos_hap
  • 点击右上角的 ▶️ Run 按钮（或按 Shift + F10）
  • 系统会自动进行以下操作：
  • 编译 HAP 包
  • 重新签名
  • 安装到设备
  • 启动应用
    在这里插入图片描述
    步骤 5: 验证运行效果
    等待几分钟，应用成功启动后，你应该能在鸿蒙PC设备或者PC模拟器上看到 Electron 应用界面。
    在这里插入图片描述
验证检查项

✅ 应用窗口正常显示
✅ 可以进行交互操作
✅ 控制台无错误信息
✅ 主进程和渲染进程通信正常

到这里你的Electron应用就打包编译成了鸿蒙PC项目了

学习资料

官方文档

开源项目

学习资源

  • Electron 中文教程 - 从零开始学习 Electron
  • 鸿蒙 ArkTS 语法 - ArkTS 编程语言入门
  • Node.js Addon 开发 - 原生模块开发指南

总结

通过本指南，你已经学会了如何：
✅ 配置 Electron HarmonyOS 开发环境
✅ 获取和部署 Electron 编译产物
✅ 创建和运行 Electron 应用
✅ 处理常见问题和优化应用性能
✅ 调用鸿蒙原生能力

到这一步已经完成了 Electron 鸿蒙pc开发环境的搭建（window），可以开始构建自己的跨平台 Electron 应用了

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

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

更多推荐

uni-app + DevEco 鸿蒙跨平台应用开发实战1-环境安装分享

本文详细介绍了在Mac M2芯片设备上搭建uni-app+DevEco鸿蒙开发环境的完整流程。主要内容包括：1）基础准备（macOS 12+系统要求、自动配置的ARM架构JDK）；2）DevEco Studio的ARM版本下载安装与SDK配置；3）HBuilderX的版本选择与鸿蒙插件安装；4）关键的环境联动配置（DevEco路径、SDK路径和ohpm工具）；5）aarch64架构模拟器的创建与调

avatar 人工智能6S服务平台

HarmonyOS + Cordova：权限与隐私合规问题排查实战

本文针对鸿蒙原生+Cordova混合框架中的权限与隐私问题，提出三层排查方案：原生层需正确配置权限声明；插件层应实现权限检查与错误回调；Web层需处理无权限场景并提供用户引导。通过流程图展示问题定位路径，强调开发与发布环境的一致性校验，并给出权限管理的最佳实践建议，包括自动校验、自检机制和合规性设计，确保功能可用性与用户体验的平衡。

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

HarmonyOS适配实践：Flutter 项目全流程指南-环境搭建

avatar 人工智能6S服务平台