如何使用 Electron 来实现一个功能强大的 iPic

前端

2023-12-24 08:46:17

前言

iPic 是一款十分出色的应用程序，它能够快速将图片上传到图床上，但由于免费会员只能使用新浪图床，且新浪图床又存在防盗链和图片有效期的问题，因此，为了解决这些问题，我们决定自己实现一个图片快速上传的应用程序。

在对比了 Flutter Desktop、PyQT 和 Electron 等框架后，我们最终决定使用 Electron 来实现我们的应用程序。这是因为 Electron 具有以下几个优点：

跨平台： Electron 允许您使用相同的代码库来构建 Windows、Mac 和 Linux 操作系统的应用程序。
易于使用： Electron 基于 Node.js 和 Chromium，因此它非常易于使用，即使您是前端开发的新手。
功能强大： Electron 提供了丰富的 API，您可以使用这些 API 来访问系统资源、创建自定义窗口、菜单和对话框，以及与其他应用程序进行通信。

准备工作

在开始使用 Electron 开发 iPic 应用程序之前，您需要确保您的计算机上已经安装了以下软件：

Node.js： Electron 是基于 Node.js 构建的，因此您需要在计算机上安装 Node.js。您可以从 Node.js 官网下载并安装 Node.js。
Electron： 您需要从 Electron 官网下载并安装 Electron。
文本编辑器： 您需要使用文本编辑器来编写 Electron 应用程序的代码。您可以使用任何您喜欢的文本编辑器，例如 Visual Studio Code、Sublime Text 或 Atom。

创建 Electron 项目

打开您喜欢的文本编辑器，创建一个新的项目文件夹。
在项目文件夹中创建一个名为 package.json 的文件，并输入以下内容：

{
  "name": "ipic",
  "version": "1.0.0",
  "description": "A simple image uploader for iPic.",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^13.6.6"
  }
}

在项目文件夹中创建一个名为 main.js 的文件，并输入以下内容：

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

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

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

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

// 当Electron初始化完成时，创建浏览器窗口
app.whenReady().then(() => {
  createWindow()

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

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

在项目文件夹中创建一个名为 index.html 的文件，并输入以下内容：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>iPic</h1>
  <form>
    <input type="file" multiple>
    <input type="submit" value="Upload">
  </form>
</body>
</html>

在项目文件夹中创建一个名为 style.css 的文件，并输入以下内容：

body {
  font-family: sans-serif;
}

h1 {
  font-size: 24px;
}

form {
  margin: 20px 0;
}

input[type="file"] {
  width: 200px;
}

input[type="submit"] {
  margin-left: 10px;
  width: 100px;
}