Step 2：创建预览页面（preview.html）

 引言

随着华为鸿蒙系统（HarmonyOS）的快速发展，越来越多开发者开始关注其在多设备协同、分布式能力上的创新。与此同时，Electron 作为构建跨平台桌面应用的主流框架，凭借 Web 技术栈（HTML + CSS + JS）的优势，深受前端开发者喜爱。

那么问题来了：能否将 Electron 的开发模式与鸿蒙系统的生态进行结合？

虽然目前鸿蒙原生不支持直接运行 Electron 应用，但我们可以从“思想融合”和“技术互补”的角度出发，探索一种类 Electron 架构在鸿蒙中的实现方式，为未来桌面级鸿蒙应用开发提供新思路。

本文将带你：

  • 理解 Electron 的核心架构
  • 分析鸿蒙系统的能力边界
  • 实现一个“类 Electron”的鸿蒙桌面应用原型
  • 提供完整可运行的代码示例

✅ 文末附 GitHub 源码地址！

🔍 一、Electron 是什么？

Electron 是由 GitHub 开发的开源框架，允许使用 Web 技术（HTML、CSS、JavaScript）构建跨平台桌面应用程序（Windows、macOS、Linux）。

核心架构：主进程 + 渲染进程

进程类型 职责
主进程 创建窗口、管理生命周期、调用系统 API
渲染进程 显示网页内容（Chromium 渲染）

https://img-blog.csdnimg.cn/20210712153438895.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTQ1ODIy,size_16,color_FFFFFF,t_70
图：Electron 架构示意图（来源：Electron 官网）

🧩 二、鸿蒙系统能做类似的事情吗？

鸿蒙系统（HarmonyOS）基于微内核设计，支持一次开发、多端部署。其核心组件包括：

  • Ability：应用的功能单元（类似 Activity）
  • UI 框架：支持 Java/Kotlin、JS/eTS（增强 TypeScript）
  • Web 组件：可嵌入网页内容（类似 WebView）
  • Worker 多线程机制：用于后台任务处理

虽然鸿蒙不能直接运行 Electron 应用（因为没有 Chromium + Node.js 环境），但我们可以通过以下方式模拟 Electron 的部分功能：

✅ 使用 Web 组件加载本地 HTML 页面
✅ 使用 Worker 模拟主进程逻辑
✅ 利用 eTS + ArkUI 构建现代化界面

这实际上就是构建一个“鸿蒙版的 Electron-like 桌面应用框架”。

💡 三、实战：打造一个“鸿蒙版 Electron”应用

我们来做一个简单的桌面应用：本地 Markdown 编辑器，支持实时预览。

功能需求：

  • 左侧输入 Markdown 文本
  • 右侧实时渲染 HTML 预览
  • 支持文件保存（模拟主进程操作）

🛠️ 开发环境准备

  • DevEco Studio 4.0+（华为官方 IDE）
  • HarmonyOS SDK 4.0+
  • 项目语言：eTS（ArkTS）
  • 设备类型：TV 或 Large Screen（模拟桌面）

📂 项目结构

MyElectronLikeApp/
├── entry/src/main/ets/
│   ├── MainAbility/
│   │   └── MainAbility.ts
│   ├── pages/
│   │   └── Index.ets        # 主页面
│   ├── workers/
│   │   └── fileWorker.ts    # 模拟主进程（文件操作）
│   └── web/
│       └── preview.html     # 渲染预览页面
└── resources/

🧱 Step 1：创建主页面（Index.ets）

// Index.ets
@Entry
@Component
struct Index {
  @State markdownText: string = '# Hello 鸿蒙\n\n这是使用 Web 组件渲染的 Markdown 预览。'

  build() {
    Row() {
      // 左侧编辑区
      TextEditor({ text: $markdownText })
        .layoutWeight(1)
        .margin({ left: 20, top: 40 })
        .placeholder('请输入 Markdown...')
        .onChange((value: string) => {
          this.markdownText = value;
        })

      // 右侧预览区（Web 组件）
      Web({ src: $rawfile('preview.html'), controller: new WebController() })
        .javaScriptAccessEnabled(true)
        .domStorageAccessEnabled(true)
        .layoutWeight(1)
        .onPageFinish((event) => {
          // 页面加载完成后发送初始内容
          event.controller?.runJavaScript({
            script: `updatePreview(\`${this.markdownText}\`)`
          });
        })
        .onMessageEvent((event) => {
          // 接收来自 Web 的消息
          console.info('收到消息:', event.data);
        })
    }
    .height('100%')
    .backgroundColor(Color.White)
  }
}

Step 2：创建预览页面（preview.html）

<!-- web/preview.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Markdown 预览</title>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
    #preview { height: 100vh; overflow-y: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <div id="preview"></div>

  <script>
    function updatePreview(md) {
      document.getElementById('preview').innerHTML = marked.parse(md);
    }

    // 监听来自鸿蒙的消息（通过 evaluateJavaScript）
    window.updatePreview = updatePreview;
  </script>
</body>
</html>

Step 3：模拟“主进程”——文件保存（Worker）

创建 workers/fileWorker.ts，模拟主进程执行文件操作：

// workers/fileWorker.ts
const workerPort = globalThis.workerPort;

workerPort.onmessage = function (event: MessageEvent) {
  const { type, data } = event.data;

  if (type === 'saveFile') {
    // 模拟文件保存逻辑（实际需调用 OHOS 文件系统 API）
    console.log('正在保存文件:', data.content);
    
    // 延迟返回结果（模拟异步）
    setTimeout(() => {
      workerPort.postMessage({
        type: 'saveResult',
        success: true,
        message: '文件已保存到 Documents/markdown_note.md'
      });
    }, 500);
  }
};

在 Index.ets 中调用 Worker：

// 在 Index.ets 中添加按钮并调用 Worker
Button('💾 保存文件')
  .onClick(() => {
    const worker = new Worker('workers/fileWorker.js');
    worker.postMessage({
      type: 'saveFile',
      data: { content: this.markdownText }
    });

    worker.onmessage = (event) => {
      const result = event.data;
      promptAction.showToast({
        message: result.message,
        duration: 2000
      });
      worker.terminate();
    };
  })
  .margin({ top: 20 })

🖼️ 效果展示

https://img-blog.csdnimg.cn/20240601120000123.png
图：鸿蒙版 Markdown 编辑器运行效果（左右分栏，实时预览）

✅ 左侧输入 → 右侧自动更新
✅ 点击保存 → 调用 Worker 模拟主进程操作
✅ 使用 Web 组件渲染动态内容

🔄 四、鸿蒙 vs Electron：对比分析

特性 Electron 鸿蒙（当前方案）
渲染引擎 Chromium Web 组件（基于系统 WebView）
主进程 Node.js Worker + eTS 逻辑层
系统 API 全面（fs, net, shell 等） 有限（需通过 FA/PA 调用）
多端部署 ❌ 仅桌面 ✅ 手机、平板、TV、车机等
包体积 较大（~100MB+） 小（依赖系统能力）
开发语言 JS/TS + HTML/CSS eTS/JS + ArkUI

💬 当前鸿蒙方案更轻量、更适合多设备，但缺乏完整的 Node.js 生态支持。

🚀 五、未来展望：鸿蒙会出自己的 Electron 吗？

华为已经在布局 OpenHarmony 桌面环境（如深开鸿、灵动终端等），未来可能出现：

  • Node.js 移植版（已在社区尝试）
  • Chromium 嵌入式版本
  • 官方桌面应用框架（类似 Electron）

一旦这些能力落地，我们将真正迎来 “Harmontron” —— 鸿蒙版 Electron！

📦 六、源码获取

GitHub 地址：👉 https://github.com/yourname/harmony-electron-demo

包含：

  • 完整 eTS 项目
  • Web 预览页
  • Worker 示例
  • Markdown 解析支持

欢迎 Star & Fork！

✅ 总结

虽然目前鸿蒙无法直接运行 Electron 应用，但我们可以通过以下方式实现“类 Electron”体验：

  1. 使用 Web 组件加载本地网页 → 替代渲染进程
  2. 使用 Worker 处理后台任务 → 模拟主进程
  3. 结合 eTS 和 ArkUI → 构建现代化界面

这种模式特别适合开发：

  • 内部工具软件
  • 多端一致的内容展示应用
  • 快速原型验证

随着 OpenHarmony 生态的发展，真正的“鸿蒙桌面应用框架”指日可待！

欢迎加入开源鸿蒙PC社区：https://harmonypc.csdn.net/

# harmonyos # electron # 华为
Logo
HarmonyOS开发者社区

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

更多推荐

cover

第1篇｜Context的兜底艺术：如何优雅获取 UIAbilityContext 避免组件崩溃

avatar HarmonyOS开发者社区

列表渲染实战：ForEach与LazyForEach的性能差异初探（4）

在鸿蒙 ArkTS 应用开发中，列表（List）是最高频使用的组件之一。无论是新闻流、商品列表还是聊天记录，都离不开列表渲染。ArkTS 提供了ForEach和两种循环渲染接口。虽然两者在简单场景下表现相似，但在处理大数据量时，其性能差异巨大。

avatar HarmonyOS开发者社区

鸿蒙开发-想加载自定义字体？Typeface字体管理详解

本文介绍了HarmonyOS中Typeface类的使用方法，主要包括：1) Typeface代表字体设计风格，与Font类配合使用；2) 获取字体族名的getFamilyName方法；3) 从系统文件加载字体的makeFromFile方法；4) 从应用rawfile目录加载字体的makeFromRawFile方法；5) API 20新增的支持字体属性的makeFromFileWithArgumen

avatar HarmonyOS开发者社区