在跨端应用开发领域，Electron 凭借 “一次开发、多端运行” 的特性占据重要地位，而鸿蒙系统（HarmonyOS）尤其是鸿蒙 PC作为面向全场景的分布式操作系统，其开放性与兼容性为跨端生态拓展提供了新可能。本文将深入解析鸿蒙 PC 与 Electron 的融合逻辑、技术路径，并通过完整代码案例，展示如何开发一款能运行在鸿蒙 PC（及 Windows/macOS/Linux）的跨端桌面应用。

一、核心概念与融合逻辑

1. 鸿蒙 PC 对 Electron 的支持基础

鸿蒙 PC（基于 OpenHarmony 3.0+ 及 HarmonyOS NEXT）通过Linux 子系统和兼容性层实现对 Electron 应用的原生支持：

  • 鸿蒙 PC 的 Linux 子系统提供完整的 POSIX 兼容环境，可无缝运行 Node.js runtime（Electron 核心依赖）；
  • 鸿蒙 PC 的图形渲染框架深度适配 Chromium 内核（Electron 基于 Chromium），保障 UI 在鸿蒙 PC 上的渲染一致性与流畅性；
  • 基于鸿蒙 PC 的分布式能力，Electron 应用可调用鸿蒙 PC 的硬件资源（如摄像头、触控屏、系统通知），实现原生级交互体验。

2. 技术栈选型

  • 核心框架：Electron 28+（稳定支持跨端渲染，适配鸿蒙 PC Linux 子系统）；
  • UI 框架：Vue 3 + Vite（轻量高效，适配 Electron 渲染进程，兼容鸿蒙 PC 显示特性）；
  • 鸿蒙适配：OpenHarmony 4.0+ 或 HarmonyOS NEXT（鸿蒙 PC 正式版）；
  • 构建工具：electron-builder（打包鸿蒙 PC/ Linux/Windows/macOS 安装包）。

二、完整代码案例：鸿蒙 PC - Electron 跨端文本编辑器

下面将实现一款极简文本编辑器，核心特性：

  • 跨端运行（鸿蒙 PC、Windows、macOS、Linux）；
  • 基础文本编辑、本地保存功能；
  • 鸿蒙 PC 特有：调用系统原生通知、适配鸿蒙 PC 文件管理系统。

1. 项目初始化

步骤 1：创建 Vue + Vite 项目
# 创建 Vue 项目
npm create vite@latest electron-harmony-pc-demo -- --template vue
cd electron-harmony-pc-demo
npm install

# 安装 Electron 核心依赖（适配鸿蒙PC）
npm install electron@28.2.0 electron-builder@24.9.1 --save-dev
npm install @electron/remote@2.0.11 --save  # 解决主-渲染进程通信
步骤 2：配置项目结构

最终项目结构（适配鸿蒙 PC 目录规范）：

electron-harmony-pc-demo/
├── src/                  # Vue 渲染进程代码
│   ├── assets/
│   ├── components/
│   ├── main.js           # Vue 入口
│   └── App.vue           # 主页面
├── main.js               # Electron 主进程（适配鸿蒙PC通知）
├── preload.js            # 预加载脚本（主-渲染进程通信）
├── index.html            # 入口 HTML
├── package.json          # 依赖与鸿蒙PC打包配置
└── vite.config.js        # Vite 配置（适配鸿蒙PC本地加载）

2. 核心代码实现

（1）Vite 配置（适配鸿蒙 PC 本地加载）

修改 vite.config.js，确保鸿蒙 PC 下渲染进程资源路径正确：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',  // 适配鸿蒙PC本地文件加载规则
  server: {
    port: 3000,
    open: false  // 避免鸿蒙PC开发时自动打开浏览器
  }
})
（2）Electron 主进程（main.js）

负责鸿蒙 PC 窗口管理、文件操作、系统通知调用：

const { app, BrowserWindow, ipcMain, dialog, Notification } = require('electron')
const path = require('path')
const fs = require('fs/promises')

// 解决 Electron 14+ 主进程渲染进程通信问题
require('@electron/remote/main').initialize()

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // 适配鸿蒙PC窗口样式与交互逻辑
    titleBarStyle: 'default',
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,  // 鸿蒙PC安全最佳实践
      contextIsolation: true   // 启用上下文隔离
    }
  })

  // 开发环境加载 Vite 服务，生产环境加载本地 HTML（适配鸿蒙PC）
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000')
    mainWindow.webContents.openDevTools()  // 鸿蒙PC开发时打开调试工具
  } else {
    mainWindow.loadFile(path.join(__dirname, 'dist/index.html'))
  }

  // 初始化 @electron/remote（适配鸿蒙PC通信机制）
  require('@electron/remote/main').enable(mainWindow.webContents)
}

// 应用就绪后创建窗口（适配鸿蒙PC启动逻辑）
app.whenReady().then(() => {
  createWindow()

  // 监听渲染进程的文件保存请求（适配鸿蒙PC文件路径）
  ipcMain.handle('save-file', async (event, content) => {
    try {
      // 打开文件保存对话框（适配鸿蒙PC文件选择器）
      const { filePath, canceled } = await dialog.showSaveDialog({
        title: '保存文本文件',
        filters: [{ name: 'Text Files', extensions: ['txt'] }],
        defaultPath: `document_${new Date().getTime()}.txt`,
        // 鸿蒙PC默认保存路径（适配系统文件管理）
        defaultDirectory: process.env.OS === 'HarmonyOS' ? '/home/user/Documents' : undefined
      })

      if (canceled || !filePath) return { success: false, msg: '用户取消保存' }

      // 写入文件（兼容鸿蒙PC文件权限）
      await fs.writeFile(filePath, content, 'utf-8')

      // 鸿蒙PC下发送系统原生通知
      if (process.env.OS === 'OpenHarmony' || process.env.OS === 'HarmonyOS') {
        new Notification({
          title: '保存成功',
          body: `文件已保存至：${filePath}`,
          silent: false  // 适配鸿蒙PC通知音效
        }).show()
      }

      return { success: true, msg: '保存成功', filePath }
    } catch (err) {
      return { success: false, msg: `保存失败：${err.message}` }
    }
  })

  // 监听窗口激活事件（适配鸿蒙PC窗口行为）
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 关闭所有窗口时退出应用（适配鸿蒙PC/Windows/Linux 行为）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
（3）预加载脚本（preload.js）

打通主进程与渲染进程的通信通道（适配鸿蒙 PC 安全策略）：

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

// 向渲染进程暴露安全的 API（符合鸿蒙PC权限规范）
contextBridge.exposeInMainWorld('electronAPI', {
  saveFile: (content) => ipcRenderer.invoke('save-file', content)
})
（4）Vue 渲染进程（src/App.vue）

实现文本编辑 UI，适配鸿蒙 PC 显示与交互：

<template>
  <div class="app-container">
    <header class="app-header">
      <h1>鸿蒙PC-Electron 跨端文本编辑器</h1>
      <button @click="handleSave">保存文件</button>
    </header>
    <textarea 
      v-model="content" 
      class="editor" 
      placeholder="请输入文本内容...（适配鸿蒙PC输入法则）"
    ></textarea>
    <div v-if="message" class="message">{{ message }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')
const message = ref('')

// 调用预加载脚本暴露的 API 保存文件（适配鸿蒙PC通信）
const handleSave = async () => {
  if (!content.value.trim()) {
    message.value = '请输入文本内容后再保存！'
    setTimeout(() => message.value = '', 3000)
    return
  }

  try {
    // @ts-ignore 
    const result = await window.electronAPI.saveFile(content.value)
    message.value = result.msg
  } catch (err) {
    message.value = `错误：${err.message}`
  }

  setTimeout(() => message.value = '', 3000)
}
</script>

<style scoped>
/* 适配鸿蒙PC默认字体与显示比例 */
.app-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'HarmonyOS Sans', sans-serif; /* 鸿蒙PC默认字体 */
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #1890ff;
  color: white;
}

.app-header button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: white;
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
}

.editor {
  flex: 1;
  padding: 16px;
  border: none;
  resize: none;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'HarmonyOS Sans', sans-serif;
}

.message {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(0,0,0,0.7);
  color: white;
  border-radius: 4px;
}
</style>
（5）package.json 配置（适配鸿蒙 PC 打包）

添加脚本命令与鸿蒙 PC 专属构建配置：

{
  "name": "electron-harmony-pc-demo",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "dev:vue": "vite",
    "dev:electron": "electron . --env=development",
    "dev": "concurrently \"npm run dev:vue\" \"npm run dev:electron\"",
    "build:vue": "vite build",
    "build:electron": "electron-builder",
    "build:harmonypc": "npm run build:vue && electron-builder --linux", // 鸿蒙PC专属打包命令
    "build": "npm run build:vue && npm run build:electron"
  },
  "build": {
    "appId": "com.example.electron-harmonypc",
    "productName": "HarmonyPCTextEditor",
    "files": [
      "main.js",
      "preload.js",
      "dist/**/*"
    ],
    "linux": {
      "target": [
        "deb",
        "rpm",
        "AppImage"  // 鸿蒙PC Linux 子系统优先支持格式
      ],
      "category": "Utility",
      "artifactName": "${productName}-${version}-${arch}.${ext}" // 鸿蒙PC包命名规范
    },
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    }
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "electron": "^28.2.0",
    "electron-builder": "^24.9.1",
    "concurrently": "^8.2.2",
    "vite": "^5.0.0",
    "vue": "^3.3.8"
  },
  "dependencies": {
    "@electron/remote": "^2.0.11"
  }
}

3. 鸿蒙 PC 运行与打包

步骤 1：鸿蒙 PC 开发环境运行
  • 安装依赖：npm install；
  • 启动开发服务：npm run dev；
  • 鸿蒙 PC 上会同时启动 Vue 开发服务器和 Electron 窗口，支持实时调试。
步骤 2：打包鸿蒙 PC 专属安装包
  • 构建 Vue 产物：npm run build:vue；
  • 打包鸿蒙 PC 安装包：npm run build:harmonypc；
  • 打包完成后，在 dist 目录下生成鸿蒙 PC 兼容的 AppImage/deb/rpm 格式文件。
步骤 3：鸿蒙 PC 安装与启动
  1. 打开鸿蒙 PC 的 Linux 子系统（设置 → 应用 → Linux 子系统，需提前开启）；
  2. 将安装包传输至鸿蒙 PC 的 Linux 子系统目录；
  3. 执行 chmod +x HarmonyPCTextEditor-1.0.0-x86_64.AppImage 赋予执行权限；
  4. 运行 ./HarmonyPCTextEditor-1.0.0-x86_64.AppImage 启动应用。
步骤 4：鸿蒙 PC 特有功能验证
  • 保存文件后，鸿蒙 PC 会弹出系统原生通知（需在鸿蒙 PC 设置中开启应用通知权限）；
  • 可通过鸿蒙 PC 的 “文件管理”→“Linux 子系统” 目录访问保存的文本文件；
  • 验证文本编辑器的字体、窗口适配鸿蒙 PC 的显示规范。

三、鸿蒙 PC 开发关键注意事项

  1. 鸿蒙 PC 环境依赖：需确保鸿蒙 PC 已升级至正式版，且开启 Linux 子系统（鸿蒙 PC 设置 → 应用 → Linux 子系统）；
  2. 权限适配：鸿蒙 PC 下访问本地文件需在 “系统设置 → 应用权限” 中授予应用 “文件访问”“通知” 权限；
  3. 版本兼容：Electron 建议选择 28+ 版本，避免与鸿蒙 PC Linux 子系统的 Node.js 版本冲突；
  4. 界面适配：鸿蒙 PC 有专属的设计规范，开发时建议使用 HarmonyOS Sans 字体，窗口交互贴合鸿蒙 PC 原生逻辑；
  5. 分布式能力扩展：若需调用鸿蒙 PC 的摄像头、触控屏等硬件，可通过鸿蒙 PC 的 ohos-sdk 与 Electron 主进程通信（需集成鸿蒙原生模块）。

四、总结

鸿蒙 PC 与 Electron 的融合，既保留了 Electron “一次开发、多端运行” 的高效开发体验，又借助鸿蒙 PC 的分布式特性与原生交互优势，拓展了跨端应用的场景边界。本文通过鸿蒙 PC 专属的文本编辑器案例，完整展示了从项目初始化、核心功能适配到鸿蒙 PC 打包运行的全流程，为开发者提供了可直接落地的鸿蒙 PC 跨端开发方案。

未来，随着鸿蒙 PC 生态的完善，Electron 应用在鸿蒙 PC 上的兼容性与功能扩展性将进一步提升，有望成为跨端桌面应用面向鸿蒙 PC 生态的核心开发路径。开发者可基于本文案例，扩展云端同步、多窗口管理等复杂功能，打造更贴合鸿蒙 PC 使用场景的跨端应用。

欢迎加入开源鸿蒙 PC 社区，与更多开发者交流鸿蒙 PC 跨端开发经验：https://harmonypc.csdn.net/

关键点回顾

  1. 鸿蒙 PC 通过 Linux 子系统支持 Electron 应用运行，核心需适配文件路径、权限与原生通知；
  2. 本文案例新增了鸿蒙 PC 专属打包命令、字体适配、文件路径优化等定制化内容；
  3. 开发鸿蒙 PC 跨端应用需注意开启 Linux 子系统、配置对应权限，优先选择 AppImage 格式打包。
# 鸿蒙
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

鸿蒙原生ArkTS布局方式之ColumnCenter垂直排列

avatar 人工智能6S服务平台

VeRL× 昇腾NPU：GRPO 强化训练全链路实战

是字节跳动 Seed 团队发起、社区共同维护的 LLM 强化学习（RL/RLHF）训练框架。是论文的开源实现版本。框架特点：算法侧：支持 GRPO、PPO 等 RL 数据流/训练循环的搭建。工程侧：通过模块化 API 对接既有 LLM infra（如 FSDP、Megatron-LM、vLLM、SGLang 等）。多机多卡资源编排：官方的多机示例采用 Ray 集群方式启动 head/worker。

avatar 人工智能6S服务平台

【鸿蒙NEXT开发】ArkUI实现极简文件管理器

本文介绍了一个基于HarmonyOS NEXT API20+和ArkTS原生语法开发的完整文件管理器项目。项目实现了目录导航、文件多选、增删改操作、多维度排序等核心功能，采用纯原生ArkUI开发，适配最新API20语法规范。 文章重点分析了API20不兼容导致的典型报错（Select组件fontSize属性和Row组件onLongClick事件废弃），并提供了修复方案。通过定义FileItem接口

avatar 人工智能6S服务平台