怎样构建一个基于 JavaScript 的跨平台桌面应用使用 Electron？-js教程-PHP中文网

怎样构建一个基于 JavaScript 的跨平台桌面应用使用 Electron？

幻影之瞳

发布： 2025-10-03 08:42:02

原创

471人浏览过

使用 Electron 可基于 JavaScript 构建跨平台桌面应用；2. 初始化项目后安装 Electron 并创建主进程文件 main.js 管理窗口；3. 编写 index.html 作为用户界面；4. 配置启动脚本并通过 npm start 运行；5. 使用 electron-builder 打包为各平台可执行文件，完成应用分发。

怎样构建一个基于 javascript 的跨平台桌面应用使用 electron？

构建一个基于 JavaScript 的跨平台桌面应用，Electron 是目前最主流的选择。它允许你使用 HTML、CSS 和 JavaScript 构建可在 Windows、macOS 和 Linux 上运行的桌面程序。下面是如何从零开始搭建一个简单的 Electron 应用。

初始化项目结构

创建一个新的文件夹并进入该目录：

mkdir my-electron-app
cd my-electron-app
npm init -y

这会生成一个基础的 package.json 文件，用于管理依赖和脚本。

安装 Electron

在项目中安装 Electron：

立即学习“Java免费学习笔记（深入）”；

npm install electron --save-dev

建议将 Electron 作为开发依赖安装，因为它只在开发和打包阶段需要。

创建主进程文件

Electron 应用有一个主进程（main process），负责管理窗口和系统事件。创建 main.js：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

这个文件定义了如何启动应用窗口，并加载本地 HTML 页面。

创建用户界面

在项目根目录创建 index.html：

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>我的桌面应用</title>
  </head>
  <body>
    <h1>欢迎使用 Electron 应用！</h1>
  </body>
</html>

你可以像开发网页一样添加 CSS 和 JavaScript 来丰富界面。