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

@VON

发布于 2025-12-21 12:30:45

2460

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

前言

在当今软件开发领域，“跨平台”早已不是一句口号，而是一种刚需。无论是桌面、移动端还是 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 应用示例：

// 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);

<!-- 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 组件加载本地页面的简单示例：

// 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)
    }
  }
}

<!-- 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”，而是“一套逻辑，多端最优呈现”。