Electron 的历史和简介

用 HTML/CSS/JavaScript 来构建跨平台桌面应用程序的一个开源库

通过将 Chromium 和 Node.js 合并到同一个运行环境中，并将其打包到相应的操作系统下的应用来实现跨平台

Electron 是什么？

Build cross platform desktop apps with JavaScript, HTML, and CSS

Electron 的实践

前提是已经安装好node.js

命令行输入node -v查看

而后查看是否安装好npm包管理器

命令行输入npm -v查看

接下类键入npm install electron -g 全局安装electron

这一步往往是劝退的一步，总会遇到网络故障，解决方法是下载cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org 或配置淘宝镜像

检查是否安装成功：electron -v，目前最新版本应当是：v8.2.0

确认以上都安装成功后，在我们想要建立 Electron 项目的文件夹中新建一个文件夹

--electronDemo
    --index.html
    --main.js

在此文件夹的两个文件中分别书写代码:

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,Electron</title>
</head>
<body>
    Hello,Electron
</body>
</html>

main.js

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow

var mainWindow = null;


app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:300,
        height:500
    })
    mainWindow.loadFile('index.html')
    mainWindow.on('close',()=>{
        mainWindow = null
    })
})

此时的electronDemo文件夹中只有这两个文件

在该目录下的命令行中键入：npm init --yes可初始化该Electron项目

该命令键入后可以发现该文件夹目录下多出了文件package.json

{
  "name": "electrondemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json文件通常不需要改动，但是要注意以下 3 点：

"main":"main.js",的配置说明的是主进程的入口文件，要和我们文件夹中的文件名一致
"name"属性的内容不可以使用大写字母和汉字,可用的字符规则如下： ^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$
.json文件不可以添加注释

如果需要更多可以查看这里：（另：前端框架的使用始终是无法脱离 JavaScript 的，我们有必要反复巩固 JavaScript 的知识）www.w3schools.com/js/js_json_…

那么到这里我们就可以开始了

在命令行中键入electron .（.之前是有空格的）而后就可以看到项目的运行

Electron 可以分为主进程和渲染进程

主进程

Electron 中文文档的名词释义是：

main process
主进程，通常是名为 main.js 的文件，是每个 Electron 应用的入口文件。它控制着整个 App 的生命周期，从打开到关闭。 它也管理着系统原生元素比如菜单，菜单栏，Dock 栏，托盘等。 主进程负责创建 APP 的每个渲染进程。而且整个 Node API 都集成在里面。

每个 app 的主进程文件都定义在 package.json 中的 main 属性当中。这也是为什么 electron. 能够知道应该使用哪个文件来启动。

在Chromium中, 这个进程被称为 "浏览器进程"。它在Electron被重新命名, 以避免与渲染器进程混淆。

Electron 中，入口是一个 .js 文件，运行这个入口文件的进程称作主进程，在主进程使用 BrowserWindow 模块可以创建并管理 web 页面，也就是应用的 GUI。

打开 Electron 目录下，package.json文件是这样的：

    {
    "name": "electron-test",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",//运行该文件的进程就是主进程（另：.json 文件中不能这样添加注释）
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
    }

一言以蔽之：Electorn 运行 package.json 的 main 脚本的进程被称为主进程

主进程中运行的脚本通过创建 Web 页面来展示用户界面
一个 Electron 应用总是有且只有一个主进程

渲染进程

Electron 中文文档的名词释义是：

renderer process
渲染进程是你的应用内的一个浏览器窗口。与主进程不同的是，它能够同时存在多个而且运行在不一样的进程。而且它们也能够被隐藏。

在通常的浏览器内，网页通常运行在一个沙盒的环境挡住并且不能够使用原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些低级别的交互。

在 Electron 里的每个页面都有它自己的进程，叫作渲染进程。

主进程通过实例化 BrowserWindow，每个 BrowserWindow 实例都在它自己的渲染进程内返回一个 web 页面。当 BrowserWindow 实例销毁时，相应的渲染进程也会终止。

渲染进程由主进程进行管理。每个渲染进程都是相互独立的，它们只关心自己所运行的 web 页面。

主进程和渲染进程的区别

主进程通过BrowserWindow创建页面
每个BrowserWindow实例都在自己的渲染进程中运行, 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止

主进程和渲染进程之间的这种关系，决定了他们之间一定要进行通信，决定了他们之间的通信一定是双向的，关于这个问题在后续说明

Electron API

在 Electron 官网中关于 API 的文档链接： www.electronjs.org/docs/api

作为初学者我们有必要挑选一些常见、重要的深入掌握，同时应该养成阅读文档的良好习惯

app

主进程
控制你的应用程序的生命周期

BrowserWindow

主进程
创建和控制浏览器窗口

ipcMain

主进程
从主进程到渲染进程的异步通信

ipcRenderer

渲染进程
从渲染器进程到主进程的异步通信

screen

主进程
检索有关屏幕大小、显示器、光标位置等的信息。

session

主进程
管理浏览器会话、cookie、缓存、代理设置等。

Electron 的初学者详细指南