鸿蒙与 Electron：跨平台开发的双雄对决与融合实践
在跨平台开发领域，鸿蒙（HarmonyOS）和 Electron 是两大极具代表性的技术体系。鸿蒙作为华为自研的分布式操作系统，以 “万物互联” 为核心，主打全场景设备的无缝协同；Electron 则基于 Chromium 和 Node.js，让开发者用 Web 技术（HTML/CSS/JS）快速构建跨桌面平台（Windows/macOS/Linux）的应用。本文将深入对比两者的技术特性，并通过代码案例展示各自的开发流程，甚至探讨二者的融合可能性。
一、鸿蒙与 Electron：核心特性对比
先通过一张表格快速了解两者的核心差异与优势：
| 特性 | 鸿蒙（HarmonyOS） | Electron |
|---|---|---|
| 技术栈 | ArkTS/ArkJS、C/C++、Java | HTML/CSS/JavaScript、Node.js |
| 跨平台范围 | 手机、平板、手表、车机、智慧屏等全场景设备 | Windows、macOS、Linux 桌面平台 |
| 核心理念 | 分布式软总线、一次开发多端部署 | Web 技术封装，桌面应用快速开发 |
| 性能 | 原生系统级性能，分布式任务调度 | 依赖 Chromium，内存占用较高 |
| 生态 | 华为全场景生态，逐步拓展 | 成熟的 Web 生态，npm 包资源丰富 |
二、Electron 开发实战：简易桌面记事本
Electron 的优势在于低门槛，只要会 Web 技术就能开发桌面应用。下面实现一个简易的记事本应用，支持文本编辑和保存功能。
1. 环境准备
首先确保安装了 Node.js（建议 16 + 版本），然后创建项目并安装 Electron：
bash
运行
# 创建项目文件夹 mkdir electron-notepad && cd electron-notepad # 初始化package.json npm init -y # 安装Electron npm install electron --save-dev2. 核心代码实现
（1）主进程文件：main.js
Electron 分为主进程和渲染进程，主进程负责窗口管理等系统级操作：
javascript
运行
const { app, BrowserWindow, ipcMain, dialog } = require('electron'); const path = require('path'); const fs = require('fs'); // 创建主窗口 let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 开启Node.js集成（渲染进程可使用Node API） nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }); // 加载本地HTML文件 mainWindow.loadFile('index.html'); // 开启开发者工具（可选） mainWindow.webContents.openDevTools(); // 窗口关闭事件 mainWindow.on('closed', () => { mainWindow = null; }); } // 监听保存文件的请求（渲染进程发送） ipcMain.on('save-file', (event, content) => { // 弹出文件保存对话框 dialog.showSaveDialog({ title: '保存记事本', defaultPath: 'note.txt', filters: [{ name: 'Text Files', extensions: ['txt'] }] }).then(result => { // 如果用户没有取消保存 if (!result.canceled) { // 写入文件内容 fs.writeFile(result.filePath, content, (err) => { if (err) { event.reply('save-result', '保存失败：' + err.message); } else { event.reply('save-result', '保存成功：' + result.filePath); } }); } }); }); // Electron应用就绪后创建窗口 app.on('ready', createWindow); // 所有窗口关闭时退出应用（macOS除外） app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); // macOS中点击dock图标时重新创建窗口 app.on('activate', () => { if (mainWindow === null) { createWindow(); } });（2）渲染进程文件：index.html
渲染进程负责 UI 展示和用户交互，本质是 Web 页面：
html
预览
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Electron记事本</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 20px; } #editor { width: 100%; height: 480px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; resize: none; } #saveBtn { margin-top: 10px; padding: 8px 20px; background-color: #007acc; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } #saveBtn:hover { background-color: #005f99; } #status { margin-top: 10px; color: #666; } </style> </head> <body> <textarea id="editor" placeholder="请输入文本内容..."></textarea> <button id="saveBtn">保存文件</button> <div id="status"></div> <script> const { ipcRenderer } = require('electron'); const editor = document.getElementById('editor'); const saveBtn = document.getElementById('saveBtn'); const status = document.getElementById('status'); // 点击保存按钮发送请求到主进程 saveBtn.addEventListener('click', () => { const content = editor.value; if (!content) { status.textContent = '请输入内容后再保存！'; return; } ipcRenderer.send('save-file', content); }); // 接收主进程的保存结果 ipcRenderer.on('save-result', (event, message) => { status.textContent = message; // 3秒后清空状态提示 setTimeout(() => { status.textContent = ''; }, 3000); }); </script> </body> </html>3. 运行应用
在package.json中添加启动脚本：
json
"scripts": { "start": "electron ." }然后执行命令运行：
bash
运行
npm start此时会弹出一个桌面窗口，支持文本编辑和保存为 txt 文件，一个简易的 Electron 记事本就完成了。
三、鸿蒙开发实战：全场景记事本（ArkTS）
鸿蒙采用 ArkTS 作为主要开发语言，主打一次开发多端部署。下面实现一个鸿蒙版的记事本，支持手机端展示，且可拓展到平板等设备。
1. 环境准备
安装 DevEco Studio（鸿蒙官方开发工具），创建一个空的 ArkTS 工程（选择 Phone/Tablet 模板，API Version 建议 9+）。
2. 核心代码实现
（1）页面布局与逻辑：index.ets
鸿蒙的 ArkTS 采用声明式 UI，结合状态管理实现交互：
typescript
运行
@Entry @Component struct NotePad { // 状态变量：存储文本内容 @State content: string = ''; // 状态变量：存储保存状态提示 @State status: string = ''; // 保存文本到本地文件（鸿蒙文件管理API） async saveFile() { if (this.content === '') { this.status = '请输入内容后再保存！'; this.clearStatus(); return; } try { // 获取应用的私有文件目录 const context = getContext(this) as common.UIAbilityContext; const filesDir = context.filesDir; const filePath = filesDir + '/note.txt'; // 写入文件 await fs.writeText(filePath, this.content); this.status = '保存成功：' + filePath; } catch (err) { this.status = '保存失败：' + err.message; } this.clearStatus(); } // 清空状态提示 clearStatus() { setTimeout(() => { this.status = ''; }, 3000); } build() { Column() { // 文本编辑区域 TextArea({ placeholder: '请输入文本内容...', value: this.content }) .width('100%') .height(400) .padding(10) .border({ width: 1, color: '#ccc', radius: 4 }) .onChange((value) => { this.content = value; }) // 保存按钮 Button('保存文件') .width(150) .height(40) .margin({ top: 10 }) .backgroundColor('#007acc') .onClick(() => { this.saveFile(); }) // 状态提示 Text(this.status) .margin({ top: 10 }) .fontSize(14) .fontColor('#666') } .padding(20) .width('100%') .height('100%') .backgroundColor('#f5f5f5') } } // 引入必要的模块 import fs from '@ohos.file.fs'; import common from '@ohos.app.ability.common'; import { getContext } from '@ohos.arkui';（2）配置文件：module.json5
确保应用拥有文件访问权限，在module.json5中添加权限声明：
json
{ "module": { // 其他配置... "requestPermissions": [ { "name": "ohos.permission.READ_USER_STORAGE" }, { "name": "ohos.permission.WRITE_USER_STORAGE" } ] } }3. 运行应用
在 DevEco Studio 中选择模拟器（或真机），点击运行按钮。此时鸿蒙模拟器中会显示记事本页面，支持文本编辑和保存到应用私有目录，实现了核心的记事本功能。
四、鸿蒙与 Electron 的融合思考
虽然鸿蒙和 Electron 的应用场景不同，但二者并非完全割裂，可通过以下方式实现融合：
- Electron 应用迁移到鸿蒙：鸿蒙支持 Web 组件，可将 Electron 的 Web 页面直接嵌入鸿蒙应用中，利用鸿蒙的分布式能力拓展 Electron 应用的场景。
- 鸿蒙服务对接 Electron：通过鸿蒙的分布式软总线，让 Electron 桌面应用访问鸿蒙设备的硬件资源（如手机摄像头、传感器）。
- 跨端数据同步：利用鸿蒙的分布式数据管理和 Electron 的 Node.js 网络能力，实现桌面端与鸿蒙设备的数据同步。
五、总结
Electron 以 Web 技术为核心，是桌面应用快速开发的利器，适合追求开发效率和跨桌面平台的场景；鸿蒙以分布式能力为核心，是全场景智能设备开发的首选，适合构建万物互联的应用。
对于开发者而言，掌握 Electron 可快速落地桌面应用，而学习鸿蒙则能抓住物联网时代的全场景开发机遇。两者结合，更能实现跨平台开发的 “全域覆盖”。希望本文的代码案例能帮助你快速上手两者的开发，后续可在此基础上拓展更复杂的功能。
欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)，一起共建开源鸿蒙跨平台生态。