Electron for 鸿蒙PC项目开发之模态框组件

这是一个基于Electron开发的模态框组件示例，展示了如何在Electron应用中实现各种类型的模态对话框。该组件适用于需要用户交互确认、信息展示、表单填写等场景的桌面应用，如文件操作确认、设置面板、通知提醒等。

言程序plus

354人浏览 · 2025-12-02 00:38:08

言程序plus · 2025-12-02 00:38:08 发布

项目介绍

这是一个基于Electron开发的模态框组件示例，展示了如何在Electron应用中实现各种类型的模态对话框。该组件适用于需要用户交互确认、信息展示、表单填写等场景的桌面应用，如文件操作确认、设置面板、通知提醒等。
请添加图片描述

功能特点

多种模态框类型：支持默认模态框、大型模态框、小型模态框、确认对话框和消息提示框
灵活的配置：可自定义标题、内容、按钮、尺寸等参数
响应式设计：适配不同屏幕尺寸和窗口大小
动画效果：打开和关闭时的平滑过渡动画
背景遮罩：支持半透明背景遮罩，防止用户与底层内容交互
键盘支持：ESC键可关闭模态框，Enter键可触发默认操作
表单支持：可在模态框中嵌入表单元素进行数据收集

技术实现

主进程实现 (main.js)

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

预加载脚本 (preload.js)

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

渲染进程实现 (renderer.js)

实现ModalManager类，统一管理所有模态框
支持动态创建和销毁模态框
实现模态框的显示和隐藏逻辑
事件处理：点击遮罩关闭、按钮点击、键盘快捷键等
回调函数支持：确认、取消等操作的回调处理

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

模态框基础样式：边框、阴影、圆角等
尺寸变体：默认、大型、小型模态框的不同尺寸
动画效果：淡入淡出、缩放等过渡动画
响应式布局：在不同屏幕尺寸下的自适应表现
按钮样式：主要操作、次要操作、危险操作等

代码结构

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

核心代码说明

ModalManager类

class ModalManager {
  constructor() {
    this.activeModals = [];
    this.initEvents();
  }

  // 初始化全局事件
  initEvents() {
    // ESC键关闭模态框
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.activeModals.length > 0) {
        this.close(this.activeModals[this.activeModals.length - 1]);
      }
    });
  }

  // 打开模态框
  open(modalId, callback) {
    const modal = document.getElementById(modalId);
    if (!modal) return;

    // 添加到活动模态框列表
    this.activeModals.push(modal);
    
    // 显示模态框
    modal.style.display = 'flex';
    
    // 触发动画
    setTimeout(() => {
      modal.classList.add('show');
    }, 10);
    
    // 保存回调函数
    if (callback) {
      modal.dataset.callback = true;
      modal.callback = callback;
    }
  }

  // 关闭模态框
  close(modal) {
    if (!modal) return;

    // 移除动画
    modal.classList.remove('show');
    
    // 隐藏模态框
    setTimeout(() => {
      modal.style.display = 'none';
      
      // 从活动模态框列表中移除
      const index = this.activeModals.indexOf(modal);
      if (index > -1) {
        this.activeModals.splice(index, 1);
      }
    }, 300);
  }
}

创建模态框

function createModal(options) {
  const defaultOptions = {
    id: `modal-${Date.now()}`,
    title: '模态框',
    content: '',
    size: 'default', // default, large, small
    showCancel: true,
    confirmText: '确认',
    cancelText: '取消',
    onConfirm: null,
    onCancel: null
  };

  const settings = { ...defaultOptions, ...options };
  
  // 创建模态框容器
  const modal = document.createElement('div');
  modal.id = settings.id;
  modal.className = `modal modal-${settings.size}`;
  modal.style.display = 'none';
  
  // 设置模态框内容
  modal.innerHTML = `
    <div class="modal-backdrop">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title">${settings.title}</h2>
          <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          ${settings.content}
        </div>
        <div class="modal-footer">
          ${settings.showCancel ? `<button class="modal-cancel">${settings.cancelText}</button>` : ''}
          <button class="modal-confirm">${settings.confirmText}</button>
        </div>
      </div>
    </div>
  `;
  
  // 添加到文档
  document.body.appendChild(modal);
  
  // 绑定事件
  const closeBtn = modal.querySelector('.modal-close');
  const cancelBtn = modal.querySelector('.modal-cancel');
  const confirmBtn = modal.querySelector('.modal-confirm');
  const backdrop = modal.querySelector('.modal-backdrop');
  
  // 关闭按钮事件
  closeBtn.addEventListener('click', () => {
    if (settings.onCancel) {
      settings.onCancel();
    }
    modalManager.close(modal);
  });
  
  // 取消按钮事件
  if (cancelBtn) {
    cancelBtn.addEventListener('click', () => {
      if (settings.onCancel) {
        settings.onCancel();
      }
      modalManager.close(modal);
    });
  }
  
  // 确认按钮事件
  confirmBtn.addEventListener('click', () => {
    if (settings.onConfirm) {
      settings.onConfirm();
    }
    modalManager.close(modal);
  });
  
  // 点击背景关闭
  backdrop.addEventListener('click', (e) => {
    if (e.target === backdrop) {
      if (settings.onCancel) {
        settings.onCancel();
      }
      modalManager.close(modal);
    }
  });
  
  return modal;
}

如何运行

安装依赖

npm install

启动应用

npm start

扩展建议

添加拖拽功能，允许用户拖动模态框
实现可调整大小的模态框
支持模态框堆叠显示
添加表单验证功能
实现自定义动画效果

注意事项

模态框内容过多时要注意滚动问题
确保模态框在不同屏幕尺寸下都能正常显示
避免过度使用模态框，可能会影响用户体验
在实际应用中，考虑添加加载状态和错误处理

鸿蒙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应用代码按以下目录结构放置：
在这里插入图片描述


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