JS是世界上最好的语言—— 使用Electron开发桌面应用(一)-CSDN博客

本文链接：https://blog.csdn.net/yuqing1008/article/details/103523433

本文介绍如何使用Electron框架，利用JavaScript、HTML和CSS创建跨平台的桌面应用。Electron简化了开发流程，允许开发者专注于应用核心功能。文章详细讲解了Electron的主进程和渲染器进程，以及如何创建和管理窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。

我的学习动机

前阵子用Node+Vue搞了一个小程序的发布系统，开发期间一直在本地跑直到完成全部功能准备部署到服务器才发现了一个问题，根据官方的api小程序想要发布必须要依赖开发者工具！微信开发者工具会在你的本地启一个web服务，我们获取到它的端口号然后配合api才能完成上传。。。这就陷入了一个非常尴尬的局面，他喵的小程序开发者工具没有能运行在linux服务器的版本！！！

考虑不周，考虑不周。。。下次注意，代码是死的人是活的，线上行不通就想办法搞到本地吧，那么问题来了，如何能以最简单的形式让其他人的电脑上方便快捷的使用这个系统？要是能搞成一个app装在电脑上就好了，可我也不会写app呀，咦。。。等等。。。我JS可是世界上最强大的语言，不如找找有没有办法能用JS写一个app的框架吧，结果还真有！！！好吧，我承认我孤陋寡闻了，Electron就这么出现在了我的视野中，既然要拿它搞事情那就先简单的学习一下吧。

什么是Electron？

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。实际上Electron就是将Chromium和Node.js合并到同一个运行时环境中，根据你的需要将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。Electron有多牛? 这么说吧VScode和Atom都是用它撸出来的。

了解Electron的主进程和渲染器进程

Electron 运行 package.json 的 main 脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中。

在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有的web页面和它们对应的渲染进程。每个渲染进程都是独立的，它只关心它所运行的 web 页面。

打造你的第一个Electron应用程序

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：

初始化项目

以下示例照搬官网
首先创建一个空文件夹，打开命令行切换到该目录下执行

yarn init

注意：

这里我强烈推荐你使用yarn来安装本项目所需要的所有依赖，使用npm的话也许开发阶段不会有任何问题，但打包阶段会出现各种未知bug，但使用yarn会使你避免这些坑，别问为什么，因为我也不知道，当初打包各种失败的时候伟大的网友告诉我的。

yarn 会帮助你创建一个基本的 package.json 文件。其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。基本操作，没什么好说的，不懂得童鞋自行查找对应资料。

注意：
如果package.json 中没有指定main的入口文件， Electron 将会尝试加载 index.js 文件（就像 Node.js 自身那样）。

Electron的启动命令是electron, 所以可以在script字段添加一个命令用来快速启动项目。如下：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

安装 Electron

现在，你需要安装electron。把他作为项目中的开发依赖项，在app所在文件夹中运行下面的命令：

yarn add electron

开发一个简易的 Electron

首先在main.js内引入Electron模块，Electron提供了各种api使你可以调用一些原生的方法和ui，引入方法和普通的node模块一样。

const electron = require('electron')

electron 模块所提供的功能都是通过命名空间暴露出来的。比如说： electron.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口：

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

function createWindow () {   
  // 创建浏览器窗口
  let win = new BrowserWindow({ width: 800, height: 600 })

  // 然后加载 app 的 index.html.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

在 main.js 中创建窗口，并处理程序中可能遇到的所有系统事件。下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口，添加后，main. js 就像下面这样：

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

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({ width: 800, height: 600 })

  // 然后加载应用的 index.html。
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

在这个文件中，你可以续写应用剩下主进程代码。也可以拆分成几个文件，然后用 require 导入。

最后，创建你想展示的 index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

启动你的应用

在创建并初始化完成 main.js、 index.html和package.json之后，您就可以在当前工程的根目录执行 npm start 命令来启动刚刚编写好的Electron程序了。

npm start

end

Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium浏览器。本章介绍了Electron的基础使用，在下一篇会以实战的形式将现有发布系统转换为Electron应用的开发过程和使用到的一些api及中间遇到的坑进行着重介绍。同时欢迎大家关注公众号前端小苑，我会定期在这里发表原创文章。