Electron Window Manager 使用教程

1. 项目的目录结构及介绍

Electron Window Manager 项目的目录结构如下：

electron-window-manager/
├── src/
│   ├── main/
│   │   ├── main.js
│   │   └── preload.js
│   ├── renderer/
│   │   ├── index.html
│   │   └── renderer.js
│   ├── utils/
│   │   └── electron-api.js
│   └── package.json
├── dist/
├── docs/
├── .gitignore
├── README.md
└── LICENSE

目录结构介绍

• src/: 源代码目录，包含主进程和渲染进程的代码。
  • main/: 主进程代码目录，包含 main.js 和 preload.js。
  • renderer/: 渲染进程代码目录，包含 index.html 和 renderer.js。
  • utils/: 工具函数目录，包含 electron-api.js。
• dist/: 打包后的文件目录。
• docs/: 文档目录。
• .gitignore: Git 忽略文件配置。
• README.md: 项目说明文档。
• LICENSE: 项目许可证。

2. 项目的启动文件介绍

main.js

main.js 是 Electron 应用的主进程启动文件，负责创建窗口和管理应用的生命周期。以下是 main.js 的主要内容：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

preload.js

preload.js 是预加载脚本，在渲染进程加载之前运行，可以用来暴露一些 Node.js 的 API 给渲染进程使用。以下是 preload.js 的主要内容：

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

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  receive: (channel, func) => {
    ipcRenderer.on(channel, (event, ...args) => func(...args));
  }
});

3. 项目的配置文件介绍

package.json

package.json 是 Node.js 项目的配置文件，包含项目的基本信息、依赖项和脚本命令。以下是 package.json 的主要内容：

{
  "name": "electron-window-manager",
  "version": "1.0.0",
  "description": "A Node.js module that handles window management for Electron",
  "main": "src/main/main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "dependencies": {
    "electron": "^10.3.0"
  },
  "devDependencies": {
    "electron-builder": "^22.9.1"
  },
  "author": "Tamkeen TMS",
  "license": "MIT"
}

配置文件介绍

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 主进程入口文件。
• scripts: 脚本命令，如 start 和 build。
• dependencies: 项目依赖项。
• devDependencies: 开发依赖项。
• author: 项目作者