electron开发实战：electron入门-简介
electron开发实战：electron入门-简介为了更好地理解上述的概念，我们先通过一个简单的例子来说明下：在electron框架中，有两个最核心的概念：主进程和渲染进程。主进程控制整个应用的生命周期，主进程中可以利用Node来与操作系统进行交互，利用Chromium进行GUI展示。而GUI展示部分就是作为一个渲染进程。因此一个主进程中可以创建多个渲染进程。渲染进程完成加载网页资源进行GUI展示，主进程则利用electron提供的API借助Node引擎可以范围操作系统资源，同时这些API在通过remote机制可以提供给渲染进程中的网页进行调用，间接地实现在网页中访问操作系统资源，实现主进程和渲染进行之间进行通信，当然主进程与渲染进程还有一个单独的消息机制进行通信。虽然网上已经有不少资料介绍electron，本节还是要对此进行解读一下，这样便于后续理解。electron本质上是两个引擎的集成：electron=Node和Chromium，
概述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文件可以是简单的展示信息，就是我们缺省展示的页面内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo1</title>
</head>
<body>
<h1>Hi! 这是我的第一个Electron展示页面！</h1>
</body>
</html>
我们在demo1命令的命令行下执行：
electron .
就可以看到我们创建的第一个electron应用启动成功了。
electron执行命令可以看做是node执行程序，在上述例子中，就是调用入口文件main.js。简单说明如下：
- 在main.js中会自动实例化一个应用对象app，这个对象可以看做是主进程对象
- 当app完成启动准备后，就可以一个渲染对象BrowserWindow，我们也可以粗略地把它看做是渲染进程，或者说BrowserWindow是在渲染进程中运行。一个BrowserWindow对应一个渲染进程。BrowserWindow也可看做是对Chromium包装。
- BrowserWindow对象初始化时会提供第一个页面文件设置，上述例子中这个页面文件就是我们定义的index.html
主进程与应用页面之间可以进行通信，通信方式包括：
- ipcMain、ipcRender
- Remote模块
这些我们在后续的章节中会进行介绍。
下一节我们介绍一下electron应用如何进行打包，发布，了解下整个开发过程。
