Electron 资源大全中文版教程

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

awesome-electron/
├── README.md
├── LICENSE
├── CONTRIBUTING.md
├── resources/
│   ├── images/
│   └── docs/
├── scripts/
│   ├── build.js
│   └── test.js
├── src/
│   ├── main/
│   │   ├── index.js
│   │   └── config.js
│   └── renderer/
│       ├── index.html
│       ├── app.js
│       └── styles.css
├── package.json
└── .gitignore

• README.md: 项目介绍和使用说明。
• LICENSE: 项目许可证。
• CONTRIBUTING.md: 贡献指南。
• resources/: 存放项目资源，如图片和文档。
• scripts/: 存放构建和测试脚本。
• src/: 源代码目录。
  • main/: 主进程代码。
    • index.js: 主进程入口文件。
    • config.js: 主进程配置文件。
  • renderer/: 渲染进程代码。
    • index.html: 渲染进程的HTML文件。
    • app.js: 渲染进程的JavaScript文件。
    • styles.css: 渲染进程的样式文件。
• package.json: 项目依赖和脚本配置。
• .gitignore: Git忽略文件配置。

2. 项目的启动文件介绍

主进程启动文件

src/main/index.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')
    }
  });

  mainWindow.loadFile('src/renderer/index.html');
}

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

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

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

渲染进程启动文件

src/renderer/app.js

document.addEventListener('DOMContentLoaded', () => {
  const button = document.createElement('button');
  button.textContent = 'Click Me';
  button.addEventListener('click', () => {
    alert('Button Clicked!');
  });
  document.body.appendChild(button);
});

3. 项目的配置文件介绍

package.json

{
  "name": "awesome-electron",
  "version": "1.0.0",
  "description": "Electron 资源大全中文版",
  "main": "src/main/index.js",
  "scripts": {
    "start": "electron .",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "dependencies": {
    "electron": "^13.1.7"
  },
  "devDependencies": {
    "electron-builder": "^22.11.7"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 主进程入口文件。
• scripts: 脚本命令，如启动、构建和测试。
• dependencies: 项目依赖。
• devDependencies: 开发依赖。

主进程配置文件

src/main/config.js

module.exports = {
  windowOptions: {
    width: 800,
    height: 600
  },
  preloadScript: 'preload.js'
};

以上是基于 awesome-electron 项目的教程，包含了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！<｜end▁of▁sentence｜>