electron入门-简介

概述

electron是一个开发桌面软件的工具。

虽然现在大家主要开发的web和app应用，但是还是有很多需求需要以桌面软件方式提供出来。以前如果要开发这样的桌面软件，可能需要掌握c++之类的开发工具，如vc、qt等，这对于熟悉web编程的人员来说，还是比较困难的。

electron就是从web开发者视角提供这样的一个解决方案。关于electron起源的故事还是很有趣的，也值得我们思考的。大家可以从这篇文章Electron是什么？从了解一下其发展历程。

这个系列文章不是对electron相关api文档的解读，而是从实战角度来学习electron。我们前面几篇文章重点介绍一些electron基本功能，以及打包发布过程，后面几篇文章重点介绍如何利用vue生态来开发基于vue的桌面应用。

理解electron

虽然网上已经有不少资料介绍electron，本节还是要对此进行解读一下，这样便于后续理解。

electron本质上是两个引擎的集成：electron=Node和Chromium，这个也是早期项目启动的初衷。Node把js能力移植到后端开发，使之具备与操作系统直接到交道的能力，提升了js脚本语言的应用范围，而Chromium是浏览器引擎，可以把网页渲染出可视化界面。electron把这两个引擎整合起来，就具备开发桌面GUI应用的基本条件，使得web开发人员尤其是前端人员也可以很容易地来开发桌面应用。

更严谨一些，可以通过下图：

主进程和渲染进程

在electron框架中，有两个最核心的概念：主进程和渲染进程。主进程控制整个应用的生命周期，主进程中可以利用Node来与操作系统进行交互，利用Chromium进行GUI展示。而GUI展示部分就是作为一个渲染进程。因此一个主进程中可以创建多个渲染进程。渲染进程完成加载网页资源进行GUI展示，主进程则利用electron提供的API借助Node引擎可以范围操作系统资源，同时这些API在通过remote机制可以提供给渲染进程中的网页进行调用，间接地实现在网页中访问操作系统资源，实现主进程和渲染进行之间进行通信，当然主进程与渲染进程还有一个单独的消息机制进行通信。

一个例子

为了更好地理解上述的概念，我们先通过一个简单的例子来说明下：

创建一个简单的electron应用，包括三个步骤：

初始化一个nodejs应用安装electron包编写electron代码

一个最简单的electron程序结构如下：

demo1/ ├── package.json ├── main.js └── index.html

如果你已经安装nodejs，可以在demo1目录下执行如下命令：

npm init

这个命令就可以生成一个package.json文件

然后你可以手工创建main.js和index.html

在编写代码前，最重要工作就是安装electron包。

npm i electron@8.0.0 -S

上述安装指定的electron版本。

如果要安装最新版本，可以直接执行：

npm i electron -S

在package.json中定义入口的文件

{  "name": "demo1",  "version": "0.1.0",  "main": "main.js" }

main键值说明入口程序文件。

在main.js中添加如下代码：

const { app, BrowserWindow } = require("electron"); const isDev = require("electron-is-dev"); const path = require("path"); let mainWindow; app.on("ready", () => {  mainWindow = new BrowserWindow({ width: 1024, height: 680, webPreferences: {  nodeIntegration: true,  // https://stackoverflow.com/questions/37884130/electron-remote-is-undefined  enableRemoteModule: true, },  });  // https://www.electronjs.org/docs/api/browser-window#event-ready-to-show  // 在加载页面时，渲染进程第一次完成绘制时，如果窗口还没有被显示，渲染进程会发出 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪烁  mainWindow.once("ready-to-show", () => { mainWindow.show();  });  const urlLocation = `file://${__dirname}/index.html`;  mainWindow.loadURL(urlLocation); });

index.html文件可以是简单的展示信息，就是我们缺省展示的页面内容：

Hi! 这是我的第一个Electron展示页面！

我们在demo1命令的命令行下执行：

electron .

就可以看到我们创建的第一个electron应用启动成功了。

electron执行命令可以看做是node执行程序，在上述例子中，就是调用入口文件main.js。简单说明如下：

在main.js中会自动实例化一个应用对象app，这个对象可以看做是主进程对象当app完成启动准备后，就可以一个渲染对象BrowserWindow，我们也可以粗略地把它看做是渲染进程，或者说BrowserWindow是在渲染进程中运行。一个BrowserWindow对应一个渲染进程。BrowserWindow也可看做是对Chromium包装。BrowserWindow对象初始化时会提供第一个页面文件设置，上述例子中这个页面文件就是我们定义的index.html

主进程与应用页面之间可以进行通信，通信方式包括：

ipcMain、ipcRenderRemote模块

这些我们在后续的章节中会进行介绍。

下一节我们介绍一下electron应用如何进行打包，发布，了解下整个开发过程。