Electron for鸿蒙PC项目之侧边栏组件示例

项目介绍

这是一个基于Electron开发的侧边栏组件示例项目，展示了如何在桌面应用中实现功能完善、样式美观的侧边栏导航。该组件支持折叠/展开、多级菜单、主题切换、响应式设计等丰富功能，适用于各类管理系统和桌面应用的界面开发。

功能特点

可折叠侧边栏：支持点击按钮展开或折叠侧边栏，节省界面空间
多级菜单支持：可展开/收起的分组菜单，适合复杂的导航结构
主题切换：内置深色/浅色主题，用户可自由切换
响应式设计：适配桌面端和移动端不同屏幕尺寸
个性化设置：支持调整侧边栏宽度（窄/中/宽）和位置（左侧/右侧）
用户偏好记忆：记住用户的设置并在下一次启动时恢复
平滑过渡动画：所有交互操作都有流畅的动画效果
键盘导航支持：通过键盘可以快速访问导航项

技术实现

主进程（main.js）

主进程负责创建和管理Electron应用窗口，设置必要的安全选项，并处理应用生命周期事件。

javascript 复制代码

// 关键配置和安全设置
mainWindow = new BrowserWindow({
  width: 1000,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    nodeIntegration: false,       // 禁用Node.js集成
    contextIsolation: true,       // 启用上下文隔离
    enableRemoteModule: false     // 禁用远程模块
  }
});

预加载脚本（preload.js）

使用contextBridge安全地暴露API到渲染进程，遵循Electron的安全最佳实践。

javascript 复制代码

const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // 侧边栏组件主要在渲染进程实现，这里可根据需要添加特定功能API
});

渲染进程（renderer.js）

渲染进程实现了侧边栏的所有交互逻辑，包括菜单展开/折叠、主题切换、宽度调整等功能，并使用localStorage保存用户偏好。

javascript 复制代码

// 侧边栏组件核心功能类
window.SidebarComponent = {
  toggle: toggleSidebar,        // 切换折叠状态
  toggleTheme: toggleDarkTheme, // 切换主题
  setWidth: setSidebarWidth,    // 设置宽度
  setPosition: setSidebarPosition, // 设置位置
  openMobile: openMobileSidebar,   // 打开移动端侧边栏
  closeMobile: closeMobileSidebar  // 关闭移动端侧边栏
};

代码结构

复制代码

85-sidebar-component/
├── main.js           # Electron主进程文件
├── preload.js        # 预加载脚本，处理进程间通信
├── index.html        # 应用主界面HTML
├── style.css         # 样式文件，包含响应式设计和主题
├── renderer.js       # 渲染进程JavaScript，实现交互逻辑
├── package.json      # 项目配置和依赖
└── README.md         # 项目说明文档

核心代码示例

1. 侧边栏折叠/展开功能

javascript 复制代码

function toggleSidebar() {
  sidebar.classList.toggle('collapsed');
  const toggleIcon = toggleButton.querySelector('.toggle-icon');
  if (sidebar.classList.contains('collapsed')) {
    toggleIcon.textContent = '▶';
  } else {
    toggleIcon.textContent = '◀';
  }
  // 保存状态到localStorage
  saveCollapsedState();
}

2. 多级菜单实现

javascript 复制代码

function setupNavGroups() {
  navGroupHeaders.forEach(header => {
    header.addEventListener('click', function(e) {
      e.preventDefault();
      // 切换展开状态
      const parent = this.closest('.nav-group');
      parent.classList.toggle('expanded');
    });
  });
}

3. 主题切换功能

javascript 复制代码

function toggleDarkTheme() {
  document.body.classList.toggle('dark-theme');
  const isDark = document.body.classList.contains('dark-theme');
  
  // 更新按钮图标
  toggleDarkButton.textContent = isDark ? '☀️' : '🌙';
  
  // 保存主题偏好到localStorage
  localStorage.setItem('sidebar-theme', isDark ? 'dark' : 'light');
}

4. 用户偏好加载

javascript 复制代码

function loadUserPreferences() {
  // 加载主题
  const savedTheme = localStorage.getItem('sidebar-theme');
  if (savedTheme === 'dark') {
    document.body.classList.add('dark-theme');
    toggleDarkButton.textContent = '☀️';
  }
  
  // 加载宽度、位置和折叠状态...
}

如何运行

确保已安装Node.js环境
在项目根目录执行以下命令：
bash 复制代码
```
# 安装依赖
npm install

# 启动应用
npm start
```

扩展建议

添加自定义图标：可以使用FontAwesome或Material Icons替代emoji图标
增加国际化支持：为侧边栏文本添加多语言支持
集成搜索功能：在侧边栏顶部添加搜索框，快速定位菜单项
动态加载菜单：从API动态获取菜单结构，支持权限控制
添加拖拽功能：允许用户自定义菜单顺序

注意事项

本项目使用localStorage存储用户偏好，在Electron中需要注意安全问题
侧边栏设计遵循了现代UI设计原则，可根据实际项目需求进行调整
在开发时应遵循Electron安全最佳实践，特别是在处理远程内容时
对于复杂的多级菜单，可能需要进一步优化性能和交互体验
在高分辨率屏幕上，可能需要调整部分样式以获得最佳显示效果

鸿蒙PC适配改造指南

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. 部署应用代码

将Electron应用代码按以下目录结构放置：

plaintext 复制代码

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鸿蒙适配层	禁用硬件加速，使用特定目录结构

鸿蒙开发调试技巧

1. 日志查看

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

2. 常见问题解决

"SysCap不匹配"错误：检查module.json5中的reqSysCapabilities，只保留必要系统能力
"找不到.so文件"错误：确认arm64-v8a目录下四个核心库文件完整
窗口不显示：在main.js中添加app.disableHardwareAcceleration()
动画卡顿：简化CSS动画效果，减少重绘频率