返回

ElectronJS：基于NodeJS构建桌面端应用指南

前端

  1. 安装ElectronJS

  2. 前往ElectronJS官网下载适用于您的操作系统的安装程序。

  3. 运行安装程序并按照提示完成安装。

  4. 安装完成后，您应该可以在终端或命令提示符中运行electron命令。

2. 创建ElectronJS项目

  1. 打开终端或命令提示符，导航到您想要创建项目的位置。
  2. 运行以下命令创建一个新的ElectronJS项目：
npx create-electron-app my-app
  1. 等待项目创建完成。

3. 运行ElectronJS应用程序

  1. 导航到项目的根目录。
  2. 运行以下命令启动ElectronJS应用程序：
npm start
  1. 应用程序将在您的默认浏览器中打开。

4. ElectronJS应用程序结构

ElectronJS应用程序的结构与典型的NodeJS应用程序非常相似。它包含一个package.json文件，其中包含有关应用程序的信息，例如名称、版本和依赖项。它还包含一个main.js文件，这是应用程序的主脚本。

5. 创建一个ElectronJS窗口

要创建一个ElectronJS窗口，您需要使用BrowserWindow类。以下是一个示例：

const { 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('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

6. 打包ElectronJS应用程序

要打包ElectronJS应用程序，您可以使用electron-packager工具。以下是一个示例：

electron-packager . --platform=darwin --arch=x64 --icon=icon.icns --name="My App"

这将创建一个名为“My App.app”的Mac应用程序。

结论

ElectronJS是一个功能强大的框架，可用于构建跨平台桌面应用程序。它易于学习和使用，并且具有丰富的文档和社区支持。如果您正在寻找一种构建桌面应用程序的方法，那么ElectronJS是一个不错的选择。