鸿蒙 + Electron：跨端开发新范式，从环境搭建到实战开发

前言

随着鸿蒙系统（HarmonyOS）的生态不断完善，越来越多的开发者开始探索鸿蒙与主流跨平台框架的结合方案。Electron 作为一款成熟的跨平台桌面应用开发框架，可以让开发者用 HTML、CSS、JavaScript 快速构建 Windows、macOS、Linux 桌面应用。而将 Electron 与鸿蒙系统结合，既能利用 Electron 的前端生态优势，又能适配鸿蒙桌面端（如鸿蒙 PC、鸿蒙平板），实现一套代码跨多端运行。本文将从环境搭建到实战开发，带你一步步掌握鸿蒙 + Electron 的开发流程，包含完整代码案例。

一、鸿蒙与 Electron 的结合点

首先需要明确：鸿蒙系统（桌面端）支持标准的 Linux/Windows 应用运行环境，而 Electron 本身是基于 Node.js 和 Chromium 的跨平台框架，其打包后的应用可以直接在鸿蒙桌面端运行。此外，鸿蒙提供的方舟开发框架（ArkUI） 与 Electron 的前端技术栈可以互补，实现更灵活的跨端开发。

核心优势

  1. 技术栈复用：前端开发者可直接使用 HTML/CSS/JS 技术栈开发鸿蒙桌面应用，无需学习全新的原生开发语言。
  2. 跨平台兼容：一套代码可同时运行在 Windows、macOS、Linux 以及鸿蒙桌面端。
  3. 生态丰富：Electron 拥有海量的 npm 包和社区资源，能快速实现复杂的桌面应用功能。

二、开发环境搭建（附截图说明）

环境要求

  • 操作系统：Windows 10/11、macOS 12+、鸿蒙桌面端（如华为 MateBook 系列）
  • Node.js：v16.x 及以上（Electron 对 Node.js 版本有兼容要求）
  • npm/yarn：包管理工具
  • 代码编辑器：VS Code（推荐，搭配 Electron 插件更佳）

步骤 1：安装 Node.js（截图 1：Node.js 官网下载页面 + 安装后 cmd 验证node -v）

  1. 访问Node.js 官网，下载对应系统的 LTS 版本（长期支持版）。
  2. 安装完成后，打开终端 / 命令行，输入node -v和npm -v，若显示版本号则安装成功。

步骤 2：初始化 Electron 项目（截图 2：VS Code 终端执行初始化命令）

  1. 新建项目文件夹（如harmony-electron-demo），打开 VS Code 并进入该文件夹。
  2. 执行初始化命令，创建package.json文件：

    bash

    运行

    npm init -y
  3. 安装 Electron 依赖（推荐安装指定版本，避免版本兼容问题）：

    bash

    运行

    npm install electron@25.8.0 --save-dev

步骤 3：配置 package.json 启动脚本

修改package.json中的scripts字段，添加启动命令：

json

{
  "name": "harmony-electron-demo",
  "version": "1.0.0",
  "description": "鸿蒙+Electron演示项目",
  "main": "main.js",
  "scripts": {
    "start": "electron .", // 启动Electron应用
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["harmony", "electron"],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.8.0"
  }
}

三、第一个鸿蒙 + Electron 应用：Hello World（附代码 + 运行截图）

步骤 1：编写主进程代码（main.js）

Electron 应用分为主进程（Main Process）和渲染进程（Renderer Process），主进程负责窗口管理、系统交互等核心功能。

javascript

运行

// main.js - 主进程代码
const { app, BrowserWindow } = require('electron');
const path = require('path');

// 定义创建窗口的函数
function createWindow() {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800, // 窗口宽度
    height: 600, // 窗口高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 预加载脚本（主进程与渲染进程通信桥梁）
      nodeIntegration: true, // 允许渲染进程使用Node.js API（开发环境可开启，生产环境建议关闭）
      contextIsolation: false // 关闭上下文隔离（与nodeIntegration配合使用）
    }
  });

  // 加载本地HTML文件（渲染进程页面）
  mainWindow.loadFile('index.html');

  // 开启开发者工具（开发环境使用，生产环境可注释）
  mainWindow.webContents.openDevTools();
}

// Electron应用就绪后创建窗口
app.whenReady().then(() => {
  createWindow();

  // 处理macOS系统的窗口行为（关闭所有窗口后不退出应用）
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 处理Windows/Linux系统的退出行为（关闭所有窗口后退出应用）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

步骤 2：编写预加载脚本（preload.js，可选但推荐）

预加载脚本用于在渲染进程加载前执行，作为主进程和渲染进程的安全通信桥梁：

javascript

运行

// preload.js - 预加载脚本
window.addEventListener('DOMContentLoaded', () => {
  // 向渲染进程暴露全局方法（示例）
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  // 展示Electron和Node.js版本信息
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency]);
  }
});

步骤 3：编写渲染进程页面（index.html）

渲染进程负责应用的 UI 展示，使用标准的 HTML/CSS/JS 编写：

html

预览

<!-- index.html - 渲染进程页面 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鸿蒙+Electron Demo</title>
  <style>
    /* 简单的样式美化 */
    body {
      font-family: "Microsoft YaHei", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 90vh;
      background-color: #f5f5f5;
    }
    .title {
      color: #007dff; /* 鸿蒙主题色 */
      font-size: 2.5rem;
    }
    .version-info {
      margin-top: 20px;
      color: #666;
    }
  </style>
</head>
<body>
  <h1 class="title">Hello Harmony Electron!</h1>
  <div class="version-info">
    <p>Chrome版本: <span id="chrome-version"></span></p>
    <p>Node.js版本: <span id="node-version"></span></p>
    <p>Electron版本: <span id="electron-version"></span></p>
  </div>
</body>
</html>

步骤 4：运行应用（截图 3：Electron 应用窗口运行效果，显示 Hello Harmony Electron 和版本信息）

在 VS Code 终端执行启动命令：

bash

运行

npm start

此时会弹出一个 Electron 窗口，显示我们编写的 UI 内容，这就是第一个鸿蒙 + Electron 应用！

四、进阶实战：鸿蒙 Electron 应用实现文件选择功能（附代码）

接下来我们实现一个更实用的功能：点击按钮选择本地文件，并在应用中显示文件路径。这个功能涉及主进程与渲染进程的 IPC 通信（进程间通信），是 Electron 开发的核心知识点。

步骤 1：修改渲染进程页面（index.html）

添加按钮和文件路径展示区域：

html

预览

<!-- 新增部分 -->
<button id="select-file-btn">选择本地文件</button>
<p id="file-path">未选择文件</p>

步骤 2：修改主进程代码（main.js）

引入dialog模块（用于打开系统文件选择对话框），并监听渲染进程的 IPC 请求：

javascript

运行

// 新增：引入ipcMain模块
const { app, BrowserWindow, ipcMain, dialog } = require('electron');

// ... 原有代码不变 ...

// 监听渲染进程的"select-file"请求
ipcMain.handle('select-file', async () => {
  // 打开文件选择对话框
  const result = await dialog.showOpenDialog({
    properties: ['openFile'], // 允许选择单个文件
    filters: [ // 过滤文件类型（示例：只允许选择txt和json文件）
      { name: 'Text Files', extensions: ['txt', 'json'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  });

  // 返回选择的文件路径（若取消选择则返回空）
  if (!result.canceled) {
    return result.filePaths[0];
  } else {
    return '未选择文件';
  }
});

步骤 3：修改渲染进程的交互逻辑（在 index.html 中添加 JS 代码）

html

预览

<script>
  // 给按钮绑定点击事件
  document.getElementById('select-file-btn').addEventListener('click', async () => {
    // 向主进程发送"select-file"请求，并获取返回结果
    const filePath = await window.electron.ipcRenderer.invoke('select-file');
    // 展示文件路径
    document.getElementById('file-path').innerText = `选择的文件：${filePath}`;
  });

  // 暴露ipcRenderer到全局（需修改preload.js）
</script>

步骤 4：更新预加载脚本（preload.js）

向渲染进程暴露ipcRenderer的invoke方法（安全通信）：

javascript

运行

const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  // ... 原有代码不变 ...
});

// 新增：暴露electron对象到全局
window.electron = {
  ipcRenderer: {
    invoke: ipcRenderer.invoke
  }
};

运行效果（截图 4：点击按钮后弹出文件选择对话框，选择文件后显示路径）

执行npm start启动应用，点击 “选择本地文件” 按钮，选择一个文件后，页面会显示该文件的路径，功能完美实现！

五、打包鸿蒙 Electron 应用

开发完成后，需要将应用打包为可执行文件（如.exe、.app、.deb），以便在鸿蒙桌面端运行。这里使用electron-builder工具进行打包。

步骤 1：安装 electron-builder

bash

运行

npm install electron-builder --save-dev

步骤 2：配置 package.json 打包脚本

json

"scripts": {
  "start": "electron .",
  "build": "electron-builder" // 新增打包命令
},
// 新增打包配置
"build": {
  "appId": "com.harmony.electron.demo", // 应用唯一标识
  "productName": "HarmonyElectronDemo", // 应用名称
  "directories": {
    "output": "dist" // 打包输出目录
  },
  "win": { // Windows打包配置
    "target": "nsis" // 生成安装包
  },
  "linux": { // Linux/鸿蒙桌面端打包配置
    "target": "deb" // 生成deb安装包（鸿蒙桌面端支持deb格式）
  }
}

步骤 3：执行打包命令

bash

运行

npm run build

打包完成后，会在dist目录下生成对应系统的安装包，将deb包拷贝到鸿蒙桌面端，即可安装运行！

六、注意事项与优化建议

  1. 鸿蒙系统适配：鸿蒙桌面端基于 Linux 内核，因此打包时选择linux目标（deb/rpm 格式），可直接安装运行。
  2. 性能优化：Electron 应用默认占用内存较高，可通过关闭不必要的开发者工具、优化渲染进程代码来降低内存占用。
  3. 安全策略：生产环境中，建议关闭nodeIntegration，使用预加载脚本进行安全的进程通信。
  4. 鸿蒙 API 调用：若需要调用鸿蒙系统的原生 API，可通过 Electron 的native module扩展实现，或使用鸿蒙提供的 JS API 对接。

总结

本文从鸿蒙与 Electron 的结合点出发，详细介绍了开发环境搭建、Hello World 应用、实战文件选择功能以及应用打包的全流程。通过 Electron，前端开发者可以快速上手鸿蒙桌面应用开发，充分复用现有技术栈，实现跨平台开发的高效性。

# 华为 # 算法 # 数据结构 # 人工智能 # 大数据
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

HarmonyOS 6 | Pura X Max 鸿蒙原生适配 08：大屏下操作按钮位置重排

avatar HarmonyOS开发者社区
cover

HarmonyOS Flutter 键盘高度监听插件开发完全指南

avatar HarmonyOS开发者社区
cover

鸿蒙红利期全景解析：蓝海、缺口与开发者的黄金时代

avatar HarmonyOS开发者社区