electron for 鸿蒙PC项目实战案例之记事本应用

本项目展示了如何使用Electron创建一个简单但功能完整的记事本应用。通过学习本示例，开发者可以掌握Electron应用的基本架构、进程间通信、文件操作等核心概念，为开发更复杂的桌面应用奠定基础。同时，本项目也针对鸿蒙PC平台进行了适配，确保在该平台上有良好的使用体验。

言程序plus

327人浏览 · 2025-11-28 16:59:04

言程序plus · 2025-11-28 16:59:04 发布

项目概述

本项目是一个基于Electron框架开发的简单记事本应用，为鸿蒙PC平台提供基础的文本编辑功能。这是Electron初学者入门的理想示例，展示了如何使用Electron创建鸿蒙PC桌面应用程序并实现文件操作功能。
在这里插入图片描述

功能特点

文本编辑：提供简洁的文本编辑界面
文件操作：支持新建、打开和保存文本文件
文件过滤：打开文件时支持按文件类型过滤
快捷键支持：支持常见的Ctrl+N/O/S等操作快捷键
响应式设计：适应不同窗口大小的界面布局
鸿蒙PC适配：针对鸿蒙PC平台优化的用户体验

技术架构

核心架构

主进程 (Main Process)：由main.js实现，负责应用程序生命周期管理和窗口创建
渲染进程 (Renderer Process)：由renderer.js实现，负责UI交互和业务逻辑
预加载脚本 (Preload Script)：由preload.js实现，提供安全的进程间通信桥接

文件结构

01-simple-notepad/
├── main.js         # 主进程文件，应用入口
├── preload.js      # 预加载脚本，进程通信
├── index.html      # 应用界面
├── style.css       # 样式文件
├── renderer.js     # 渲染进程逻辑
└── README.md       # 项目说明文档

鸿蒙适配后结构（需整合到 Electron 鸿蒙项目模板中）：


ohos_hap/
├── electron/
│   ├── libs/
│   │   └── arm64-v8a/  # 鸿蒙核心库文件
│   │       ├── libelectron.so
│   │       ├── libadapter.so
│   │       ├── libffmpeg.so
│   │       └── libc++_shared.so
├── web_engine/
│   └── src/
│       └── main/
│           └── resources/
│               └── resfile/
│                   └── resources/
│                       └── app/  # 放置electron应用代码
│                           ├── main.js
│                           ├── package.json
│                           └── src/
└── module.json5        # 鸿蒙应用配置文件

核心代码解析

主进程 (main.js)

主进程负责创建和管理应用窗口，是Electron应用的入口点：

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

function createWindow() {
  // 创建浏览器窗口并配置安全选项
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  });

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

// 应用生命周期管理
app.whenReady().then(() => {
  createWindow();

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

渲染进程 (renderer.js)

渲染进程实现了记事本的核心功能，包括文件操作和用户交互：

// 文件操作核心功能
function openFile() {
  dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [
      { name: '文本文件', extensions: ['txt', 'js', 'html', 'css'] },
      { name: '所有文件', extensions: ['*'] }
    ]
  }).then(result => {
    // 文件读取和内容显示逻辑
  });
}

function saveFile() {
  const content = document.getElementById('editor').value;
  
  if (currentFilePath) {
    // 保存到现有文件
  } else {
    saveAsFile();
  }
}

// 事件监听和快捷键实现
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey || e.metaKey) {
    switch (e.key) {
      case 'n':
        e.preventDefault();
        newFile();
        break;
      // 其他快捷键处理
    }
  }
});

用户界面 (index.html & style.css)

界面设计简洁直观，采用响应式布局，确保在鸿蒙PC平台上有良好的显示效果：

工具栏：提供常用操作按钮（新建、打开、保存）
编辑器：提供宽敞的文本输入区域
样式优化：使用适合阅读的字体和颜色方案

技术要点

安全最佳实践

上下文隔离：启用contextIsolation: true，防止渲染进程直接访问Node.js API
预加载脚本：通过preload.js安全地暴露API
禁用节点集成：设置nodeIntegration: false，增强应用安全性

文件系统操作

使用Electron的dialog模块实现文件选择对话框
使用Node.js的fs模块进行文件读写操作
实现文件路径跟踪，支持直接保存和另存为功能

跨平台兼容性

考虑不同操作系统的区别（如macOS和Windows的窗口关闭行为）
统一快捷键处理（支持Ctrl和Cmd键）
针对鸿蒙PC平台的适配优化

开发与调试

开发环境设置

克隆项目到本地
安装依赖：npm install
启动开发服务器：npm start

调试技巧

使用Chrome DevTools进行渲染进程调试：Ctrl+Shift+I
主进程调试：在启动时添加--inspect参数
控制台日志：使用console.log()输出调试信息

鸿蒙PC适配改造指南

详细操作指南请看这篇文章：
Electron 鸿蒙pc开发环境搭建完整保姆级教程（window）

1. 环境准备

系统要求：Windows 10/11、8GB RAM以上、20GB可用空间
工具安装：
DevEco Studio 5.0+（安装鸿蒙SDK API 20+）
Node.js 18.x+

2. 获取Electron鸿蒙编译产物

登录Electron 鸿蒙官方仓库
下载Electron 34+版本的Release包（.zip格式）
解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

将应用代码按以下目录结构放置：
在这里插入图片描述


web_engine/src/main/resources/resfile/resources/app/
├── main.js
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

打开项目：在DevEco Studio中打开ohos_hap目录
配置签名：
进入File → Project Structure → Signing Configs
自动生成调试签名或导入已有签名
连接设备：
启用鸿蒙设备开发者模式和USB调试
通过USB Type-C连接电脑
编译运行：点击Run按钮或按Shift+F10

5. 验证检查项

✅ 应用窗口正常显示界面
✅ 窗口大小可调整，响应式布局生效
✅ 控制台无"SysCap不匹配"或"找不到.so文件"错误
✅ 动画效果正常播放

跨平台兼容性

平台	适配策略	特殊处理
Windows	标准Electron运行	无特殊配置
macOS	标准Electron运行	保留dock图标激活逻辑
Linux	标准Electron运行	确保系统依赖库完整
鸿蒙PC	通过Electron鸿蒙适配层	禁用硬件加速，使用特定目录结构