# [特殊字符]Flutter从0到1

王旺仔

990人浏览 · 2025-12-15 10:49:18

王旺仔 · 2025-12-15 10:49:18 发布

标签：#鸿蒙 #Electron #跨平台开发 #OpenHarmony #桌面应用

📌 引言：当移动优先的鸿蒙遇上“桌面缺失”

华为推出的 HarmonyOS（鸿蒙系统） 自诞生以来，以“一次开发，多端部署”为核心理念，成功覆盖手机、手表、智慧屏、车机等设备。然而，在 PC 桌面生态 上，鸿蒙仍处于补位阶段。

与此同时，全球数百万开发者依赖 Electron 构建跨平台桌面应用（如 VS Code、Figma、Slack）。它用 Web 技术（HTML/CSS/JS）打造原生体验，极大降低了桌面开发门槛。

于是，一个问题浮现：

❓ 能否构建一个“鸿蒙版 Electron”，让前端开发者也能轻松为鸿蒙 PC 或类桌面设备开发高性能应用？

🔍 第一章：什么是 Electron？为什么它如此流行？

建议插入图1：Electron 架构简图

[主进程] ←IPC→ [渲染进程]
   ↓               ↓
Node.js       Chromium (Web UI)
   ↓               ↓
操作系统 API     HTML/CSS/JS 应用

📌 Electron 的三大优势：

特性	说明
✅ Web 技术栈	前端开发者零成本上手
✅ 跨平台	Windows / macOS / Linux 一键打包
✅ 生态丰富	可调用 Node.js 模块，访问文件系统、网络等

💡 但它也有缺点：内存占用高、启动慢、性能不如原生。

🧩 第二章：鸿蒙的现状与挑战 —— 缺少“桌面级”应用容器

当前鸿蒙应用开发模式

方式	技术栈	适用场景
ArkTS + Stage 模型	类 TypeScript	手机/平板/智慧屏
Java/Kotlin	Android 兼容层	旧应用迁移
C++ Native	系统服务	高性能模块

🎯 问题来了：

鸿蒙尚未提供类似 Electron 的 通用桌面应用运行时
开发者无法用纯 Web 技术写一个“能在鸿蒙 PC 上运行的 VS Code”
Web 容器能力有限，不支持 Node.js 生态

💡 第三章：“鸿蒙 Electron”的三种实现路径

虽然官方未发布，但我们可以通过现有技术组合出近似方案。

建议插入图2：三种架构对比图（横向柱状图）

路径	架构	优点	缺点
1. WebView + OpenHarmony NAPI	Web UI + JS 调用 C++/ArkTS	快速集成，轻量	功能受限，无 Node 支持
2. Chromium Embedding + ArkUI Bridge	嵌入 Chromium 内核	支持现代 Web	体积大，功耗高
3. 自研 JS Runtime + 渐进式融合	QuickJS + ArkCompiler	轻量高效，安全可控	开发生态弱

路径一：WebView + OpenHarmony JS API（最现实）

// 示例：在 ArkTS 中加载本地网页并通信
@Entry
@Component
struct WebApp {
  controller: WebController = new WebController()

  build() {
    Column() {
      Web({ src: 'local:///assets/web/index.html', controller: this.controller })
        .javaScriptAccess(true)
        .onMessage("getFile")((msg) => {
          // 接收来自网页的消息
          let content = this.readLocalFile("/data/file.txt")
          this.controller.postJavaScriptResult(msg.messageId, content)
        })
    }
  }

  readLocalFile(path: string): string {
    // 使用 @ohos.file.access 读取文件
    try {
      let fd = fileAccess.openSync(path, fileAccess.OpenMode.READ_ONLY)
      let stat = fileAccess.statSync(path)
      let buffer = new ArrayBuffer(stat.size)
      fileAccess.readSync(fd, buffer)
      fileAccess.closeSync(fd)
      return String.fromCharCode(...new Uint8Array(buffer))
    } catch (e) {
      return "Error: " + e.message
    }
  }
}

✅ 适合：文档编辑器、配置工具、内部管理系统
❌ 不足：无法使用 npm 包，不能运行复杂 JS 框架

路径二：Chromium Embedded Framework for OpenHarmony（CEFOH）

类似 Electron，但内核替换为适配鸿蒙的 Chromium 分支。

建议插入图3：CEFOH 架构设想

[Host App]
   ↓
Chromium Core (Blink + V8)  
   ↓
Bridge → ArkTS Runtime / System Services
   ↓
Web App (React/Vue/Angular) ↔ Node.js-like Modules（模拟）

🔧 实现难点：

V8 在 OpenHarmony 上的移植
安全沙箱机制设计
内存管理优化（避免 Electron 的“内存黑洞”）

🛠️ 社区尝试：

GitHub 项目 ohos-electron（实验性）
OpenSumi 团队正在探索 IDE on OpenHarmony

路径三：自研轻量级运行时（未来方向）

华为已有基础：

ArkCompiler：支持 JS → 字节码编译
QuickJS 移植版：已在 OpenHarmony 中可用
NAPI：允许 JS 调用 C/C++ 模块

我们可以构建一个叫 “HongmOS Runtime” 的小型 Electron 替代品：

# 类似命令行工具
hmr create my-app
cd my-app
hmr start     # 启动调试
hmr build     # 打包为 .app 或 .exe

📦 功能特性设想：

特性	实现方式
窗口管理	`@ohos.window` API 封装
文件系统	`@ohos.file` + 权限控制
网络请求	`fetch` polyfill
插件系统	基于 NAPI 的 `.so/.dll` 扩展
DevTools	内嵌调试面板或远程连接

🧪 第四章：实战演示 —— 用 ArkTS 模拟 Electron 效果

我们来做一个简单的“类 Electron”笔记应用。

项目结构

note-app/
├── entry/src/main/ets/pages/MainPage.ets
├── assets/web/index.html
├── assets/web/app.js
└── module.json5

index.html（前端界面）

<!DOCTYPE html>
<html>
<head>
  <title>鸿蒙笔记</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    textarea { width: 100%; height: 60vh; margin: 10px 0; }
    button { padding: 10px; font-size: 16px; }
  </style>
</head>
<body>
  <h1>📝 鸿蒙笔记</h1>
  <textarea id="editor">请输入内容...</textarea>
  <button onclick="save()">保存到本地</button>
  <p id="status"></p>

  <script>
    function save() {
      const text = document.getElementById('editor').value;
      // 发送消息给 ArkTS 主体
      webview.postMessage('saveFile', { content: text });
    }

    // 接收返回结果
    window.addEventListener('message', (event) => {
      if (event.data.method === 'onSaveResult') {
        document.getElementById('status').innerText = event.data.result;
      }
    });
  </script>
</body>
</html>

MainPage.ets（后端逻辑）

import web_view from '@ohos.web.webview'
import fileAccess from '@ohos.file.access'

@Entry
@Component
struct MainPage {
  controller: web_view.WebController = new web_view.WebController()

  build() {
    Column() {
      Web({ src: 'local:///assets/web/index.html', controller: this.controller })
        .onMessage("saveFile", (msg) => {
          const data = JSON.parse(msg.data)
          const path = "/data/storage/el2/base/haps/entry/files/note.txt"
          try {
            const encoder = new util.TextEncoder()
            const buf = encoder.encode(data.content)
            const fd = fileAccess.openSync(path, fileAccess.OpenMode.CREATE_NEW | fileAccess.OpenMode.WRITE_ONLY)
            fileAccess.writeSync(fd, buf)
            fileAccess.closeSync(fd)
            this.controller.postJavaScriptResult(msg.messageId, {
              method: "onSaveResult",
              result: "✅ 保存成功！"
            })
          } catch (e) {
            this.controller.postJavaScriptResult(msg.messageId, {
              method: "onSaveResult",
              result: "❌ 保存失败：" + e.message
            })
          }
        })
    }
  }
}

✅ 运行效果：

用户在网页中输入文本
点击“保存”触发 JS 到 ArkTS 的通信
ArkTS 调用系统 API 写入文件
返回状态更新页面

这就是一个微型“鸿蒙 Electron”雏形！

📊 第五章：性能对比与前景展望（建议插入图4）

建议图片4：性能对比柱状图

框架	包体积	冷启动时间	内存占用	开发效率
Electron	150MB+	2s+	300MB+	⭐⭐⭐⭐⭐
Flutter Desktop	~80MB	1.2s	150MB	⭐⭐⭐⭐
鸿蒙 WebView 方案	~30MB	0.8s	80MB	⭐⭐⭐
（设想）HongmOS Runtime	~40MB	0.6s	60MB	⭐⭐⭐⭐

📈 结论：

鸿蒙有机会打造更轻量、更安全的“下一代 Electron”
关键在于是否开放强大的 JS-Native 桥接能力

🚀 展望：鸿蒙能否重新定义“桌面应用”？

随着 OpenHarmony PC 版本 在教育、政务、工控领域的推进，以下趋势正在形成：

Web First 策略：政府门户、企业后台优先采用 Web 技术
国产替代需求：VS Code、Chrome OS 替代品呼之欲出
统一开发模型：希望一套代码跑在手机、大屏、PC 上

👉 因此，“鸿蒙 Electron”不是要不要做，而是如何做得更好。

✅ 总结：我们离“鸿蒙 Electron”还有多远？

维度	现状	差距
Web 渲染引擎	✔️ 支持 HTML5/CSS3/Canvas	缺少完整 DevTools
JS 运行时	✔️ QuickJS / V8 可用	无模块系统（import/export）
系统 API	✔️ 文件、网络、窗口基本覆盖	权限粒度粗
生态工具链	❌ 无 npm/yarn 支持	需构建包管理器
开发者体验	⭐⭐☆	文档少，调试难

🎯 突破点建议：

华为开源团队推出 @ohos/electron 实验项目
社区共建 “OHPM”（OpenHarmony Package Manager）
推出 hmr-cli 工具链，支持 create-harmony-app

📎 参考资料

OpenHarmony 官网：https://www.openharmony.cn
OpenHarmony Web 组件文档：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-webview.md
Electron 官方：https://www.electronjs.org
OpenSumi IDE on OpenHarmony 实验：https://github.com/opensumi/core