起航：5分钟搭建你的第一个“鸿蒙Electron”应用

2501_94386845

960人浏览 · 2025-11-26 12:46:39

2501_94386845 · 2025-11-26 12:46:39 发布

示例图片

前言：什么是“鸿蒙Electron”？

你可能听说过 Electron —— 它让前端开发者用 HTML/CSS/JS 轻松构建桌面应用（如 VS Code、钉钉）。
但你知道吗？在 HarmonyOS（鸿蒙） 中，我们也能实现类似的能力！

虽然华为没有官方推出“Harmony Electron”框架，但借助鸿蒙内置的 Web 组件 + ArkTS 原生桥接，我们可以快速构建一个轻量、安全、离线运行的混合应用——本文称之为 “鸿蒙Electron”应用（仅为类比，非官方命名）。

✅ 本文目标：5分钟内，手把手带你创建第一个可运行的“鸿蒙Electron”应用！

一、准备工作

1. 开发环境

安装 DevEco Studio 4.1+
创建 Empty Ability（Stage 模型） 项目，语言选择 ArkTS

2. 项目结构预览

我们将把 Web 页面放在 resources/rawfile/ 目录下，由 ArkTS 宿主加载。

MyFirstHarmonyElectron/
└── entry/
    └── src/main/
        ├── ets/
        │   └── MainView.ets      ← ArkTS 宿主页面
        └── resources/rawfile/
            ├── index.html        ← Web 主页
            └── app.js            ← 前端逻辑

📌 提示：rawfile 是鸿蒙存放静态资源的专用目录，支持直接通过 file:// 访问。

二、Step 1：编写 Web 前端页面

1. 创建 `index.html`

在 entry/src/main/resources/rawfile/ 下新建文件：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的第一个鸿蒙Electron应用</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      text-align: center;
      padding: 40px;
      background: #f0f9ff;
    }
    h1 { color: #007dff; }
    button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background: #007dff;
      color: white;
      cursor: pointer;
    }
    #result {
      margin-top: 20px;
      padding: 15px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <h1>🚀 鸿蒙Electron 起航！</h1>
  <p>点击按钮调用鸿蒙原生能力</p>
  
  <button onclick="getDeviceInfo()">获取设备信息</button>
  <button onclick="createFile()">创建本地文件</button>
  
  <div id="result">等待操作...</div>

  <script src="app.js"></script>
</body>
</html>

2. 创建 `app.js`

// app.js
// 全局桥接对象（由 ArkTS 注入）
const hwBridge = window.HarmonyBridge;

function setResult(text) {
  document.getElementById('result').innerText = text;
}

function getDeviceInfo() {
  if (!hwBridge?.getDeviceName) {
    return setResult('❌ 原生服务未就绪');
  }
  const name = hwBridge.getDeviceName();
  setResult(`📱 设备名称: ${name}`);
}

function createFile() {
  if (!hwBridge?.saveTextFile) {
    return setResult('❌ 文件服务不可用');
  }
  const success = hwBridge.saveTextFile('hello.txt', 'Hello from HarmonyElectron!');
  setResult(success ? '✅ 文件已保存到沙箱目录' : '❌ 保存失败');
}

💡 此时 Web 部分已完成！接下来用 ArkTS 为其“赋能”。

三、Step 2：编写 ArkTS 宿主与原生服务

打开 MainView.ets（通常位于 entry/src/main/ets/），替换为以下代码：

// MainView.ets
import web_webview from '@ohos:web.webview';
import deviceInfo from '@ohos:deviceInfo';
import fs from '@ohos.file.fs';
import common from '@ohos.app.ability.common';

@Entry
@Component
struct MainView {
  private controller: web_webview.WebController = new web_webview.WebController();
  private context: common.UIAbilityContext = getContext(this);

  // 获取设备名称
  getDeviceName(): string {
    return deviceInfo.deviceName || 'Unknown Device';
  }

  // 保存文本文件到应用沙箱
  saveTextFile(filename: string, content: string): boolean {
    try {
      const path = this.context.filesDir + '/' + filename;
      fs.writeTextSync(path, content, { encoding: 'utf-8' });
      console.info(`文件已保存: ${path}`);
      return true;
    } catch (err) {
      console.error('保存失败:', err);
      return false;
    }
  }

  build() {
    Column() {
      Text('我的第一个“鸿蒙Electron”应用')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin(10)

      // 加载本地 Web 页面
      Web({
        src: 'file:///etc/entry/resources/rawfile/index.html',
        controller: this.controller
      })
      .width('100%')
      .height('90%')
      .javaScriptAccess(true) // ⚠️ 必须开启！否则无法执行 JS
      .onPageEnd(() => {
        // 注册桥接对象：将 ArkTS 方法暴露给 Web
        this.controller.registerJavaScriptProxy(
          {
            getDeviceName: () => this.getDeviceName(),
            saveTextFile: (name: string, data: string) => this.saveTextFile(name, data)
          },
          'HarmonyBridge', // 对应 JS 中的 window.HarmonyBridge
          ['getDeviceName', 'saveTextFile'] // 可调用的方法列表
        );
      })
    }
    .width('100%')
    .height('100%')
  }
}

🔑 关键点：

javaScriptAccess(true)：允许 Web 执行 JavaScript；

registerJavaScriptProxy：建立 JS 与 ArkTS 的通信桥梁。

四、Step 3：运行

在 DevEco Studio 开发环境中，找到工具栏上的 ▶ Run 按钮（通常位于右上角），点击该按钮开始编译和运行当前项目；
系统会自动检测可用的运行设备：
- 如果配置了 HarmonyOS 模拟器，应用将在模拟器窗口中启动
- 如果通过 USB 连接了真机设备（需提前开启开发者模式并授权），应用将直接安装到设备运行
- 运行过程中可以在底部的 Run 窗口查看实时日志
应用启动后，找到界面上的测试按钮（通常标记为"Click Me"或类似文本），执行以下操作：
- 单次点击：观察界面元素的状态变化
- 多次快速点击：测试应用的响应性能
- 注意查看控制台输出的交互日志，验证业务逻辑是否正确执行
如需重新运行，可点击 🔄 Rerun 按钮快速重启应用，或者通过 🛑 Stop 按钮终止当前运行实例

✅ 验证文件是否创建：
在 DevEco 中打开 File Explorer，路径为 /data/storage/el2/base/haps/.../files/，可看到 hello.txt。

五、为什么这很重要？

能力	传统纯 Web	本文“鸿蒙Electron”
访问设备信息	❌ 不行	✅ 通过 ArkTS
读写本地文件	❌ 受限	✅ 沙箱内自由操作
离线运行	⚠️ 需缓存	✅ 资源内嵌，完全离线
包体积	小	仅增加几 MB
开发效率	高	同样高 + 获得原生能力