特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

使用 Electron.js 的跨平台桌面应用程序：从0到专家

来源：互联网收集：自由互联发布时间：2023-09-03

介绍 Electron.js 是一个免费的开源框架，使开发人员能够使用 HTML、CSS 和 JavaScript 等 Web 技术创建跨平台桌面应用程序。它是创建在 Windows、macOS 和 Linux 上运行的具有原生外观的桌面应用

介绍

Electron.js 是一个免费的开源框架，使开发人员能够使用 HTML、CSS 和 JavaScript 等 Web 技术创建跨平台桌面应用程序。它是创建在 Windows、macOS 和 Linux 上运行的具有原生外观的桌面应用程序的完美工具。在本文中，我们将介绍什么是 Electron.js、使用它的技巧、我们为什么需要它，以及帮助您启动并运行您的第一个 Electron.js 应用程序的快速入门指南。

Electron.js什么？

Electron.js 是一个框架，它结合了 Web 技术的强大功能和访问本机系统 API 的能力，使创建在多个平台上运行的具有本机外观的桌面应用程序成为可能。借助 Electron.js，开发人员可以创建具有现代用户界面、快速性能并支持系统级 API 的应用程序。这使开发人员能够构建易于使用且功能强大的高质量桌面应用程序。

为什么是Electron.js？

我们需要 Electron.js 有几个原因：

跨平台兼容性：Electron.js 允许开发人员使用单一代码库创建可在多个平台（例如 Windows、macOS 和 Linux）上运行的应用程序。
本机性能：Electron.js 应用程序在桌面上本机运行，这意味着它们可以快速响应，即使在低端硬件上也是如此。
访问系统级 API：Electron.js 为开发人员提供了访问系统级 API 的权限，例如文件系统和系统托盘，这是 Web 应用程序无法访问的。

跨平台支持

Electron.js 的最大优势之一是它的跨平台支持。使用 Electron.js，您可以构建在 Windows、macOS 和 Linux 上运行的桌面应用程序，让您的用户可以灵活地在他们选择的任何平台上使用您的应用程序。此外，Electron.js 为开发人员提供了许多用于构建跨平台应用程序的工具和库，使构建在每个平台上看起来和感觉都很棒的应用程序变得容易。

在底层，Electron.js 使用Chromium作为其渲染引擎，使用 Node.js 作为其 JavaScript 运行时。这允许开发人员在他们的 Electron.js 应用程序中使用 Node.js 库和模块，为构建桌面应用程序提供丰富而强大的环境。

快速入门指南

既然您知道 Electron.js 是什么以及我们为什么需要它，让我们开始使用快速入门指南来帮助您创建您的第一个 Electron.js 应用程序。

我的示例使用了 React.js，但您可以随意使用任何您想要的框架或库。

依赖关系

node.js

安装 Electron.js 和一些帮助包

要开始，您需要在您的系统上安装 Electron.js。您可以通过在终端中运行以下命令来执行此操作：

npm install -D concurrently cross-env electron electron-builder electronmon wait-on

concurrently - 同时运行多个命令

cross-env — 运行跨平台设置和使用环境变量的脚本

electron-builder — 一个完整的解决方案，用于为 MacOS、Windows 和 Linux 打包和构建准备好分发的 Electron 应用程序，并提供开箱即用的“自动更新”支持

electronmon — 以简单的方式观看和重新加载您的Electron应用程序

wait-on — 一个跨平台命令行实用程序和 Node.js API，它将等待文件、端口、套接字和 http(s) 资源变为可用

创建一个新项目

如果您还没有任何项目，请创建一个新文件夹并cd到该文件夹，然后初始化一个以将package.json添加到您的文件夹。

npm init -y

添加到你的package.json ' main' 和 'homepage' 这样 electron 就可以从那里开始

在你的package.json中添加一个脚本来运行你的应用程序服务器，等待它准备好并运行Electron环境，如下所示：

"electron:start": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://127.0.0.1:3000 && electronmon .\""

这就是你的package.json现在应该寻找的方式

{
  "name": "electron-react",
  "version": "1.1.0",
  "private": true,
  "author": "Ben Mishali",
  "description": "My Electron app",
  "main": "public/electron.js",
  "homepage": "./",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "electron-is-dev": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "prebuild": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron:start": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://127.0.0.1:3000 && electronmon .\""
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      "last 1 electron version"
    ],
    "development": [
      "last 1 electron version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^23.0.0",
    "electron-builder": "^23.6.0",
    "electronmon": "^2.0.2",
    "wait-on": "^7.0.1"
  }
}

单一入口点

我们必须创建一个应用程序的入口点，在“public”文件夹中创建一个electron.js 或 main.js文件，如下所示

注意我们链接index.js [第 19 行]和preload.js [第 12行] 的路径

const url = require("url");
const { app, BrowserWindow, protocol } = require("electron");
const path = require("path");

//Create the main window.
function createWindow() {
   const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      //Set the path of an additional "preload" script
      webPreferences: {
         preload: path.join(__dirname, "preload.js"),
      },
   });

   //app.isPackaged 用于检查这是否是开发环境，因此将其设置为 localhost 以允许热重载
   //在生产中，将浏览器路径设置为生成到主文件的本地包
   const appURL = app.isPackaged ? url.format({
            pathname: path.join(__dirname, "index.html"),
            protocol: "file:",
            slashes: true,
        }) : "http://localhost:3000";
   //Load the url
   mainWindow.loadURL(appURL);

   // Open Chrome's DevTools in dev env.
   if (!app.isPackaged) {
      mainWindow.webContents.openDevTools();
   }
}

//设置本地代理以在从本地生产包（本地字体等）加载请求文件时调整请求文件的路径
function setupLocalFilesNormalizerProxy() {
   protocol.registerHttpProtocol(
      "file",
      (request, callback) => {
         const url = request.url.substr(8);
         callback({ path: path.normalize(`${__dirname}/${url}`) });
      },
      (error) => {
         if (error) console.error("Failed to register protocol");
      }
   );
}

//完成初始化事件以创建窗口
app.whenReady().then(() => {
   createWindow();
   setupLocalFilesNormalizerProxy();

   app.on("activate", function () {
      //On macOS it's common to re-create a window in the app when the dock icon is clicked and there are no other windows open
      if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
      }
   });
});

//Quit when all windows are closed, except on macOS.
app.on("window-all-closed", function () {
   if (process.platform !== "darwin") {
      app.quit();
   }
});

在“public”文件夹中创建一个preload.js文件，如下所示

//所有 Node.js API 都可以在预加载过程中使用。
const { contextBridge } = require("electron");

//例如，这里我们使用 exposeInMainWorld API 来公开浏览器
process.once("loaded", () => {
  contextBridge.exposeInMainWorld("versions", process.versions);
});

创建一个简单的 html 测试文件

现在创建一个简单的index.html文件来显示“Hello Electron!”，这样我们就可以测试我们的流程了：

<html>
  <head>
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1 style="text-align: center; font-family: Arial, sans-serif; color: #2196F3;">Hello Electron!</h1>
  </body>
</html>

这就是你的文件系统应该是什么样子的（加~减）

使用 Electron.js 的跨平台桌面应用程序：从0到专家_跨平台

准备，设置，运行！

我们完成了第一轮，现在让我们测试一下。运行以下命令

npm run electron:start

这是我的终端片段，注意过程：

等待 127.0.0.1:3000 服务器 -> 启动 React 服务器 -> 启动 Electronmon -> 打开 Electron。

使用 Electron.js 的跨平台桌面应用程序：从0到专家_应用程序_02

这是我的 Electron 屏幕截图，DevTools 正常打开！

使用 Electron.js 的跨平台桌面应用程序：从0到专家_开发人员_03

现在，让我们把它们打包在一起

要将其作为可执行文件运行，我们现在应该为目标操作系统（Windows、Linux、Mac）构建和打包我们的应用程序，所以让我们向 package.json 添加一些脚本：

"build:package:mac" :  "npm run prebuild && electron-builder -m -c.extraMetadata.main=build/electron.js" , 
    "build:package:win" :  "npm run prebuild && electron-builder -w -c.extraMetadata.main=build/electron.js" , 
    "build:package:linux" :  "npm run prebuild && electron-builder -l -c.extraMetadata.main=build/electron.js"

npm run prebuild — 在构建文件夹中将我的 React 应用构建为静态应用

electron-builder — 使用它配置运行（如下），并通过酷安装将我们的应用程序打包到 dist 文件夹

在package.json中添加一个新的配置部分，如下所示：

"build": {
    "appId": "electron.react",
    "productName": "electron-react",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "public"
    },
    "mac": {
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "deb"
    }
  }

完整的package.js文件应该是这样的

{
  "name": "electron-react",
  "version": "1.1.0",
  "private": true,
  "author": "Ben Mishali",
  "description": "My Electron app",
  "main": "public/electron.js",
  "homepage": "./",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "electron-is-dev": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "bootstrap": "^5.2.2",
    "react-icons": "^4.6.0",
    "react-parallax-tilt": "^1.7.68",
    "react-bootstrap": "^2.5.0",
    "react-pdf": "^5.7.2",
    "react-router-dom": "^6.4.2",
    "react-text-transition": "^3.0.2",
    "react-tsparticles": "^2.3.3",
    "tsparticles": "^2.3.4",
    "typewriter-effect": "^2.19.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "prebuild": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron:start": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://127.0.0.1:3000 && electronmon .\"",
    "build:package:mac": "npm run prebuild && electron-builder -m -c.extraMetadata.main=build/electron.js",
    "build:package:win": "npm run prebuild && electron-builder -w -c.extraMetadata.main=build/electron.js",
    "build:package:linux": "npm run prebuild && electron-builder -l -c.extraMetadata.main=build/electron.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      "last 1 electron version"
    ],
    "development": [
      "last 1 electron version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^23.0.0",
    "electron-builder": "^23.6.0",
    "electronmon": "^2.0.2",
    "wait-on": "^7.0.1"
  },
  "build": {
    "appId": "electron.react",
    "productName": "electron-react",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "public"
    },
    "mac": {
      "target": "dmg"
    },
    "win": {
      "target": "nsis"
    },
    "linux": {
      "target": "deb"
    }
  }
}

准备、设置、部署！

我们完成了部署回合，现在让我们对其进行测试。运行以下命令构建并打包到 Windows 操作系统

npm run build:package:win

完成后，我们的应用程序已在 dist 文件夹中准备就绪：

使用 Electron.js 的跨平台桌面应用程序：从0到专家_跨平台_04

安装是从安装程序 exe 文件或从 win-unpacked 文件夹运行它。

这就是你的文件系统应该是什么样子的

使用 Electron.js 的跨平台桌面应用程序：从0到专家_应用程序_05

使用 Electron.js 的技巧

使用预构建的样板：开始使用 Electron.js 的最佳方法之一是使用预构建的样板，其中包括快速入门所需的所有组件和结构。GitHub 上有许多开源 Electron.js 样板可供您使用。
保持主进程简单：主进程负责管理 Electron.js 应用程序的整体状态。保持主流程简单并专注于应用程序的核心功能非常重要。
使用预构建的 UI 组件：Electron.js 包含许多预构建的 UI 组件，例如按钮、对话框和窗口，您可以使用它们快速构建应用程序的用户界面。
使用 Node.js 模块：Electron.js 建立在 Node.js 之上，这意味着您可以在 Electron.js 应用程序中使用任何 Node.js 模块。这使您可以访问大量模块库，您可以使用这些模块库向您的应用程序添加功能。

结论

Electron.js 是一个强大的框架，使开发人员能够使用 Web 技术创建跨平台的桌面应用程序。借助 Electron.js，您可以构建易于使用且功能强大且可在 Windows、macOS 和 Linux 上运行的高质量桌面应用程序。无论您是经验丰富的开发人员还是刚刚起步，Electron.js 都是帮助您创建令人惊叹的桌面应用程序的绝佳工具。

【文章转自荷兰服务器 http://www.558idc.com/helan.html 欢迎留下您的宝贵建议】

上一篇：使用 PHP 和 Laravel 构建 REST API 的教程
下一篇：没有了