在跨平台开发的赛道上，鸿蒙（HarmonyOS）和Electron是两个极具代表性的技术体系：鸿蒙以 “万物互联” 为核心，主打全场景分布式设备的协同开发；Electron 则依托 Web 技术栈，成为桌面跨平台应用开发的主流选择。本文将从技术特性、适用场景出发，通过具体代码案例实现两者的核心开发流程，并探讨鸿蒙与 Electron 的融合落地思路，为开发者提供选型与实践参考。
本文首发于 CSDN，专注跨平台开发技术实战，代码案例可直接运行。
一、鸿蒙与 Electron：核心技术对比
先通过一张表格清晰对比两者的关键特性，帮助开发者快速选型：
| 特性维度 | 鸿蒙（HarmonyOS） | Electron |
|---|---|---|
| 核心技术栈 | ArkTS/ArkJS、C/C++、Java（原生） | HTML/CSS/JavaScript、Node.js（Web + 后端） |
| 跨平台范围 | 手机、平板、手表、车机、智慧屏等全场景设备 | Windows、macOS、Linux 桌面平台 |
| 核心优势 | 分布式软总线、一次开发多端部署、原生系统性能 | 开发成本低、Web 生态丰富、桌面功能成熟 |
| 适用场景 | 物联网设备、全场景智能应用、鸿蒙生态产品 | 桌面工具类应用、Web 应用转桌面、轻量级客户端 |
| 生态依赖 | 华为鸿蒙生态、DevEco Studio 工具链 | Node.js/npm 生态、Chromium 内核 |
二、Electron 实战：桌面端 Markdown 编辑器
Electron 的核心优势是用 Web 技术快速构建桌面应用，下面实现一个轻量级 Markdown 编辑器，支持实时预览和文件保存功能。
1. 环境准备
确保已安装 Node.js（建议 v18+），执行以下命令初始化项目：
bash
运行
# 创建项目目录 mkdir electron-markdown-editor && cd electron-markdown-editor # 初始化package.json npm init -y # 安装Electron和marked（Markdown解析库） npm install electron marked --save-dev2. 核心代码实现
Electron 分为主进程（负责窗口、系统 API）和渲染进程（负责 UI 交互），两者通过 IPC 通信。
（1）主进程：main.js
javascript
运行
const { app, BrowserWindow, ipcMain, dialog } = require('electron'); const path = require('path'); const fs = require('fs'); // 声明主窗口变量 let mainWindow; // 创建应用窗口 function createWindow() { mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { // 开启Node.js集成（渲染进程可使用Node API） nodeIntegration: true, contextIsolation: false, // 预加载脚本（可选，推荐用于安全隔离） // preload: path.join(__dirname, 'preload.js') } }); // 加载本地HTML文件 mainWindow.loadFile('index.html'); // 开启开发者工具（开发阶段用） mainWindow.webContents.openDevTools(); // 窗口关闭事件 mainWindow.on('closed', () => { mainWindow = null; }); } // 监听保存Markdown文件的IPC请求 ipcMain.on('save-markdown', (event, content) => { // 弹出文件保存对话框 dialog.showSaveDialog({ title: '保存Markdown文件', defaultPath: 'document.md', filters: [{ name: 'Markdown Files', extensions: ['md'] }, { name: 'All Files', extensions: ['*'] }] }).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}`); } }); } }).catch(err => { event.reply('save-result', `对话框异常：${err.message}`); }); }); // Electron应用就绪后创建窗口 app.on('ready', createWindow); // 处理macOS窗口关闭逻辑 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (mainWindow === null) { createWindow(); } });（2）渲染进程：index.html
html
预览
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Electron Markdown编辑器</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; height: 100vh; padding: 20px; font-family: Arial, sans-serif; } .editor-container { display: flex; flex: 1; gap: 20px; margin-top: 10px; } #md-input { flex: 1; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; resize: none; } #md-preview { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; overflow: auto; } #save-btn { width: 120px; height: 40px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } #save-btn:hover { background-color: #0056b3; } #status { margin-top: 10px; color: #666; font-size: 14px; } </style> </head> <body> <button id="save-btn">保存Markdown</button> <div class="editor-container"> <textarea id="md-input" placeholder="请输入Markdown内容..."># 欢迎使用Markdown编辑器 ## 这是二级标题 **加粗文本** · *斜体文本* - 列表项1 - 列表项2</textarea> <div id="md-preview"></div> </div> <div id="status"></div> <script> const { ipcRenderer } = require('electron'); const marked = require('marked'); const mdInput = document.getElementById('md-input'); const mdPreview = document.getElementById('md-preview'); const saveBtn = document.getElementById('save-btn'); const status = document.getElementById('status'); // 实时解析Markdown并预览 function renderMarkdown() { const content = mdInput.value; mdPreview.innerHTML = marked.parse(content); } // 监听输入变化 mdInput.addEventListener('input', renderMarkdown); // 初始化预览 renderMarkdown(); // 保存文件逻辑 saveBtn.addEventListener('click', () => { const content = mdInput.value; if (!content) { status.textContent = '请输入Markdown内容后再保存！'; setTimeout(() => status.textContent = '', 3000); return; } ipcRenderer.send('save-markdown', content); }); // 接收保存结果 ipcRenderer.on('save-result', (event, message) => { status.textContent = message; setTimeout(() => status.textContent = '', 3000); }); </script> </body> </html>3. 运行应用
在package.json中添加启动脚本：
json
"scripts": { "start": "electron ." }执行命令运行：
bash
运行
npm start此时会弹出桌面窗口，左侧输入 Markdown 内容，右侧实时预览，点击按钮可保存为.md 文件。
三、鸿蒙实战：全场景 Markdown 阅读器（ArkTS）
鸿蒙采用声明式 UI + 分布式能力，下面实现一个鸿蒙版的 Markdown 阅读器，支持手机 / 平板端展示，依托 ArkTS 和鸿蒙的 Web 组件解析 Markdown。
1. 环境准备
- 安装DevEco Studio（鸿蒙官方开发工具）；
- 创建新工程：选择
Empty Ability模板，语言为ArkTS，API Version 选择 9+（建议 10）； - 安装
marked库（鸿蒙支持 npm 包，也可直接引入源码）。
2. 核心代码实现
（1）页面逻辑与布局：index.ets
typescript
运行
@Entry @Component struct MarkdownReader { // 状态变量：Markdown内容 @State mdContent: string = `# 鸿蒙Markdown阅读器 ## 这是鸿蒙端的预览效果 **基于ArkTS开发** · *支持全场景部署* - 鸿蒙分布式能力 - 声明式UI - Web组件解析Markdown`; // 状态变量：解析后的HTML内容 @State htmlContent: string = ''; // 状态变量：操作提示 @State tip: string = ''; // 页面加载时解析Markdown aboutToAppear() { this.parseMarkdown(); } // 解析Markdown为HTML（使用marked库） parseMarkdown() { // 引入marked（若未安装npm包，可直接复制marked源码到项目中） const marked = require('marked'); this.htmlContent = marked.parse(this.mdContent); } // 模拟保存Markdown到鸿蒙本地存储 saveMarkdown() { if (!this.mdContent) { this.tip = '内容为空，保存失败！'; this.clearTip(); return; } // 鸿蒙本地存储API（应用私有目录） try { const context = getContext(this) as common.UIAbilityContext; const filesDir = context.filesDir; const filePath = `${filesDir}/harmony_md.md`; // 写入文件 fs.writeTextFileSync(filePath, this.mdContent); this.tip = `保存成功：${filePath}`; } catch (err) { this.tip = `保存失败：${err.message}`; } this.clearTip(); } // 清空提示信息 clearTip() { setTimeout(() => { this.tip = ''; }, 3000); } build() { Column() { // 操作按钮 Row() { Button('保存Markdown') .width(150) .height(40) .backgroundColor('#007bff') .onClick(() => this.saveMarkdown()); } .margin({ bottom: 10 }) .justifyContent(FlexAlign.Start); // 内容区域：分为编辑和预览 Row() { // Markdown编辑区域 TextArea({ placeholder: '请输入Markdown内容', value: this.mdContent }) .width('50%') .height(500) .padding(10) .border({ width: 1, color: '#ccc', radius: 4 }) .onChange((value) => { this.mdContent = value; this.parseMarkdown(); // 实时解析 }); // Markdown预览区域（使用Web组件加载HTML） Web({ src: this.htmlContent, type: WebResourceType.HTML }) .width('50%') .height(500) .padding(10) .border({ width: 1, color: '#ccc', radius: 4 }); } // 提示信息 Text(this.tip) .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
在src/main/module.json5中添加文件访问权限：
json
{ "module": { "name": "entry", "type": "entry", "description": "$string:module_desc", "mainElement": "EntryAbility", "deviceTypes": ["phone", "tablet"], "requestPermissions": [ { "name": "ohos.permission.READ_USER_STORAGE" }, { "name": "ohos.permission.WRITE_USER_STORAGE" } ], "abilities": [ // 原有配置... ] } }3. 运行应用
在 DevEco Studio 中选择鸿蒙模拟器（或真机），点击运行按钮，即可在鸿蒙设备上看到 Markdown 编辑与预览界面，支持实时解析和本地保存。
四、鸿蒙与 Electron 的融合实践思路
两者并非对立关系，可通过以下方式实现技术融合，拓展应用场景：
1. Electron 应用嵌入鸿蒙应用
鸿蒙提供Web 组件，可直接将 Electron 的 Web 页面（如上述 Markdown 编辑器的前端部分）嵌入鸿蒙应用中，实现：
- 复用 Electron 的 Web 代码，快速迁移到鸿蒙平台；
- 借助鸿蒙的分布式能力，让原 Electron 应用运行在手机、车机等设备上。
核心代码示例（鸿蒙 Web 组件加载 Electron 前端）：
typescript
运行
// 鸿蒙中加载本地Web页面（Electron的index.html） Web({ src: $rawfile('index.html'), type: WebResourceType.FILE }) .width('100%') .height('100%')2. 鸿蒙分布式能力对接 Electron 桌面应用
通过鸿蒙的设备互联 API和 Electron 的网络通信能力，实现桌面应用与鸿蒙设备的数据同步：
- Electron 桌面应用作为控制端，鸿蒙设备（如手机、智能屏）作为展示端；
- 通过 WebSocket/HTTP 协议，实现 Markdown 内容的跨设备同步。
3. 跨平台数据共享
利用鸿蒙的分布式数据管理和 Electron 的本地存储，实现：
- 桌面端（Electron）和鸿蒙端的数据实时同步；
- 统一的用户数据存储与读取逻辑。
五、总结与选型建议
- 选 Electron：若需快速开发桌面工具类应用、Web 应用转桌面，或团队熟悉 Web 技术栈，Electron 是最优选择，开发效率高、生态成熟。
- 选鸿蒙：若需开发全场景智能应用、物联网设备端应用，或依托鸿蒙生态布局产品，鸿蒙的分布式能力和原生性能是核心优势。
- 融合开发：对于跨平台需求较高的项目，可复用 Web 代码嵌入鸿蒙，同时借助鸿蒙的分布式能力拓展 Electron 应用的场景边界。
本文的代码案例覆盖了 Electron 和鸿蒙的核心开发流程，开发者可在此基础上拓展更复杂的功能（如文件上传、云端同步）。跨平台开发的本质是复用代码、降低成本、拓展场景，而鸿蒙与 Electron 的结合，正是这一理念的最佳实践。
欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)，一起共建开源鸿蒙跨平台生态。
