十分钟做出一个 Electron 应用程序

2023-11-18 03:21:51

介绍

Electron 是一个流行的开源框架，允许您使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它可以轻松地访问操作系统本机功能，如文件系统、通知和菜单栏。Electron Forge 是一个工具包，使使用 Electron 创建应用程序变得更加容易，提供了项目初始化、打包和分发等功能。

1. 安装 Electron Forge

首先，需要安装 Electron Forge。打开终端并运行以下命令：

yarn add global electron-forge

2. 创建项目

安装 Electron Forge 后，就可以创建一个新的项目。在终端中导航到要创建项目的目录，然后运行以下命令：

electron-forge init my-electron-project

这将创建一个名为 my-electron-project 的新目录，其中包含 Electron Forge 项目的样板代码。

3. 初始化项目

创建项目后，需要初始化它。这将安装项目所需的依赖项并创建必要的配置文件。在终端中，导航到项目目录并运行以下命令：

electron-forge start

这将初始化项目并启动开发服务器。

4. 添加功能

现在，您可以开始向应用程序添加功能。在项目的 src 目录中，找到 index.js 文件。这是应用程序的主文件，您可以在其中添加代码来创建窗口、加载内容和处理用户交互。

例如，可以添加以下代码来创建一个简单的窗口：

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

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({ width: 800, height: 600 })

  // 加载index.html文件
  win.loadFile('index.html')

  // 当窗口关闭时，退出应用程序
  win.on('closed', () => {
    app.quit()
  })
}

// 当应用程序准备好时，创建窗口
app.whenReady().then(() => {
  createWindow()
})

// 当所有窗口都关闭时，退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

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