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

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

前言

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

一、鸿蒙与 Electron 的结合点

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

核心优势

技术栈复用：前端开发者可直接使用 HTML/CSS/JS 技术栈开发鸿蒙桌面应用，无需学习全新的原生开发语言。
跨平台兼容：一套代码可同时运行在 Windows、macOS、Linux 以及鸿蒙桌面端。
生态丰富：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`）

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

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

新建项目文件夹（如harmony-electron-demo），打开 VS Code 并进入该文件夹。
执行初始化命令，创建package.json文件：
bash
运行
```
npm init -y
```
安装 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包拷贝到鸿蒙桌面端，即可安装运行！

六、注意事项与优化建议

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

总结

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