跨平台开发利器：利用 Umi + Electron 同步构建 Web 端和桌面端应用

2023-12-04 21:28:31

在现代软件开发中，多平台兼容性已成为一项至关重要的需求。为了应对这一挑战，技术栈不断演进，为开发者提供了构建适用于多种设备和操作系统的应用程序的强大工具。在这篇文章中，我们将探讨如何将 Umi 和 Electron 相结合，实现一套代码同步开发 Web 端和桌面端应用，开辟跨平台开发的新篇章。

Umi 是一个基于约定式的现代 Web 应用程序框架，它遵循 React、Redux 和 Dva 的最佳实践。凭借其开箱即用的功能，包括路由管理、状态管理和代码拆分，Umi 大大简化了 Web 应用程序的开发过程。它还提供了一个命令行界面（CLI），用于项目初始化、脚手架生成和构建脚本管理。

Electron 是一个跨平台框架，允许开发者使用 HTML、CSS 和 JavaScript 构建原生桌面应用程序。它将 Chromium 嵌入到应用程序中，提供对 Web 技术的无缝访问。Electron 应用程序可以打包成 Windows、macOS 和 Linux 的可执行文件，从而实现跨平台部署。

通过将 Umi 和 Electron 相结合，开发者可以充分利用两者的优势，构建功能强大、跨平台的应用程序。Umi 负责 Web 端的开发和维护，而 Electron 则负责将应用程序打包成独立的桌面应用程序。这种组合提供了一系列好处：

一套代码，多端使用： 使用 Umi + Electron，开发者可以编写一套代码，同时部署到 Web 和桌面平台，大大提高了开发效率和维护便利性。
原生桌面体验： Electron 提供了创建原生桌面应用程序所需的所有功能，包括菜单栏、窗口管理和系统托盘集成。
跨平台兼容性： Electron 应用程序可以在 Windows、macOS 和 Linux 上无缝运行，为用户提供了无缝的一致体验。

构建一个 Umi + Electron 项目的过程相对简单：

安装依赖项： 首先，安装 Umi CLI 和 Electron：

npm install -g @umijs/cli
npm install -g electron

创建 Umi 项目： 使用 Umi CLI 创建一个新的项目：

umijs create my-project

集成 Electron： 在项目根目录中，安装 Electron：

npm install electron --save-dev

配置 Electron： 在 package.json 文件中添加 Electron 配置：

{
  "main": "src/main.js",
  "scripts": {
    "start-electron": "electron .",
    "build-electron": "electron-builder"
  },
  "devDependencies": {
    "electron": "^19.0.0",
    "electron-builder": "^23.0.0"
  }
}

创建主进程文件： 在 src 目录中创建一个名为 main.js 的文件，该文件将作为 Electron 的主进程入口点：

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadURL('http://localhost:3000');
}

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

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

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