初识双雄：Electron 与鸿蒙 OS 的跨平台使命

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
本文章所属专栏：Electron for HarmonyOS

Electron 与鸿蒙 OS 的跨平台使命

- 前言
- [什么是 Electron？它如何用 Web 技术构建桌面应用？](#什么是 Electron？它如何用 Web 技术构建桌面应用？)
- [鸿蒙 OS 是什么？它的"一次开发，多端部署"理念解析](#鸿蒙 OS 是什么？它的“一次开发，多端部署”理念解析)
- - [🔍 逐行详解](#🔍 逐行详解)
- [为什么我们要探索 Electron 与鸿蒙的结合？](#为什么我们要探索 Electron 与鸿蒙的结合？)
- 小结

前言

在当今软件开发领域，"跨平台"早已不是一句口号，而是一种刚需。无论是桌面、移动端还是 IoT 设备，开发者都希望以最小的成本覆盖最多的用户终端。今天，我们要认识两位"跨平台明星"------Electron 与 鸿蒙操作系统（HarmonyOS），并探讨它们各自如何利用 Web 技术实现多端适配，以及为何将二者结合值得深入探索。

参考资料：ArkWeb页面适配

什么是 Electron？它如何用 Web 技术构建桌面应用？

Electron 是由 GitHub 开发并于 2013 年开源的框架，其核心思想是：用前端技术（HTML/CSS/JavaScript）开发原生桌面应用。它将 Chromium 浏览器引擎与 Node.js 运行时深度集成，使得开发者既能使用现代 Web 技术构建 UI，又能通过 Node.js 调用系统级 API（如文件读写、进程管理等）。

Electron 的典型架构包含两类进程：

主进程（Main Process）：负责创建窗口、管理生命周期、调用原生能力。
渲染进程（Renderer Process）：每个窗口对应一个 Chromium 实例，运行你的 Web 页面。

这种"浏览器 + 后台脚本"的组合，让 VS Code、Slack、Discord 等知名应用得以快速迭代并跨 Windows、macOS、Linux 三端发布。

想要去详细了解Electron的可以看下我的这篇文章：从零开始：用 Electron 构建你的第一个桌面应用

下面是一个最简 Electron 应用示例：

javascript 复制代码

// main.js（主进程）
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 安全建议：默认关闭 Node 集成
      contextIsolation: true
    }
  });
  win.loadFile('index.html'); // 加载本地 HTML
}

app.whenReady().then(createWindow);

html 复制代码

<!-- index.html（渲染进程） -->
<!DOCTYPE html>
<html>
<head><title>My Electron App</title></head>
<body>
  <h1>Hello from Electron!</h1>
  <p>这是一个基于 Web 技术的桌面应用。</p>
</body>
</html>

只需几行代码，你就能拥有一个真正的桌面窗口------这正是 Electron 的魅力所在。

鸿蒙 OS 是什么？它的"一次开发，多端部署"理念解析

如果说 Electron 解决了"桌面端跨平台"，那么华为推出的 鸿蒙操作系统（HarmonyOS） 则致力于解决 "全场景跨设备" 的难题。从手机、平板、智能手表到车机、智慧屏甚至 IoT 传感器，鸿蒙的目标是让一套代码无缝运行在不同形态的设备上。

鸿蒙的核心技术之一是 分布式软总线 和 方舟编译器（Ark Compiler） ，但对 Web 开发者而言，更值得关注的是其对 Web 技术的支持 。在 HarmonyOS 的 FA（Feature Ability）模型中，开发者可以通过 @ohos.web.webview 组件嵌入 Web 内容，实现混合开发。

更重要的是，鸿蒙提出了 "声明式 UI + 响应式编程" 的开发范式（通过 ArkTS/JS），同时保留了对标准 Web 技术的兼容能力。这意味着，如果你有一个成熟的 Web 应用，理论上只需少量适配，即可在鸿蒙设备上运行。

以下是一个在鸿蒙中使用 Web 组件加载本地页面的简单示例：

ts 复制代码

// entry/src/main/ets/pages/index.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
export struct Index {
  private webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ 
        src: $rawfile('index.html'), 
        controller: this.webviewController 
      })
      .domStorageAccess(true)
    }
  }
}

html 复制代码

<!-- resources/rawfile/index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>鸿蒙 Web 示例</title>
    <style>
        body {
          font-family: sans-serif;
          padding: 20px;
          background-color: #f5f5f5;
        }
        h1 {
          color: #007AFF;
        }
        .info {
          margin-top: 20px;
          color: #333;
        }
    </style>
</head>
<body>
<h1>🎉 我是鸿蒙中的 Web 页面！</h1>
<p class="info">此页面由本地 HTML 加载，位于 <code>resources/rawfile/index.html</code></p>
<script>
    console.log("Web 页面已加载！");
</script>
</body>
</html>

虽然语法风格与传统 Web 不同，但底层仍依赖标准的 HTML/CSS/JS 渲染引擎。鸿蒙正在逐步构建一个既兼容 Web 生态、又具备原生性能的新型应用平台。

🔍 逐行详解

import { webview } from '@kit.ArkWeb';

作用：导入鸿蒙新版本（API 10+）提供的 ArkWeb 套件。

说明：

@kit.ArkWeb 是 HarmonyOS 官方推荐的 Web 能力模块（替代旧版 @ohos.web.webview）。

它提供了更完善的类型定义、控制器和安全策略。

webview 是一个命名空间，包含 WebviewController、配置项等。

✅ 这是正确且现代的导入方式，适用于 DevEco Studio 4.1+ 和 HarmonyOS NEXT 开发。
@Entry @Component export struct Index

@Entry：表示这是应用的主页面入口（Stage 模型要求）。

@Component：声明这是一个可复用的 UI 组件。

struct Index：ArkTS 中定义组件使用 struct（而非 class）。
private webviewController: webview.WebviewController = new webview.WebviewController();

作用：创建一个 Web 控制器实例，用于后续对 Web 页面进行控制（如执行 JS、前进/后退、注入对象等）。

说明：

WebviewController 是 ArkWeb 提供的核心控制类。

虽然当前代码未使用它，但保留它可以为后续功能（如 postMessage、runJavaScript）做准备。

如果你不需要交互，这行甚至可以省略。
Web({ src: $rawfile('index.html'), controller: this.webviewController })

这是核心的 Web 组件调用：
Web({...})

HarmonyOS 内置的 Web 容器组件（注意首字母大写）。

接收配置对象作为参数。
src: $rawfile('index.html')

关键点：这是加载本地资源的标准方式。

$rawfile('xxx') 是 ArkTS 的编译时宏函数，会自动解析为 local:///rawfile/xxx。

要求文件位于：

entry/src/main/resources/rawfile/index.html
controller: this.webviewController

将前面创建的控制器绑定到 Web 组件，实现"控制权移交"。
domStorageAccess(true)

作用：启用 DOM Storage（即 localStorage 和 sessionStorage）。

为什么需要？

默认情况下，出于安全考虑，Web 容器可能禁用本地存储。如果你的 HTML 页面使用了

localStorage.setItem(...)，就必须开启此项。其他类似方法： .javaScriptAccess(true)（默认

true） .databaseAccess(true) .trustedUrlMode(true)（若需加载 file:// 或特殊协议）

⚠️ 注意：.domStorageAccess(true) 是链式调用方法，不是属性。

为什么我们要探索 Electron 与鸿蒙的结合？

乍看之下，Electron 主打桌面，鸿蒙聚焦移动与 IoT，二者似乎"井水不犯河水"。但随着鸿蒙生态的扩展（尤其是 OpenHarmony 对 PC 设备的支持），以及企业对统一技术栈的迫切需求，两者的交汇点逐渐显现：

技术栈统一：许多团队已用 React/Vue 构建了 Electron 桌面端，若能复用相同 UI 逻辑到鸿蒙设备，将极大降低维护成本。
Web 能力互补：Electron 提供强大的 Node.js 后台能力，而鸿蒙提供分布式设备协同能力。未来是否可能通过桥接，让桌面应用控制鸿蒙 IoT 设备？
国产化趋势：在国内信创背景下，探索 Electron 在鸿蒙或 OpenHarmony 上的替代方案（如基于 WebView 的轻量运行时），具有战略意义。

更重要的是，这场探索不仅是技术适配，更是对"跨平台本质"的再思考：我们追求的不是"一套代码跑 everywhere"，而是"一套逻辑，多端最优呈现"。

小结

初步认识了 Electron 与鸿蒙 OS 的定位与能力。它们分别代表了 Web 技术在桌面端和全场景端的成功实践。接下来的旅程中，我们将深入它们的 Web 引擎、通信机制、性能表现，并尝试搭建一座连接两者的桥梁。

📌 动手建议：

安装 Electron Quick Start

下载 DevEco Studio 并创建一个带 Web 组件的鸿蒙项目
亲自跑通两个"Hello World"，是理解差异的第一步。