鸿蒙与 Electron 的融合探索：跨端开发新思路（优快云图文教程）

🌟 前言

随着华为鸿蒙系统（HarmonyOS）的快速发展，越来越多开发者开始关注其生态建设。与此同时，Electron 作为构建跨平台桌面应用的强大框架，在 Windows、macOS 和 Linux 上广受欢迎。

但你有没有想过：能否将 Electron 的能力引入到鸿蒙生态中？或者让鸿蒙与 Electron 应用实现协同？

本文将带你深入探讨 鸿蒙与 Electron 的结合可能性，通过图文并茂的方式 + 实战代码案例，展示如何在两个生态之间搭建桥梁，开启“桌面 + 移动 + IoT”一体化开发的新思路！

---

🔍 一、什么是鸿蒙？什么是 Electron？

✅ 鸿蒙系统（HarmonyOS）

• 华为推出的分布式操作系统
• 支持手机、平板、智能手表、车机、智能家居等多设备统一调度
• 开发语言主要为 ArkTS / JavaScript / Java
• 使用 ArkUI 构建用户界面
• 支持 FA（Feature Ability）模型 和新的 Stage 模型

📌 官网：https://developer.harmonyos.com

---

✅ Electron 框架

• 使用 HTML + CSS + JavaScript 构建桌面应用程序
• 基于 Chromium + Node.js
• 可打包为 .exe、.dmg、.deb 等原生格式
• 典型应用：VS Code、Figma、Slack、Discord

📌 官网：https://www.electronjs.org

---

⚠️ 注意：目前无法直接运行 Electron on 鸿蒙

由于鸿蒙系统基于 LiteOS 或 Linux 内核定制，并不原生支持完整的 Chromium 和 Node.js 运行环境，因此：

❌ 不能直接在鸿蒙设备上运行 Electron 应用

但这并不意味着两者无法协作！我们可以通过以下方式实现“间接融合”。

---

🧩 二、鸿蒙与 Electron 的三种融合方式

方式	描述	适用场景
1️⃣ 数据互通	通过 HTTP/WebSocket 实现通信	桌面控制鸿蒙设备
2️⃣ Web 嵌入	在 Electron 中加载鸿蒙 Web 页面	展示鸿蒙服务内容
3️⃣ API 对接	鸿蒙提供后端接口供 Electron 调用	构建统一管理平台

下面我们逐个演示！

---

💡 场景实战：使用 Electron 控制鸿蒙设备灯光（模拟）

我们模拟一个“智能家居”场景：

• 鸿蒙设备（如智慧屏或开发板）模拟灯光控制器
• Electron 桌面应用作为远程控制面板
• 双方通过本地 HTTP 接口通信

---

📦 步骤一：鸿蒙端 —— 创建简易 HTTP 服务器（模拟）

使用 DevEco Studio 创建一个 HarmonyOS 项目（API 9+），采用 Stage 模型。

1. 添加网络权限（module.json5）

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_WIFI_INFO"
      }
    ]
  }
}

2. 使用 httpServer 模块启动本地服务（MainAbility.ts）

import http from '@ohos.net.httpServer';
import deviceInfo from '@ohos.deviceInfo';

let server: http.HttpServer;

@Entry
@Component
struct MainAbility {
  build() {
    Column() {
      Text('鸿蒙灯光控制器')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      
      Button('启动服务')
        .onClick(() => this.startHttpServer())
        .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
  }

  startHttpServer() {
    http.createHttpServer().then((data) => {
      server = data;
      server.on("request", (request, response) => {
        console.info(`收到请求: ${request.requestUrl}, 方法: ${request.method}`);

        let url = request.requestUrl;
        if (url === '/light/on') {
          this.turnOnLight();
          response.writeSync("Light ON - Powered by HarmonyOS");
        } else if (url === '/light/off') {
          this.turnOffLight();
          response.writeSync("Light OFF - Powered by HarmonyOS");
        } else {
          response.writeSync("Welcome to HarmonyOS Controller!");
        }

        response.close();
      });

      // 获取本机IP
      let ip = '10.0.2.15'; // 示例IP，实际需动态获取
      server.listen(8080).then(() => {
        promptAction.showToast({
          message: `服务已启动：http://${ip}:8080`
        });
      });
    }).catch((err) => {
      promptAction.showToast({ message: '启动失败: ' + err });
    });
  }

  turnOnLight() {
    console.info("💡 灯光已打开");
    // 可以触发真实硬件操作
  }

  turnOffLight() {
    console.info("🌑 灯光已关闭");
  }
}

✅ 效果图：

https://example.com/harmony-server.png
(注：此处为示意图片链接，请替换为你上传的真实截图)

---

💻 步骤二：Electron 端 —— 创建控制面板

1. 初始化项目

mkdir electron-harmony-controller
cd electron-harmony-controller
npm init -y
npm install electron --save-dev

2. 编写主进程代码（main.js）

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const axios = require('axios');

function createWindow () {
  const win = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// IPC 处理控制命令
ipcMain.handle('control-light', async (event, action) => {
  const HARMONY_IP = 'http://192.168.1.100:8080'; // 修改为鸿蒙设备真实IP
  try {
    const res = await axios.get(`${HARMONY_IP}/light/${action}`);
    return { success: true, message: res.data };
  } catch (err) {
    return { success: false, message: '连接失败，请检查网络和IP' };
  }
});

3. 渲染进程页面（index.html）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鸿蒙灯光控制器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 40px;
    }
    button {
      padding: 12px 24px;
      font-size: 16px;
      margin: 10px;
      cursor: pointer;
    }
    .on { background-color: #4CAF50; color: white; }
    .off { background-color: #f44336; color: white; }
  </style>
</head>
<body>
  <h1>🔌 Electron 控制鸿蒙设备</h1>
  <button class="on" οnclick="turnOn()">开灯</button>
  <button class="off" οnclick="turnOff()">关灯</button>
  <p id="status">状态：等待连接...</p>

  <script type="module">
    import { ipcRenderer } from 'electron';

    function updateStatus(msg) {
      document.getElementById('status').innerText = '状态：' + msg;
    }

    async function sendCommand(action) {
      const result = await ipcRenderer.invoke('control-light', action);
      if (result.success) {
        updateStatus(result.message);
      } else {
        updateStatus('❌ ' + result.message);
      }
    }

    function turnOn() {
      sendCommand('on');
    }

    function turnOff() {
      sendCommand('off');
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>鸿蒙灯光控制器</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

padding: 40px;

}

button {

padding: 12px 24px;

font-size: 16px;

margin: 10px;

cursor: pointer;

}

.on { background-color: #4CAF50; color: white; }

.off { background-color: #f44336; color: white; }

</style>

</head>

<body>

<h1>🔌 Electron 控制鸿蒙设备</h1>

<button class="on" οnclick="turnOn()">开灯</button>

<button class="off" οnclick="turnOff()">关灯</button>

<p id="status">状态：等待连接...</p>

<script type="module">

import { ipcRenderer } from 'electron';

function updateStatus(msg) {

document.getElementById('status').innerText = '状态：' + msg;

}

async function sendCommand(action) {

const result = await ipcRenderer.invoke('control-light', action);

if (result.success) {

updateStatus(result.message);

} else {

updateStatus('❌ ' + result.message);

}

}

function turnOn() {

sendCommand('on');

}

function turnOff() {

sendCommand('off');

}

</script>

</body>

</html>

4. Preload 文件（preload.js）

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  controlLight: (action) => ipcRenderer.invoke('control-light', action)
});

5. 启动脚本（package.json）

{
  "scripts": {
    "start": "electron main.js"
  }
}

✅ 效果图：

https://example.com/electron-ui.png
(请替换为你的实际截图)

---

🔄 三、运行效果演示

1. 在鸿蒙设备/模拟器上运行服务，监听 8080 端口
2. 记录鸿蒙设备的局域网 IP（如 192.168.1.100）
3. 修改 Electron 代码中的 HARMONY_IP
4. 启动 Electron 应用

🎯 最终效果：点击按钮 → 请求发送至鸿蒙 → 鸿蒙打印日志并返回响应

---

🧪 四、进阶方向：双向通信 + WebSocket

若需实时同步状态（如灯光变化自动刷新 UI），可升级为 WebSocket 通信。

鸿蒙端添加 WebSocket Server（伪代码）

import ws from '@ohos.net.webSocketServer';

ws.createWebSocketServer(8081).then(server => {
  server.on('connect', (session) => {
    session.send('Connected to HarmonyOS!');
    session.on('message', (msg) => {
      console.info('Received:', msg);
    });
  });
});

Electron 使用 WebSocket Client 监听

const socket = new WebSocket('ws://192.168.1.100:8081');
socket.onmessage = (event) => {
  console.log('来自鸿蒙的消息:', event.data);
};

---

🎯 五、总结：鸿蒙 × Electron 的价值

维度	说明
✅ 跨平台整合	桌面 + 移动 + IoT 统一管理
✅ 快速原型开发	利用 Electron 快速构建调试工具
✅ 生态互补	鸿蒙强在设备端，Electron 强在桌面端
⚠️ 当前限制	不支持直接运行；需依赖网络通信

---

📚 六、参考资料

• 华为开发者官网：https://developer.harmonyos.com
• Electron 官方文档：https://www.electronjs.org/docs
• HarmonyOS HTTP Server 文档：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-httpserver-0000001347687536

---

🙋‍♂️ 结语

虽然目前还不能“直接”在鸿蒙上跑 Electron，但通过 网络通信 + 分布式架构，我们可以实现强大的跨端联动。

未来随着鸿蒙生态完善，或许会出现类似 “Electron for OpenHarmony” 的轻量化运行时，真正实现“一次编写，处处运行”的愿景！