Electron实操：踏上趣味编程之旅

2023-10-29 20:38:27

2021 年的钟声已经敲响，在工作和生活的洪流中，我们一起见证了 2020 年的逝去。虽然我们的年龄增加了，白发也多了几根，但是我们也在技术领域收获颇丰，不是吗？虽然我们的工资可能没有见涨，但我们对未来的期望却依然饱满，不是吗？

对我们这些打工人来说，学习一直很火的 Electron 是一个不错的选择。它可以让我们的工作和生活更有趣、更便捷。

那么，Electron 是什么？简单来说，Electron 是一个开源框架，允许您使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。这意味着您可以使用熟悉的 Web 技术来创建可在 Windows、macOS 和 Linux 上运行的应用程序。

Electron 实战：初学者指南

本指南旨在帮助您快速入门 Electron，并掌握构建跨平台桌面应用程序的基础知识。我们将从创建一个简单的“Hello World”应用程序开始，然后逐步深入探讨更高级的功能，如创建菜单、添加图标和处理用户输入。

先决条件

在开始之前，您需要确保您的系统中已经安装了以下软件：

Node.js
npm
Electron

安装 Electron

您可以通过以下命令安装 Electron：

npm install -g electron

创建第一个 Electron 应用程序

现在，我们可以创建一个简单的“Hello World”应用程序了。首先，创建一个新的目录并将其命名为“hello-electron”。然后，在该目录中，运行以下命令：

electron init

这将创建一个名为“package.json”的文件和一个名为“main.js”的文件。

package.json 文件

“package.json”文件包含有关您应用程序的信息，例如名称、版本和依赖项。它还指定了应用程序的启动脚本。

{
  "name": "hello-electron",
  "version": "1.0.0",
  "description": "A simple Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^12.0.0"
  }
}

main.js 文件

“main.js”文件是您的应用程序的主脚本。这是应用程序的入口点，也是您编写代码的地方。

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

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

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

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

// Electron 初始化完成时调用此函数。
app.whenReady().then(createWindow)

// 所有窗口都关闭时调用此函数。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户使用 Cmd + Q 显式退出，
  // 否则应用程序和菜单栏仍将处于活动状态。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 在 macOS 上，当单击 dock 图标且没有其他窗口打开时，
// 将重新创建一个窗口。
app.on('activate', () => {
  // 在 macOS 上，当单击 dock 图标且没有其他窗口打开时，
  // 需要重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})