Electron for 鸿蒙PC项目实战之拖拽组件示例

项目介绍

这是一个基于Electron开发的拖拽组件示例，展示了如何在Electron应用中实现文件拖拽上传、文件选择以及文件预览功能。该组件适用于需要文件上传功能的桌面应用场景，如文档管理系统、媒体编辑工具等。

功能特点

文件拖拽上传：支持将文件拖拽到指定区域进行上传
点击选择文件：提供按钮点击方式选择文件
多文件支持：允许同时上传多个文件
文件预览：支持预览上传的文件信息
进度显示：上传过程中显示进度信息

技术实现

主进程实现 (main.js)

使用Electron的app和BrowserWindow模块创建应用窗口
配置窗口大小为800x600像素
设置安全策略：禁用Node.js集成，启用上下文隔离
预加载脚本配置，确保渲染进程安全访问Electron API

预加载脚本 (preload.js)

使用contextBridge模块安全地暴露Electron API到渲染进程
目前组件主要在渲染进程实现，暴露空的electronAPI对象

渲染进程实现 (renderer.js)

实现拖拽事件监听：dragover、dragleave、drop
处理文件选择功能：通过input[type="file"]元素实现
文件信息获取与显示：获取文件名、大小、类型等信息
进度条动画效果：模拟文件上传进度
错误处理：处理无效文件和上传失败情况

界面设计 (index.html, style.css)

响应式设计：适配不同屏幕尺寸
拖拽区域视觉反馈：悬停和拖拽时的状态变化
预览区域布局：整洁展示上传文件信息
动画效果：按钮悬停、进度条动画等

代码结构

复制代码

81-drag-drop-component/
├── main.js          # Electron主进程
├── preload.js       # 预加载脚本
├── index.html       # 主界面
├── style.css        # 样式文件
├── renderer.js      # 渲染进程脚本
└── package.json     # 项目配置

核心代码说明

拖拽事件处理

javascript 复制代码

// 拖拽进入区域
const dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.classList.add('drag-over');
});

// 拖拽离开区域
const dropZone.addEventListener('dragleave', () => {
  dropZone.classList.remove('drag-over');
});

// 拖拽释放（上传）
const dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.classList.remove('drag-over');
  
  if (e.dataTransfer.files.length) {
    handleFiles(e.dataTransfer.files);
  }
});

文件处理函数

javascript 复制代码

function handleFiles(files) {
  // 清空预览区域
  previewContainer.innerHTML = '';
  
  Array.from(files).forEach((file, index) => {
    // 创建文件预览元素
    const filePreview = document.createElement('div');
    filePreview.className = 'file-preview';
    
    // 添加文件信息和进度条
    // ...
    
    // 模拟上传进度
    simulateUploadProgress(progressBar, index);
  });
}

如何运行

安装依赖

bash 复制代码

npm install

启动应用

bash 复制代码

npm start

扩展建议

添加文件类型验证和大小限制
实现真实的文件上传功能（与后端API交互）
增加文件删除、重命名等管理功能
添加拖拽排序功能
实现文件上传取消功能

注意事项

本示例为演示用，实际应用中需要添加更多的错误处理和安全验证
文件上传功能在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动画效果，减少重绘频率