Electron 初体验：踏入桌面应用开发的新征程

2023-10-17 18:31:52

Electron 是一款开源框架，让开发者可以用前端技术构建跨平台的桌面应用。凭借其便捷性和跨平台特性，Electron 备受推崇，成为众多开发者构建桌面应用的首选。

Electron 的工作原理是将一个嵌入式 Chromium 浏览器作为应用的渲染引擎，再将其与 Node.js 集成，共同组成应用程序。这种独特的架构让开发者可以同时利用 HTML、CSS 和 JavaScript，以及 Node.js 的强大功能，实现丰富的桌面应用功能。

准备工作

首先，您需要配置代理来解决可能遇到的网络问题。然后，您可以使用 npm 安装 Electron。

npm install electron

接着，创建一个新的 Electron 项目。

mkdir my-electron-app
cd my-electron-app
electron init

这个命令将在您的项目目录中创建所有必要的文件夹和文件，包括 index.html、main.js 和 package.json。

开始构建

您可以直接加载一个现成的线上应用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

// 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('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 当在macOS中点击Dock图标时并且没有其他窗口打开时重新创建一个窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// package.json
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron",
    "desktop-app",
    "javascript",
    "html",
    "css",
    "node.js",
    "gui",
    "cross-platform",
    "rendering",
    "main-process"
  ],
  "dependencies": {
    "electron": "^19.0.0"
  }
}