用不到 15 行代码将你的网站变成跨平台桌面应用 Electron 是什么？为什么要使用 Electron？入门指南 构建应用 Electron 的缺点 使用 Electron 的项目 Smartsapp 感谢阅读

2025-06-07

用不到 15 行代码将您的网站转变为跨平台桌面应用程序

什么是Electron？

为什么要使用Electron？

入门

构建应用程序

使用的缺点electron

项目使用Electron

Smartsapp

感谢阅读

什么是Electron？

Electron是由GitHub开发和维护的开源软件框架。它允许使用 Web 技术开发桌面 GUI 应用程序：它结合了渲染引擎和运行时。ChromiumNode.js

为什么要使用Electron？

现在您可能想知道为什么要使用electron...嗯，有几个相当令人信服的理由：

  • Electron是一个由GitHub和活跃的贡献者社区维护的开源项目，可以快速修复错误并添加新功能。
  • 它是跨平台的，兼容Mac、Windows和Linux，Electron 应用程序可以在三个平台上构建和运行。
  • 您可以使用各种Web 技术制作应用程序，从原始的HTML、CSS&到诸如、和之JS类的框架。ReactAngularVue
  • 一些最大的桌面应用程序都是使用VS Code、Facebook Messenger、Twitch、Microsoft Teamselectron等制作的。

入门

好了，废话少说，现在开始将您的Web 应用转换为桌面应用。首先，electron使用以下命令进行安装。

npm i -g electron
Enter fullscreen mode Exit fullscreen mode

安装完成后，打开一个新文件夹并创建index.js文件。

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

const createWindow = () => {
    const win = new BrowserWindow({ width: 800, height: 600, })
    win.loadFile(path.join(__dirname, 'index.html')) // Assuming the file is located in the same folder
}

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

app.on('window-all-closed', () => process.platform !== 'darwin' && app.quit())
Enter fullscreen mode Exit fullscreen mode

瞧！你的应用仅用 14 行代码就转换成了桌面应用。你可以使用以下命令运行该应用

electron .
Enter fullscreen mode Exit fullscreen mode

附言：请确保你已index.html在指定位置，否则应用会崩溃。出于测试目的，你可以使用一行代码

<h1>Cross Platform App</h1>
Enter fullscreen mode Exit fullscreen mode

但是开发任何这样的应用程序都不是最佳选择，最好使用npm或之类的工具创建一个合适的项目，yarn以便更好地进行包管理。

构建应用程序

首先使用​

npm init
Enter fullscreen mode Exit fullscreen mode

并添加electron为开发依赖项

npm i -D electron
Enter fullscreen mode Exit fullscreen mode

让我们创建index.js文件

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

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

  win.loadFile(path.join(__dirname, 'gui', 'index.html')) // Assuming the GUI files are in a folder called gui
}

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

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

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

是的，我确实压缩了文件一点以使其适合 14 行😅。

您应该将文件组织在单独的文件夹中（如上例中的Web 应用程序文件的GUI ）。

使用的缺点electron

Electron也有一些缺点

  • 比使用本机 GUI 组件构建的应用程序慢（尽管在大多数情况下并不明显）。
  • 包大小非常大（与原生应用相比）

项目使用Electron

Smartsapp

网络应用程序：https://smartsapp-ba40f.firebaseapp.com

GitHub 徽标 ruppysuppy / SmartsApp

💬📱 端到端加密的跨平台通讯应用程序。

Smartsapp

具有端到端加密（E2EE）的完全跨平台的通讯应用程序。

演示

注意：演示中展示的功能并不详尽。演示中仅展示核心功能。

支持的平台

  1. 桌面： Windows、Linux、MacOS
  2. 移动设备： Android、iOS
  3. 网站：任何带有浏览器的设备

后端设置

应用程序的后端由 处理Firebase。

基本设置

  1. 转到 firebase 控制台并创建一个名为的新项目Smartsapp
  2. 使能够Google Analylitics

应用程序设置

  1. App从概览页面创建项目
  2. 将配置复制并粘贴到所需位置（在相应应用程序的自述文件中给出）

授权设置

  1. 前往项目Authentication部分
  2. 选择Sign-in method标签
  3. 启用Email/Password并Google登录

Firestore 设置

  1. 前往项目Firestore部分
  2. 为项目创建 Firestore 供应（选择距离您所在位置最近的服务器）
  3. 前往Rules…
在 GitHub 上查看

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

  1. 我是初学者，该如何学习前端 Web 开发？
    可以参考以下文章：

    1. 前端流行语
    2. 前端开发路线图
    3. 前端项目构想
    4. 从初学者过渡到中级前端开发人员

  2. 你能指导我吗？

    抱歉，我工作已经很忙了，没时间指导任何人。

文章来源：https://dev.to/ruppysuppy/turn-your-website-into-a-cross-platform-desktop-app-with-less-than-15-lines-of-code-with-electron-44m3
Devto 翻译
PREV
React 中的代码拆分
NEXT
2025 年开发者必知的 17 个 React 面试问题，感谢阅读