Electron-Fetch 项目启动与配置教程

1. 项目目录结构及介绍

Electron-Fetch 项目主要包含以下几个目录和文件：

• src/：源代码目录，包含项目的核心代码。
  • index.js：项目入口文件，用于启动 Electron 应用。
• app/：应用目录，包含应用的业务逻辑和界面代码。
  • index.html：应用的 HTML 主页面。
  • main.js：主进程的 JavaScript 文件，负责创建应用窗口和处理应用的生命周期事件。
  • preload.js：预加载脚本，用于在渲染进程中暴露 Node.js 功能。
• node_modules/：项目依赖的 Node.js 模块。
• package.json：项目配置文件，定义了项目依赖、脚本和元数据。
• main.js：主进程的入口文件，用于创建应用窗口和管理应用的生命周期。
• preload.js：在渲染进程中运行的脚本，用于提供安全性和功能扩展。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。以下是启动文件的简单介绍：

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

function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 并且为你的应用加载index.html
  win.loadFile('app/index.html');

  // 打开开发者工具
  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

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

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

该文件负责创建 Electron 应用程序的主窗口，并在窗口中加载 app/index.html。

3. 项目的配置文件介绍

项目的配置文件是 package.json。以下是配置文件的一些基本介绍：

{
  "name": "electron-fetch",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^11.0.1"
  }
}

在这个配置文件中，我们定义了以下内容：

• name 和 version：项目的名称和版本。
• main：指定了应用的入口文件。
• scripts：定义了启动应用的脚本，使用 npm start 或 yarn start 命令时，会执行 electron .。
• dependencies：指定了项目依赖的 Electron 模块。