Electron开发笔记----前端小白开发桌面应用之路（一）聊聊Electron和我的第一个Electron应用

最新推荐文章于 2025-03-11 15:40:47 发布

前端小黑

最新推荐文章于 2025-03-11 15:40:47 发布

阅读量1.6k

点赞数

分类专栏： Electron node.js

本文链接：https://blog.youkuaiyun.com/zemprogram/article/details/107586136

版权

node.js 同时被 2 个专栏收录

7 篇文章

订阅专栏

Electron

4 篇文章

订阅专栏

Electron

Electron.js是什么，如果你想使用你的前端知识，去开发一个桌面应用，那么你应该会了解到Electron或者是nw，而这两者之间的区别，我在这里就不展开说了，这里主要要说的是Electron.js

Electron是在2013年为了开发Github上可编程的文本编辑器Atom的框架而开发出来的

一、为什么会有Electron

首先，在学习Electron.js之前，我们先来聊聊，为什么会有Electron这种东西

以下为我的个人观点：
我个人觉得，Electron这类框架的出现，是为了解决桌面应用开发的上手难度较高，开发较为小众的问题，此外，还有对于同一个应用开发，需要同时有web端和桌面端，这种需求带来的维护和开发的成本过高，虽然一般情况下我们只会去选择其中一端，但是只要需求存在，工具就会随后出现

同时，我们做为前端开发时，一个比较麻烦的问题就是兼容性，而Electron中用到的chromium，让我们可以忽视浏览器版本的兼容性

除了解决问题，我个人认为，随着前端开发技术的日趋成熟，天花板不断拔高的现在，前端技术已经出现在各个领域了，桌面应用出现了前端开发的席位，在我看来也是趋势所在

二、Electron的组成

稍微聊了一下Electron的由来，我们接下来说说Electron的组成，Chromium+Node.js+Native API

Chromium

Chromium负责了这个桌面应用开发中的界面部分，我们可以了解一下Chromium是什么

首先，我们知道，Chrome是浏览器，而Chromium可以看做是Chrome浏览器背后的引擎，其目的是为了创建一个快速稳定的通用浏览器

而我们在开发桌面应用时，为了可以更好地专注于我们的代码，减少对兼容性的考虑，使用基于Chromium的Electron.js开发时，我们可以不考虑浏览器版本的问题，也就是说，至少在开发桌面应用时，我们终于可以不再理会“万恶”的IE了

Node.js

Node.js负责了桌面应用中的逻辑部分，做为一个前端开发，如果你还不知道Node.js，那肯定是走不远的，我在实习的时候，隔壁的前端开发整天肝node.js，就不说实习，在面试的时候，我也经常会被问到Node.js，所以做为前端必须掌握的技术，我这里不过多赘述，不了解的同学可以先去好好学一下再来看这篇文章

这里说说Node.js给Electron带来了什么

对于前端开发来说，学习node的成本比学习Java，C++这些语言的成本低，所以对于要使用web知识来开发桌面应用的前端来说，使用Node.js来实现逻辑无疑是个好的选择
使用Node.js开发，也就意味着，我们可以使用Node.js这个生态下的各个模块，也就是npm包，这使得我们可以不再重复造轮子，而且也可以使用一些流行的框架诸如vue，react等

Native API

Native API我觉得可以理解为Electron为了对原生系统的CUI支持，让Electron可以跨平台使用而加入的，它给Electron提供了桌面应用的原生能力，比如调用系统通知，打开系统文件夹等

三、Electron的开发环境搭建

首先，我们需要安装node，这里也不赘述node的安装过程

在node安装好了之后，我们新建一个文件夹，初始化npm，并在改文件夹中安装electron

mkdir <projectName>
cd <projectName>
npm init
// 选择以下两种安装方式的一种
// 本项目下安装
npm i electron --save-dev
// 全局安装
npm i electron -g

projectName为你的项目名
建议直接全局安装，如果只在项目里安装的话，后面执行命令需要把命令放到package.json中的scripts通过npm run才能执行，因为命令非全局，只有通过npm run暂时将其放到全局才能执行

这里建议使用淘宝镜像下载，不然完全下不动

npm config set registry https://registry.npm.taobao.org

但是如果你设置淘宝镜像后还是太慢（我就是。。。），那么建议使用

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

把electron也改成镜像

安装完成后，可以使用

electron -v

来检测自己是否安装成功
在这里插入图片描述
看到上图后，可以使用

electron

来执行，就会看到如图的界面
在这里插入图片描述
这里如果是在本项目安装，则要在package.json中添加

"scripts": {
    "electron":"electron"
  },

然后运行npm run electron，也会出现上面的界面，表示安装成功

四、搭建第一个Hello World

那么，环境搭建完成，接下来就要开始写我们的第一个桌面应用了，也就是语言入门万金油hello world

首先，我们进入一个新目录，npm init初始化
（如果刚才的electron是在本项目下安装的，那么则在本项目下创建一个新目录，后面默认都是全局安装的操作）
因为electron实际上的页面编辑我们可以直接用web端的来做，所以我们在这里创建要给index.html，写入对应的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>

<body>
    <p>Hello World</p>
</body>

</html>

（这里想必不用我解释内容了，不明白的同学应该也不会来到这篇博客）

然后创建一个index.js做为入口，实际上就是package.json中对应的main的值
在这里插入图片描述
然后我们从electron中引入模块来实现我们的桌面应用开发，要了解的一件事是，electron模块所提供的功能都是通过命名空间暴露出来的，所以我们在使用的时候，需要哪一部分的功能，直接拿到对应的命名空间即可，这里我们只是想要创建一个简单的窗口和监听声明周期，所以只需要用到app和 BrowserWindow这两个命名空间
有关Electron的生命周期监听事件可见文档

const { app, BrowserWindow } = require('electron')
    // app：管理Electron应用程序的声明周期
    // BrowserWindow负责创建窗口

let mainWindow = null // 要打开的主窗口应用

app.on('ready', () => { // 监听准备事件
    mainWindow = new BrowserWindow({ // 传入对象设置窗口参数，这里设置了宽和高以及允许使用node的API
        width: 500,
        height: 500,
        webPreferences: {
            nodeIntegration: true
        }
    })
    mainWindow.loadFile('index.html')
    mainWindow.on('closed', () => { // 监听关闭时间
        mainWindow = null // 将窗口置为null，否则的话内存会一直被占用
    })
})

在命令行执行

electron .

就会打开如图的应用了，我们也就完成了我们的第一个hello world
在这里插入图片描述
而如果我们要对这个页面的内容进行修改，难道还要重新执行一遍electron .，其实可以不用，直接在窗口上找到view->reload，或者ctrl+r即可，但有一点要注意的是，这样的更新只适用于静态文件的修改，也就是说，像我们上面设置的高度和宽度，如果重新设置，那么使用reload是无效的，我们需要重新启动才可以使用修改后的内容

五、Electron 的应用架构

写完hello world，我们可以来聊聊Electron的应用架构，之所以在最后才说，是因为我觉得写了上面的hello world后，对这部分会有更好的理解

Electron中有两个主要的进程：主进程和渲染进程

主进程
主进程为package.json文件中main脚本的进程，也就是我们上面的index.js。在主进程中运行的脚本通过创建web页面来展示用户界面。

一个 Electron 应用总是有且只有一个主进程。

渲染进程
渲染进程可以看做是我们的前端环境。每个 Electron 中的 web 页面运行在它的叫渲染进程的进程中。

在普通的浏览器中，web页面通常在沙盒环境中运行，并且无法访问操作系统的原生资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

主进程和渲染进程之间的区别

主进程，也就是在main对应的脚本中，我们去调用BrowserWindow命名空间创建实例，通过这个实例来创建页面，也就是我们上面代码中的

mainWindow = new BrowserWindow({ width: 500, height: 400 })

而当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程可以看做是对所有渲染进程的管理，上面也提到了，主进程只能有一个，而渲染进程可以有多个，这也是区别之一，此外，因为主进程是对所有渲染进程的管理，所以它关心的是渲染进程对应的页面参数，而不关心渲染进程到底渲染什么，而相对的，渲染进程只关心它所渲染的页面，不会去关心其他渲染进程渲染的页面。