返回

Electron框架 快速入门

前端

电子框架入门：用网络技术打造桌面应用

简介

Electron框架是一个强大的工具，可让你用网络技术（JavaScript、HTML 和 CSS）打造桌面应用。这些应用可打包成可执行文件，并在 macOS、Windows 和 Linux 上无缝运行。本文将指导你快速入门 Electron 框架，并创建一个简单的“你好，世界！”桌面应用。

安装 Electron

安装 Electron 的最简单方法是使用 npm：

npm install -g electron

创建新项目

创建一个新的 Electron 项目：

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

编写主进程文件

主进程文件（通常称为 main.js）负责创建 Electron 应用程序窗口并处理系统事件。在 main.js 中添加以下代码：

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

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

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

// Electron 初始化完成后创建窗口
app.whenReady().then(() => {
  createWindow()
})

编写渲染器进程文件

渲染器进程文件（通常称为 index.html）负责显示用户界面。在 index.html 中添加以下代码：

<!DOCTYPE html>
<html>
<body>
  <h1>你好，世界！</h1>
</body>
</html>

运行应用程序

要在开发模式下运行应用程序，请运行：

electron .

这将在浏览器窗口中显示“你好，世界！”消息。

打包应用程序

要将应用程序打包成可执行文件，请运行：

electron-packager . --platform=darwin --arch=x64 --icon=icon.icns

这将在 dist 目录中创建一个可执行文件。

结论

本文提供了 Electron 框架快速入门的介绍。现在你已经学会了如何创建和打包一个简单的 Electron 桌面应用。你可以探索 Electron 的文档来了解更高级的功能，例如菜单栏、对话框和文件系统访问。