项目概述

便签应用是一个功能丰富的Electron桌面工具，允许用户创建、编辑、组织和管理数字便签。该应用支持多种视图模式、颜色分类、搜索筛选以及数据导入导出功能，为用户提供直观高效的笔记管理体验。
在这里插入图片描述

核心功能

  • 📝 便签管理：创建、编辑、删除和组织便签
  • 🎨 颜色分类：支持多种便签颜色，便于视觉分类
  • 🔍 搜索与筛选：按内容、颜色和日期筛选便签
  • 📋 视图切换：支持网格视图和列表视图
  • 📤 数据导入导出：支持JSON格式的数据备份与恢复
  • ⌨️ 键盘快捷键：丰富的快捷键操作提升效率
  • 🌓 深色模式：支持浅色/深色主题切换
  • 🎯 置顶功能：重要便签可置顶显示

技术架构

主进程 (main.js)

主进程负责应用生命周期管理、窗口创建、数据存储和系统集成。

  • 窗口管理：创建主窗口和浮动便签窗口
  • 数据持久化：使用文件系统保存便签数据
  • 应用菜单：创建应用菜单栏和上下文菜单
  • IPC通信：与渲染进程通信，处理API请求
  • 单实例控制：确保应用只运行一个实例

预加载脚本 (preload.js)

预加载脚本在渲染进程加载前执行，用于安全地暴露Node.js API。

  • 上下文隔离：确保渲染进程安全运行
  • API暴露：通过contextBridge暴露必要的功能接口
  • 权限控制：限制渲染进程对系统资源的访问

渲染进程 (renderer.js)

渲染进程负责用户界面和交互逻辑。

  • UI渲染：展示便签列表和编辑界面
  • 事件处理：响应用户操作和交互
  • 状态管理：维护应用的内部状态
  • 数据过滤：实现搜索、分类等功能
  • 视图管理：处理不同视图模式的切换

文件结构

10-sticky-notes/
├── 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        # 鸿蒙应用配置文件

核心代码解析

便签数据模型

// 便签数据结构
const noteStructure = {
  id: uuidv4(),              // 唯一标识符
  title: '新便签',           // 便签标题
  content: '',               // 便签内容
  color: '#ffeb3b',          // 便签颜色
  createdAt: Date.now(),     // 创建时间
  updatedAt: Date.now(),     // 更新时间
  isPinned: false,           // 是否置顶
  position: { x: 100, y: 100 }, // 浮动窗口位置
  size: { width: 300, height: 300 } // 浮动窗口大小
};

数据持久化

// 保存便签数据到文件
function saveNotesToFile() {
  const notesJson = JSON.stringify(notes, null, 2);
  try {
    fs.writeFileSync(notesFilePath, notesJson);
    return true;
  } catch (error) {
    console.error('保存便签失败:', error);
    return false;
  }
}

// 从文件加载便签数据
function loadNotesFromFile() {
  try {
    if (fs.existsSync(notesFilePath)) {
      const data = fs.readFileSync(notesFilePath, 'utf8');
      return JSON.parse(data);
    }
  } catch (error) {
    console.error('加载便签失败:', error);
  }
  return [];
}

视图切换机制

// 切换视图模式
function switchViewMode(mode) {
  const notesContainer = document.getElementById('notesContainer');
  const gridViewBtn = document.getElementById('gridViewBtn');
  const listViewBtn = document.getElementById('listViewBtn');
  
  if (mode === 'grid') {
    notesContainer.classList.remove('list-view');
    notesContainer.classList.add('grid-view');
    gridViewBtn.classList.add('active');
    listViewBtn.classList.remove('active');
  } else {
    notesContainer.classList.remove('grid-view');
    notesContainer.classList.add('list-view');
    listViewBtn.classList.add('active');
    gridViewBtn.classList.remove('active');
  }
  
  // 更新设置并重新渲染
  appState.viewMode = mode;
  saveSettings();
  renderNotes();
}

搜索与筛选

// 筛选便签
function filterNotes() {
  const searchTerm = document.getElementById('searchInput').value.toLowerCase();
  const selectedColor = document.getElementById('colorFilter').value;
  const dateFilter = document.getElementById('dateFilter').value;
  
  const filtered = notes.filter(note => {
    // 搜索条件
    const matchesSearch = searchTerm === '' || 
                         note.title.toLowerCase().includes(searchTerm) || 
                         note.content.toLowerCase().includes(searchTerm);
    
    // 颜色条件
    const matchesColor = selectedColor === '' || note.color === selectedColor;
    
    // 日期条件
    let matchesDate = true;
    if (dateFilter) {
      const noteDate = new Date(note.createdAt);
      const today = new Date();
      const yesterday = new Date();
      yesterday.setDate(today.getDate() - 1);
      const thisWeek = new Date();
      thisWeek.setDate(today.getDate() - 7);
      
      switch (dateFilter) {
        case 'today':
          matchesDate = noteDate.toDateString() === today.toDateString();
          break;
        case 'yesterday':
          matchesDate = noteDate.toDateString() === yesterday.toDateString();
          break;
        case 'thisWeek':
          matchesDate = noteDate >= thisWeek;
          break;
      }
    }
    
    return matchesSearch && matchesColor && matchesDate;
  });
  
  return filtered;
}

使用指南

  1. 创建便签：点击"新建便签"按钮或使用快捷键 Ctrl+N
  2. 编辑便签：点击便签卡片进入编辑模式
  3. 更改颜色：点击颜色选择器选择便签颜色
  4. 视图切换：点击工具栏的视图按钮切换网格/列表模式
  5. 搜索便签：在搜索框输入关键词搜索内容
  6. 导出数据：点击导出按钮备份便签数据
  7. 浮动便签：点击便签卡片上的浮动按钮创建独立窗口

性能优化

  • 虚拟滚动：大量便签时采用虚拟滚动技术
  • 批量渲染：减少DOM操作次数
  • 缓存机制：缓存搜索结果和常用数据
  • 懒加载：按需加载UI组件
  • 事件委托：使用事件委托优化事件处理

扩展建议

  • 实现云同步功能
  • 添加标签和分类系统
  • 支持富文本编辑
  • 实现提醒功能
  • 添加自动保存和版本历史
  • 支持导入其他笔记应用的格式

开发说明

安装依赖

npm install

运行应用

npm start

构建应用

npm run build

技术栈

  • Electron：跨平台桌面应用框架
  • HTML/CSS/JavaScript：前端开发技术
  • Node.js：后端功能支持
  • UUID：生成唯一标识符
  • IPC：进程间通信

鸿蒙PC适配改造指南

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

1. 环境准备

  • 系统要求：Windows 10/11、8GB RAM以上、20GB可用空间

  • 工具安装：
    DevEco Studio 5.0+（安装鸿蒙SDK API 20+）

  • Node.js 18.x+

2. 获取Electron鸿蒙编译产物

  1. 登录Electron 鸿蒙官方仓库

  2. 下载Electron 34+版本的Release包（.zip格式）

  3. 解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

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


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

4. 配置与运行

  1. 打开项目：在DevEco Studio中打开ohos_hap目录

  2. 配置签名：
    进入File → Project Structure → Signing Configs

  3. 自动生成调试签名或导入已有签名

  4. 连接设备：
    启用鸿蒙设备开发者模式和USB调试

  5. 通过USB Type-C连接电脑

  6. 编译运行：点击Run按钮或按Shift+F10

跨平台兼容性

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

鸿蒙开发调试技巧

1. 日志查看

在DevEco Studio的Log面板中过滤"Electron"关键词，查看应用运行日志和错误信息。

2. 常见问题解决

  • "SysCap不匹配"错误：检查module.json5中的reqSysCapabilities，只保留必要系统能力

  • "找不到.so文件"错误：确认arm64-v8a目录下四个核心库文件完整

  • 窗口不显示：在main.js中添加app.disableHardwareAcceleration()

  • 动画卡顿：简化CSS动画效果，减少重绘频率

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

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

更多推荐

cover

Electron for 鸿蒙PC项目实战案例之剪贴板管理器应用

avatar 人工智能6S服务平台
cover

小白3天精通跨平台React Native鸿蒙开发：解决Button不能自定义样式的问题（使用TouchableOpacity组件)

avatar 人工智能6S服务平台
cover

KMP 实现鸿蒙跨端：Kotlin 集合操作和数据处理指南

avatar 人工智能6S服务平台