#  hmelectronAI-subwindow

**Repository Path**: HMPC2Dtest/hmelectronai-subwindow

## Basic Information

- **Project Name**:  hmelectronAI-subwindow
- **Description**: 鸿蒙开发electron应用 子窗口设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-27
- **Last Updated**: 2026-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HarmonyOS Electron 多窗口应用开发指南

## 项目简介

这是一个基于 HarmonyOS Electron 框架开发的桌面应用示例项目，展示了如何在鸿蒙系统上实现多窗口 Electron 应用，包括启动页、主界面与子窗口。

## 技术架构

- **HarmonyOS Electron 框架**：提供跨平台桌面应用支持
- **HarmonyOS**：华为鸿蒙操作系统
- **Web 技术**：HTML5 + CSS3 + JavaScript
- **双模块设计**：electron 主模块 + web_engine 引擎模块

## 主要功能

- 主窗口界面
- 子窗口弹出功能
- 菜单栏操作
- IPC 进程间通信
- 关于页面

## HarmonyOS Electron 窗口类型

HarmonyOS 的 Electron 窗口分为三种类型，与 Windows 平台有所不同：

| 窗口类型 | 说明 | windowInfo.type | parent |
|---------|------|----------------|--------|
| 主窗 | 应用主窗口 | mainWindow（默认） | 无 |
| 子窗 | 弹出模态对话框等 | subWindow | 主窗引用 |
| 悬浮窗 | 始终在前台显示 | floatWindow | 主窗引用 |

### 窗口特性对比

| 特性 | Windows 窗口 | HarmonyOS 主窗 | HarmonyOS 子窗 | HarmonyOS 悬浮窗 |
|------|-------------|---------------|---------------|-----------------|
| 默认带边框 | 是 | 是 | 是 | 是 |
| 默认可拖拽 | 是 | 是 | 否 | 否 |
| 默认可改变大小 | 是 | 是 | 否 | 否 |
| 默认有三键 | 是 | 是 | 否 | 否 |
| 默认在任务栏显示 | 是 | 是 | 否 | 否 |
| 默认置顶 | 否 | 否 | 否 | 是 |
| 支持透明 | 是 | 否 | 是 | 是 |

## 项目结构

```
ohos_hap347/
├── electron/          # Electron 主应用模块
│   ├── src/main/ets/  # ETS 代码
│   │   ├── entryability/  # 入口能力
│   │   ├── pages/         # 页面
│   │   └── process/       # 进程管理
│   └── build/        # 构建输出
├── web_engine/        # Web 引擎模块
│   ├── src/main/ets/  # ETS 适配器代码
│   │   ├── ability/       # 能力实现
│   │   ├── adapter/       # 平台适配器
│   │   └── components/    # 组件
│   ├── src/main/resources/resfile/resources/app/  # Web 应用资源
│   │   ├── main.js        # Electron 主进程
│   │   ├── index.html     # 主页面
│   │   ├── child.html     # 子窗口页面
│   │   ├── renderer.js    # 渲染进程
│   │   ├── readme.html    # 关于页面
│   │   ├── styles.css     # 主页面样式
│   │   ├── readme.css     # 关于页面样式
│   │   └── package.json   # 应用配置
│   └── build/        # 构建输出
├── AppScope/          # 应用全局配置
│   └── resources/    # 全局资源
├── docs/              # 项目文档
├── hvigor/            # 构建配置
├── oh_modules/        # 依赖模块
├── build-profile.json5 # 构建配置
├── hvigorfile.ts      # 构建脚本
└── oh-package.json5   # 项目配置
```

## 核心代码示例

### 创建 HarmonyOS Electron 子窗口

```javascript
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let win;

const createWindow = () => {
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });
    win.setWindowButtonVisibility(true);
    win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(() => {
    createWindow();
});

ipcMain.on('create-sub-window', (event) => {
    const newWindow = new BrowserWindow({
        windowInfo: {
            // type 的取值是 mainWindow，subWindow，floatWindow
            // 创建常规子窗，同时 parent 应设置为父窗口引用
            type: 'subWindow'
        },
        width: 400,
        height: 300,
        parent: win
    });
    newWindow.loadFile(path.join(__dirname, 'child.html'));
});
```

### 创建悬浮窗

```javascript
ipcMain.on('create-float-window', (event) => {
    const newWindow = new BrowserWindow({
        windowInfo: {
            // 创建悬浮窗，同时 parent 应设置为父窗口引用
            type: 'floatWindow'
        },
        width: 400,
        height: 300,
        parent: win
    });
    newWindow.loadFile(path.join(__dirname, 'float.html'));
});
```

### IPC 通信（渲染进程）

```javascript
const { ipcRenderer } = require('electron');

document.getElementById('openChildWindow').addEventListener('click', () => {
    ipcRenderer.send('create-sub-window');
});

ipcRenderer.invoke('get-app-info').then((appInfo) => {
    console.log('应用信息:', appInfo);
});
```

## 常见问题与解决方案

### 1. main.js 文件出现乱码或奇怪文本

**问题**：main.js 文件被截断或出现奇怪的文本内容。

**解决方案**：
- 使用 Node.js 脚本重新生成 main.js 文件
- 确保文件编码为 UTF-8
- 避免直接复制粘贴大段代码，建议分块写入

参考 `write_correct_mainjs.js` 脚本的实现方式。

### 2. 启动画面一直显示"正在加载"

**问题**：应用启动后，启动画面不关闭。

**解决方案**：
- 检查 `ready-to-show` 事件是否正确触发
- 确保主窗口正确加载 HTML 文件
- 可以添加超时机制作为备选方案

### 3. 点击"打开子窗口"没反应

**问题**：点击按钮后子窗口没有弹出。

**解决方案**：
- 确认 main.js 中正确导入了 `ipcMain`
- 确认有 `createChildWindow()` 函数
- 确认有 `ipcMain.on('open-child', ...)` 处理函数
- 检查渲染进程是否正确发送 IPC 消息
- 打开开发者工具查看控制台错误信息

### 4. 子窗口无法拖拽或改变大小

**问题**：在 HarmonyOS 上，子窗口无法拖拽或改变大小。

**解决方案**：
- 这是 HarmonyOS 子窗口的默认特性，不支持通过边框拖拽改变位置和大小
- 如需拖拽，可以通过添加 `-webkit-app-region: drag` 修饰的区域来实现
- 子窗口和悬浮窗无标题栏，所以无法拖拽

## 开发说明

本项目使用 DevEco Studio 进行开发，遵循 HarmonyOS 应用开发规范。

### 开发环境
- DevEco Studio
- HarmonyOS SDK
- Node.js

### 运行方式
1. 使用 DevEco Studio 打开项目
2. 构建并运行应用
3. 在应用中，通过 File -> About 菜单查看项目信息
4. 点击主页面的"打开子窗口"按钮测试子窗口功能

## 最佳实践

1. **窗口类型选择**：
   - 主窗口：使用默认（不设置 windowInfo.type）
   - 模态对话框：使用 subWindow + parent
   - 始终置顶：使用 floatWindow

2. **IPC 通信**：
   - 使用 `contextBridge` 进行安全通信（生产环境）
   - 开发阶段可以使用 `nodeIntegration: true` 和 `contextIsolation: false`

3. **文件编码**：
   - 所有 JavaScript 文件使用 UTF-8 编码
   - 避免直接在文件中混合中英文注释（可能导致编码问题）

4. **错误处理**：
   - 始终在控制台添加日志输出
   - 使用 try-catch 捕获可能的异常
   - 检查窗口创建是否成功

## 许可证

Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved.

Use of this source code is governed by a BSD-style license.

## 联系方式

如有问题或建议，请联系项目维护者。

---

版本: 1.0.0
© 2024 Harmony PC 开发者社区