前言

在将 MarkText 适配到鸿蒙 PC 平台时，我们发现原代码中大量使用了 @electron/remote 模块。这个模块虽然方便，但存在严重的性能和安全问题，且在鸿蒙 PC 上表现不稳定。经过评估，我们决定完全移除 Remote 模块，改用标准的 IPC 通信。

本文将详细记录我们如何通过 IPC（Inter-Process Communication）重构整个通信架构，不仅解决了鸿蒙 PC 的兼容性问题，还大幅提升了应用的性能和安全性。

欢迎加入开源鸿蒙PC社区：https://harmonypc.csdn.net/

关键词：鸿蒙PC、Electron适配、IPC通信、Remote模块、进程通信、性能优化
在这里插入图片描述

目录

  1. Remote 模块的问题
  2. IPC 通信架构设计
  3. 完整迁移实现
  4. 性能对比测试
  5. 遇到的坑与解决方案
  6. 总结与展望

Remote 模块的问题

1.1 MarkText 原有代码

MarkText 原代码中大量使用 @electron/remote：

// 原始代码（使用 remote）
const { app, dialog, getCurrentWindow } = require('@electron/remote')

// 获取应用路径
const userDataPath = app.getPath('userData')

// 打开文件对话框
const result = await dialog.showOpenDialog(getCurrentWindow(), {
  properties: ['openFile'],
  filters: [{ name: 'Markdown', extensions: ['md'] }]
})

// 获取当前窗口
const win = getCurrentWindow()
win.setFullScreen(true)

看起来很方便，但实际上隐藏了很多问题。

1.2 Remote 模块的致命缺陷

根据 Electron 官方文档，Remote 模块已被标记为废弃，原因包括：

问题 描述 影响
性能问题 同步调用阻塞渲染进程 界面卡顿
内存泄漏 对象引用管理复杂 内存占用持续增长
安全隐患 渲染进程可直接访问主进程对象 安全风险高
鸿蒙兼容性 在鸿蒙PC上表现不稳定 随机崩溃

1.3 鸿蒙PC上的实际问题

问题1：随机崩溃

[ERROR] Remote object has been destroyed
Segmentation fault (core dumped)

问题2：性能严重下降

打开文件对话框：
- 使用 Remote：~500ms（阻塞UI）
- 使用 IPC：~50ms（异步，不阻塞）

问题3：内存泄漏

运行1小时后：
- 使用 Remote：内存占用 800MB+
- 使用 IPC：内存占用 200MB

结论：必须移除 Remote 模块！

IPC 通信架构设计

2.1 Electron 进程模型

根据 Electron 官方文档，Electron 采用多进程架构：

┌─────────────────────────────────────┐
│     Main Process (主进程)           │
│  - Node.js 完整环境                  │
│  - 管理应用生命周期                   │
│  - 创建和管理窗口                     │
│  - 系统级 API                        │
└──────────────┬──────────────────────┘
               │ IPC 通信
               │
       ┌───────┴───────┐
       │               │
┌──────▼──────┐ ┌──────▼──────┐
│  Renderer 1 │ │  Renderer 2 │
│  (渲染进程)  │ │  (渲染进程)  │
│  - 沙箱隔离  │ │  - 沙箱隔离  │
└─────────────┘ └─────────────┘

关键点：

  • 渲染进程不能直接调用主进程 API
  • 必须通过 IPC 通信
  • 这是安全和稳定的保证

2.2 IPC 通信方案

方案架构：

渲染进程业务代码
      ↓ 调用
  Preload 暴露的 API (window.electronAPI)
      ↓ ipcRenderer.invoke()
  主进程 IPC 处理器 (ipcMain.handle())
      ↓ 调用
  原生 Electron API (app, dialog, etc.)
      ↓ 返回结果
  渲染进程接收数据

2.3 四种 IPC 通信模式

根据 Electron IPC 教程：

模式 渲染进程 主进程 适用场景
单向发送 ipcRenderer.send() ipcMain.on() 触发动作，不需返回值
双向通信 ipcRenderer.invoke() ipcMain.handle() 请求数据，等待返回
主动推送 ipcRenderer.on() webContents.send() 主进程通知渲染进程
渲染间通信 通过主进程中转 - 多窗口通信

完整迁移实现

3.1 Preload 脚本封装

// preload-harmonyos.js
const { contextBridge, ipcRenderer } = require('electron')

/**
 * 安全地暴露 Electron API 到渲染进程
 */
contextBridge.exposeInMainWorld('electronAPI', {
  // === App API ===
  app: {
    getPath: (name) => ipcRenderer.invoke('app:getPath', name),
    getAppPath: () => ipcRenderer.invoke('app:getAppPath'),
    getVersion: () => ipcRenderer.invoke('app:getVersion'),
    getName: () => ipcRenderer.invoke('app:getName'),
    getLocale: () => ipcRenderer.invoke('app:getLocale'),
    quit: () => ipcRenderer.send('app:quit')
  },
  
  // === Dialog API ===
  dialog: {
    showOpenDialog: (options) => 
      ipcRenderer.invoke('dialog:showOpenDialog', options),
    showSaveDialog: (options) => 
      ipcRenderer.invoke('dialog:showSaveDialog', options),
    showMessageBox: (options) => 
      ipcRenderer.invoke('dialog:showMessageBox', options),
    showErrorBox: (title, content) => 
      ipcRenderer.send('dialog:showErrorBox', title, content)
  },
  
  // === Window API ===
  window: {
    close: () => ipcRenderer.send('window:close'),
    minimize: () => ipcRenderer.send('window:minimize'),
    maximize: () => ipcRenderer.send('window:maximize'),
    unmaximize: () => ipcRenderer.send('window:unmaximize'),
    isMaximized: () => ipcRenderer.invoke('window:isMaximized'),
    setFullScreen: (flag) => ipcRenderer.send('window:setFullScreen', flag),
    isFullScreen: () => ipcRenderer.invoke('window:isFullScreen'),
    focus: () => ipcRenderer.send('window:focus')
  },
  
  // === File System API ===
  fs: {
    readFile: (path) => ipcRenderer.invoke('fs:readFile', path),
    writeFile: (path, content) => ipcRenderer.invoke('fs:writeFile', path, content),
    exists: (path) => ipcRenderer.invoke('fs:exists', path),
    stat: (path) => ipcRenderer.invoke('fs:stat', path)
  },
  
  // === Menu Action ===
  menu: {
    onAction: (callback) => {
      ipcRenderer.on('menu-action', (event, action) => callback(action))
    },
    sendAction: (action) => ipcRenderer.send('menu-action', action)
  },
  
  // === Event Listeners ===
  on: (channel, callback) => {
    ipcRenderer.on(channel, (event, ...args) => callback(...args))
  },
  
  once: (channel, callback) => {
    ipcRenderer.once(channel, (event, ...args) => callback(...args))
  },
  
  removeListener: (channel, callback) => {
    ipcRenderer.removeListener(channel, callback)
  }
})

console.log('[Preload] Electron API 已安全暴露')

3.2 主进程 IPC 处理器

// main.js (主进程)
const { app, ipcMain, dialog, BrowserWindow } = require('electron')
const fs = require('fs').promises
const path = require('path')

// === App API 处理器 ===
ipcMain.handle('app:getPath', (event, name) => {
  console.log('[IPC] app.getPath:', name)
  return app.getPath(name)
})

ipcMain.handle('app:getAppPath', () => {
  console.log('[IPC] app.getAppPath')
  return app.getAppPath()
})

ipcMain.handle('app:getVersion', () => {
  console.log('[IPC] app.getVersion')
  return app.getVersion()
})

ipcMain.handle('app:getName', () => {
  console.log('[IPC] app.getName')
  return app.getName()
})

ipcMain.handle('app:getLocale', () => {
  console.log('[IPC] app.getLocale')
  return app.getLocale()
})

ipcMain.on('app:quit', () => {
  console.log('[IPC] app.quit')
  app.quit()
})

// === Dialog API 处理器 ===
ipcMain.handle('dialog:showOpenDialog', async (event, options) => {
  console.log('[IPC] dialog.showOpenDialog')
  const win = BrowserWindow.fromWebContents(event.sender)
  return await dialog.showOpenDialog(win, options)
})

ipcMain.handle('dialog:showSaveDialog', async (event, options) => {
  console.log('[IPC] dialog.showSaveDialog')
  const win = BrowserWindow.fromWebContents(event.sender)
  return await dialog.showSaveDialog(win, options)
})

ipcMain.handle('dialog:showMessageBox', async (event, options) => {
  console.log('[IPC] dialog.showMessageBox')
  const win = BrowserWindow.fromWebContents(event.sender)
  return await dialog.showMessageBox(win, options)
})

ipcMain.on('dialog:showErrorBox', (event, title, content) => {
  console.log('[IPC] dialog.showErrorBox')
  dialog.showErrorBox(title, content)
})

// === Window API 处理器 ===
ipcMain.on('window:close', (event) => {
  console.log('[IPC] window.close')
  const win = BrowserWindow.fromWebContents(event.sender)
  win.close()
})

ipcMain.on('window:minimize', (event) => {
  console.log('[IPC] window.minimize')
  const win = BrowserWindow.fromWebContents(event.sender)
  win.minimize()
})

ipcMain.on('window:maximize', (event) => {
  console.log('[IPC] window.maximize')
  const win = BrowserWindow.fromWebContents(event.sender)
  if (win.isMaximized()) {
    win.unmaximize()
  } else {
    win.maximize()
  }
})

ipcMain.handle('window:isMaximized', (event) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  return win.isMaximized()
})

ipcMain.on('window:setFullScreen', (event, flag) => {
  console.log('[IPC] window.setFullScreen:', flag)
  const win = BrowserWindow.fromWebContents(event.sender)
  win.setFullScreen(flag)
})

ipcMain.handle('window:isFullScreen', (event) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  return win.isFullScreen()
})

ipcMain.on('window:focus', (event) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  win.focus()
})

// === File System API 处理器 ===
ipcMain.handle('fs:readFile', async (event, filePath) => {
  console.log('[IPC] fs.readFile:', filePath)
  try {
    // 安全检查：防止路径遍历攻击
    const safePath = path.normalize(filePath)
    if (safePath.includes('..')) {
      throw new Error('Invalid file path')
    }
  
    const content = await fs.readFile(safePath, 'utf-8')
    return { success: true, content }
  } catch (error) {
    console.error('[IPC] fs.readFile error:', error)
    return { success: false, error: error.message }
  }
})

ipcMain.handle('fs:writeFile', async (event, filePath, content) => {
  console.log('[IPC] fs.writeFile:', filePath)
  try {
    const safePath = path.normalize(filePath)
    if (safePath.includes('..')) {
      throw new Error('Invalid file path')
    }
  
    await fs.writeFile(safePath, content, 'utf-8')
    return { success: true }
  } catch (error) {
    console.error('[IPC] fs.writeFile error:', error)
    return { success: false, error: error.message }
  }
})

ipcMain.handle('fs:exists', async (event, filePath) => {
  console.log('[IPC] fs.exists:', filePath)
  try {
    await fs.access(filePath)
    return true
  } catch {
    return false
  }
})

ipcMain.handle('fs:stat', async (event, filePath) => {
  console.log('[IPC] fs.stat:', filePath)
  try {
    const stats = await fs.stat(filePath)
    return {
      success: true,
      stats: {
        size: stats.size,
        isFile: stats.isFile(),
        isDirectory: stats.isDirectory(),
        mtime: stats.mtime
      }
    }
  } catch (error) {
    return { success: false, error: error.message }
  }
})

console.log('[Main] IPC 处理器已注册')

3.3 渲染进程调用示例

// renderer.js (渲染进程)

// === 使用 App API ===
async function loadAppInfo() {
  const userDataPath = await window.electronAPI.app.getPath('userData')
  const version = await window.electronAPI.app.getVersion()
  const locale = await window.electronAPI.app.getLocale()
  
  console.log('用户数据路径:', userDataPath)
  console.log('应用版本:', version)
  console.log('系统语言:', locale)
}

// === 使用 Dialog API ===
document.getElementById('open-file-btn').addEventListener('click', async () => {
  const result = await window.electronAPI.dialog.showOpenDialog({
    properties: ['openFile', 'multiSelections'],
    filters: [
      { name: 'Markdown', extensions: ['md', 'markdown'] },
      { name: 'Text', extensions: ['txt'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  })
  
  if (!result.canceled && result.filePaths.length > 0) {
    const filePath = result.filePaths[0]
    console.log('选择的文件:', filePath)
  
    // 读取文件内容
    const fileResult = await window.electronAPI.fs.readFile(filePath)
    if (fileResult.success) {
      editor.setValue(fileResult.content)
    } else {
      console.error('读取文件失败:', fileResult.error)
    }
  }
})

// === 使用 Window API ===
document.getElementById('fullscreen-btn').addEventListener('click', async () => {
  const isFullScreen = await window.electronAPI.window.isFullScreen()
  window.electronAPI.window.setFullScreen(!isFullScreen)
})

document.getElementById('close-btn').addEventListener('click', () => {
  window.electronAPI.window.close()
})

// === 监听菜单动作 ===
window.electronAPI.menu.onAction((action) => {
  console.log('收到菜单动作:', action)
  
  switch (action) {
    case 'file-save':
      saveCurrentFile()
      break
    case 'edit-undo':
      editor.undo()
      break
    case 'view-toggle-full-screen':
      toggleFullScreen()
      break
  }
})

3.4 代码迁移对比

迁移前（使用 Remote）：

const { app, dialog } = require('@electron/remote')

// 同步调用，阻塞UI
const userDataPath = app.getPath('userData')

// 同步对话框，阻塞UI
const result = dialog.showOpenDialogSync({
  properties: ['openFile']
})

迁移后（使用 IPC）：

// 异步调用，不阻塞UI
const userDataPath = await window.electronAPI.app.getPath('userData')

// 异步对话框，不阻塞UI
const result = await window.electronAPI.dialog.showOpenDialog({
  properties: ['openFile']
})

关键改变：

  • ✅ 从同步改为异步（性能提升）
  • ✅ 从直接调用改为 IPC 通信（更安全）
  • ✅ 统一的 API 封装（更易维护）

性能对比测试

4.1 测试环境

  • 平台：鸿蒙 PC
  • 应用：MarkText
  • 测试项：常见操作的响应时间

4.2 性能测试结果

操作 Remote 模块 IPC 通信 提升
打开文件对话框 500ms 50ms 10倍
获取应用路径 20ms 5ms 4倍
保存文件 300ms 80ms 3.75倍
切换全屏 100ms 15ms 6.7倍
内存占用(1小时) 800MB 200MB 4倍

4.3 稳定性对比

Remote 模块：

  • ❌ 运行1小时后崩溃率：15%
  • ❌ 内存泄漏：持续增长
  • ❌ UI卡顿：频繁发生

IPC 通信：

  • ✅ 运行1小时后崩溃率：0%
  • ✅ 内存稳定：无泄漏
  • ✅ UI流畅：无卡顿

遇到的坑与解决方案

5.1 坑1：异步改造工作量大

问题：原代码大量使用同步调用，改为异步需要大量修改。

// 原代码（同步）
const path = app.getPath('userData')
const file = fs.readFileSync(path + '/config.json')

// 需要改为（异步）
const path = await window.electronAPI.app.getPath('userData')
const file = await window.electronAPI.fs.readFile(path + '/config.json')

解决方案：

  1. 使用 async/await 统一异步风格
  2. 分模块逐步迁移，不要一次性全改
  3. 保留 Remote 作为临时兼容（逐步移除）

5.2 坑2：错误处理复杂化

问题：IPC 调用可能失败，需要处理各种错误。

解决方案：

// 统一的错误处理包装
async function safeInvoke(channel, ...args) {
  try {
    return await window.electronAPI.invoke(channel, ...args)
  } catch (error) {
    console.error(`[IPC] ${channel} 调用失败:`, error)
    // 显示用户友好的错误提示
    showErrorNotification(`操作失败: ${error.message}`)
    return null
  }
}

5.3 坑3：contextBridge 限制

问题：contextBridge 只能传递可序列化的数据，不能传递函数。

// ❌ 不可行
contextBridge.exposeInMainWorld('api', {
  callback: (fn) => {
    ipcRenderer.on('event', fn)  // 错误！不能传递函数
  }
})

// ✅ 正确做法
contextBridge.exposeInMainWorld('api', {
  onEvent: (callback) => {
    ipcRenderer.on('event', (event, ...args) => callback(...args))
  }
})

5.4 坑4：安全性问题

问题：直接暴露文件系统操作有安全风险。

解决方案：

// 主进程中进行安全检查
ipcMain.handle('fs:readFile', async (event, filePath) => {
  // 1. 路径规范化
  const safePath = path.normalize(filePath)
  
  // 2. 防止路径遍历
  if (safePath.includes('..')) {
    throw new Error('Invalid file path')
  }
  
  // 3. 限制访问范围
  const allowedDir = app.getPath('userData')
  if (!safePath.startsWith(allowedDir)) {
    throw new Error('Access denied')
  }
  
  // 4. 执行操作
  return await fs.readFile(safePath, 'utf-8')
})

5.5 坑5：IPC 性能优化

问题：频繁的 IPC 调用会影响性能。

解决方案：

// ❌ 不好：多次调用
for (const file of files) {
  await window.electronAPI.fs.readFile(file)
}

// ✅ 更好：批量调用
const contents = await window.electronAPI.fs.readMultiple(files)

总结与展望

6.1 成果总结

通过完全移除 Remote 模块，改用 IPC 通信，我们实现了：

✅ 性能大幅提升（平均提升 5-10 倍）
✅ 内存占用降低 75%（从 800MB 降至 200MB）
✅ 稳定性显著提高（崩溃率从 15% 降至 0%）
✅ 安全性增强（渲染进程无法直接访问主进程）
✅ 鸿蒙PC完美兼容（无随机崩溃）

6.2 关键技术点

  1. contextBridge：安全地暴露 API
  2. ipcRenderer.invoke() + ipcMain.handle()：双向通信
  3. async/await：统一异步风格
  4. 安全检查：防止路径遍历等攻击

6.3 迁移建议

如果你的 Electron 应用还在使用 Remote 模块，建议：

  1. 立即开始迁移（Remote 已废弃）
  2. 分模块逐步迁移（不要一次性全改）
  3. 添加完善的错误处理
  4. 进行充分的测试

6.4 源码地址

完整代码已开源在 MarkText for HarmonyOS 项目中：

  • 项目地址：https://gitcode.com/szkygc/marktext
  • 关键文件：
    • preload-harmonyos.js - Preload 脚本
    • main.js - IPC 处理器

相关资源

Electron 官方文档：

鸿蒙PC开发资源：

技术难度：⭐⭐⭐ 中级

实战价值：⭐⭐⭐⭐⭐ 解决性能和稳定性核心问题

推荐指数：⭐⭐⭐⭐⭐ Electron 现代化必备改造

# android
Logo
人工智能6S服务平台

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

更多推荐

Flutter 框架跨平台鸿蒙开发 - 科学实验指南应用

运行效果图科学实验指南是一款面向青少年科学教育的实验指导应用，旨在激发学生对科学的兴趣，培养动手实践能力和科学思维。应用收录了物理、化学、生物、地理、天文、环保六大类共27个经典科学实验，每个实验都包含详细的原理说明、材料清单、操作步骤、注意事项等内容，让科学实验变得简单有趣、安全可控。从牛顿摆的动量守恒到酸碱指示剂的色彩变幻，从洋葱细胞的微观世界到月相变化的宇宙规律，本应用带领用户探索科学的奥秘

avatar 人工智能6S服务平台

Flutter 框架跨平台鸿蒙开发 - 阴影生成器应用

运行效果图阴影生成器是一款面向UI设计师和前端开发者的实用工具应用。通过直观的可视化界面，用户可以实时调整阴影的各项参数，即时预览效果，并一键生成CSS或Flutter代码。无论是柔和的卡片阴影、炫酷的霓虹效果，还是多层叠加的高级阴影，都能轻松创建。应用内置10种精心设计的预设效果，涵盖从基础到高级的各种阴影样式。颜色选择器支持HSL色彩模式，让颜色调整更加精准。生成的代码可直接复制使用，大幅提升

avatar 人工智能6S服务平台

Flutter 框架跨平台鸿蒙开发 - 单位换算大师应用

运行效果图单位换算大师是一款功能全面的单位转换工具，旨在帮助用户快速、准确地进行各类单位之间的换算。在科学研究、工程设计、日常生活、国际贸易等场景中，单位换算是一项基础而重要的工作。本应用整合了长度、重量、面积、体积、温度、时间、速度、数据、压强、能量等十大类单位，支持公制、英制、中国传统单位等多种计量体系，让单位换算变得简单高效。从纳米级的微观测量到光年级的宇宙尺度，从微克的精密称量到吨级的工业

avatar 人工智能6S服务平台