Electron构建跨平台应用|博客系列
# 一、前言
NW.js和Electron都可以用前端的知识来开发桌面应用。NW.js和Electron起初是同一 个作者开发。后来种种原因分为两个产品。一个命名为NW.js(英特尔公司提供技术支持)、 另一命名为Electron(Github 公司提供技术支持)。NW.js和Electron可以用Nodejs中几乎所有的模块。NW.js和Electron不仅可以把html写的web页面打包成跨平台可以安装到电脑上面的软件，也可以通过javascript访问操作 系统原生的UI和Api(控制窗口、添加菜单项目、托盘应用菜单、读写文件、访问剪贴板)。
github的atom编辑器、微软的vscode编辑器，包括阿里内部的一些 软件也是用electron开发的
1. Electron 是由谁开发的?
Electron是由Github开发
2. Electron 是什么?
Electron是一个用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库
3. Electron 把 HTML，CSS 和 JavaScript 组合的程序构建为跨平台桌面应用程序的原理 是什么?
原理为
Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
4. Electron 何时出现的，为什么会出现?
Electron于2013年作为构建Atom的框架而被开发出来。这两个项目在2014春季开源。 (Atom:为 Github 上可编程的文本编辑器)
一些历史:
2013年4月Atom Shell项目启动 。2014年5月Atom Shell被开源 。2015年4月Atom Shell被重命名为Electron2016年5月Electron发布了v1.0.0版本
5. Electron 当前流行程度?
目前
Electron已成为开源开发者、初创企业和老牌公司常用的开发工具。
6. Electron 当前由那些人在维护支持?
Electron当前由Github上的一支团队和一群活跃的贡献者维护。有些贡献者是独立开发者，有些则在用Electron构建应用的大型公司里工作。
7. Electron 新版本多久发布一次?
Electron的版本发布相当频繁。每当Chromium、Node.js有重要的bug修复，新API或是版本更新时Electron会发布新版本。
- 一般
Chromium发行新的稳定版后的一到两周之内，Electron中Chromium的版本会对其进行更新，具体时间根据升级所需的工作量而定。 一般Node.js发行新的稳定版一个月后，Electron中Node.js的版本会对其进行更新，具 体时间根据升级所需的工作量而定。
8. Electron 的核心理念是什么?
Electron的核心理念是:保持Electron的体积小和可持续性开发。 如:为了保持Electron的小巧 (文件体积) 和可持续性开发 (以防依赖库和API的泛滥) ，Electron限制了所使用的核心项目的数量。 比如Electron只用了Chromium的渲染库而不是其全部组件。这使得升级Chromium更加容易，但也意味着Electron缺少了Google Chrome里的一些浏览器相关的特性。 添加到Electron的新功能应该主要是原生API。 如果可以的话，一个功能应该尽可能的成 为一个Node.js模块。
9. Electron 当前的最新版本为多少?
Electron当前的最新版本为4.0.1(当前时间为2019年1月6号)
# 二、环境搭建
1. 安装 electron
npm install -g electron
2. 克隆一个仓库、快速启动一个项目
# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start
3. 手动搭建一个 electron 项目
- 新建一个项目目录 例如:
electrondemo01 - 在
electrondemo01目录下面新建三个文件:index.html、main.js、package.json index.html里面用css进行布局(以前怎么写现在还是怎么写)- 在
main.js中写如下代码
var electron =require('electron'); //electron 对象的引用
const app=electron.app; //BrowserWindow 类的引用
const BrowserWindow=electron.BrowserWindow;
let mainWindow=null; //监听应用准备完成的事件 app.on('ready',function(){
//监听应用准备完成的事件
app.on('ready',function(){
//创建窗口
mainWindow=new BrowserWindow({width: 800, height: 600}); mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null; })
})
})
//监听所有窗口关闭的事件
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
})
- 运行
electron . #注意:命令后面有个点
4. electron-forge 搭建一个 electron 项目
electron-forge相当于electron的一个脚手架，可以让我们更方便的创建、运行、打包electron项目
npm install -g electron-forge
electron-forge init my-new-app
cd my-new-app
npm start
# 三、Electron 运行流程
# 3.1 Electron 运行的流程
# 3.2 Electron 主进程和渲染进程
Electron运行package.json的main脚本的进程被称为主进程。- 在主进程中运行的脚本通过创建
web页面来展示用户界面。 一个Electron应用总是有且只有一个主进程。 - 由于
Electron使用了Chromium(谷歌浏览器)来展示web页面，所以Chromium的 多进程架构也被使用到。 每个Electron中的web页面运行在它自己的渲染进程中。 - 主进程使用
BrowserWindow实例创建页面。每个BrowserWindow实例都在自己的渲 染进程里运行页面。 当一个BrowserWindow实例被销毁后，相应的渲染进程也会被终止
- 进程:进程是计算机中的程序关于某数据集合上的一次运行活动，是 系统进行资源分配和调度的基本单位，是操作系统结构的基础。
- 线程:在一个程序里的一个执行路线就叫做线程(
thread)。更准确的定义是: 线程是“一个进程内部的控制序列”。 - 线程和进程:一个程序至少有一个进程,一个进程至少有一个线程
# 3.3 Electron 渲染进程中通过 Nodejs 读取本地文件
在普通的浏览器中，
web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。 然而Electron的用户在Node.js的API支持下可以在页面中和操作系统进行一些底层交 互。Nodejs在主进程和渲染进程中都可以使用。渲染进程因为安全限制，不能直接操作生GUI。虽然如此，因为集成了 Nodejs，渲染进程也有了操作系统底层API的能力，Nodejs中常用的Path、fs、Crypto等模块在Electron可以直接使用，方便我们处理链接、路径、 文件MD5等，同时npm还有成千上万的模块供我们选择。
var fs = require('fs');
var content = document.getElementById('content');
var button = document.getElementById('button');
button.addEventListener('click',function(e){
fs.readFile('package.json','utf8',function(err,data){
content.textContent = data;
console.log(data);
});
});
# 四、Electron 模块介绍
Electron模块介绍、remote模块、通 过BrowserWindow打开新窗口
# 4.1 Electron 主进程和渲染进程中的模块
# 4.2 Electron remote 模块
remote模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径
Electron中, 与GUI相关的模块(如dialog,menu等)只存在于主进程，而不在渲染进程中 。为了能从渲染进程中使用它们，需要用ipc模块来给主进程发送进程间消息。使用remote模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于Java的RMI
