首页
/ Electron Window Manager 使用教程

Electron Window Manager 使用教程

2024-08-16 21:16:21作者:韦蓉瑛

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.jspreload.js
    • renderer/: 渲染进程代码目录,包含 index.htmlrenderer.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: 脚本命令,如 startbuild
  • dependencies: 项目依赖项。
  • devDependencies: 开发依赖项。
  • author: 项目作者
登录后查看全文
热门项目推荐