# Electron

back

Electron 是由 Github 开发，用 HTML、CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac、Windows 和 Linux 下的应用来实现这一目的。像我们大家熟悉的 Visual Studio Code 就是使用 Electron 开发的

# 开发环境配置

back

要支持 Electron，我们需要 Node.js 运行环境和起包管理工具 npm，打开命令行工具，使用 apt install nodejs npm 命令进行安装，安装完成后，确认其是否已经全局可用：

下面这行的命令会打印出 Node.js 的版本信息
node -v
下面这行的命令会打印出 npm 的版本信息
npm -v

接下来安装 Electron 以及一个好用的脚手架程序 electron-forge，后者可以让我们快速构建一个 electron 应用：

npm install -g electron//(cnpm install -g electron)
npm install -g electron-forge

1
2

这样我们的开发环境就搭建好了，你可能还需要一个好用的 IDE，在这里我推荐 vscode 或者是 atom，不仅好用，而且这两个 IDE 都是 electron 开发的，如果不想用也没关系，vim 就可以。

# 创建应用以及编码

back

首先，创建一个 Electron 项目：

electron-forge init [程序名]

electron-forge 会为我们生成 packege.json 文件以及 src 目录，并安装好相关的 Node.js 依赖库。src 目录下有两个文件 index.html 和 index.js，index.html 是一个普通的 HTML 页面，而 index.js 是在 package.json 文件中指定的程序入口，并且 electron-forge 会为我们生成模板代码以及相关的注释，可以根据注释了解相关的代码作用。

接下来，我们使用 HTML+CSS 知识画一个时钟表盘，因为相对本文的内容，这部分不是关键，所以在此先省略，本文的代码都会在文末公布，供大家参考。

然后，我们需要让表盘上的指针动起来，在 index.html 中引入 clock.js 文件，添加 JavaScript 代码让其控制指针的运动，以秒针为例：

const second = today.getSeconds(); // 获取当前时间
const secondDeg = ((second / 60) * 360) + 360; // 计算秒针运动角度
secondHand.style.transform = `rotate(${secondDeg}deg)`; // 添加 CSS 动画

1
2
3

最后，我们调整 index.js，调用 new BrowserWindow() 生成 window 对象的时候，它的宽度和高度要根据表盘的大小作相应的调整，将 transprent 字段赋值为 true、frame 为 false，使你的程序无边框并且背景保持透明；并且需要对new BrowserWindow() 的操作作延迟处理，这样你的透明化操作才会生效：

app.on('ready', () => setTimeout(createWindow, 500));

# 应用运行以及打包发布

back

编码完成之后，运行应用也是非常简单，在工程目录下运行命令 electron-forge start 即可。

那么如何在优麒麟上对应用进行打包发布呢？首先我们修改 package.json 文件，找到 make_targets 字段，在 linux 下，我们删除掉 rpm，因为我们的优麒麟采用的是 debian 的打包体系，之后在工程目录运行命令 electron-forge make，即可完成发布。注意发布后生成二进制文件和 deb 包都在 out 目录下。

electron-builder
electron-packager

# builder

back、github

在项目的根目录下创建一个build文件夹，将作为MacOS的背景的background.png、MacOS图标的icon.icns以及Windows图标的icon.ico存到其中，Linux图标集将根据macOS自动生成。
通过npm命令将electron-builder作为项目的开发依赖：
cnpm install electron-builder --save-dev(也可npm)
yarn add electron-builder --save-dev

"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.leon.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    },
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
      "script" : "build/script/installer.nsh" // NSIS脚本的路径，用于自定义安装程序。 默认为build / installer.nsi  
    },
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# NPM下载的问题

设置镜像：在C盘User中找到.npmrc文件。然后加入下面这句代码,但是这个有时候也不是很好用
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
直接去淘宝镜像文件库找到对应的文件并下载，放到指定的目录下，electron的淘宝镜像地址。下载完之后放到指定的文件。一般文件得地址在C:\Users\Administrator\AppData\Local\electron\Cache。例如我要下载7.1.2版本的electron，那么找到镜像下得文件然后放到指定文件夹中。

# packager

back、github

# 总结

back

使用 Electron 来开发桌面程序是不是又快又好呢，大家可以试试同样一个时钟表盘桌面应用，使用 Gtk 或者 Qt 开发要花多少时间，才能真正体会 Electron 带来的是什么。

这个演示的代码放在下，供大家参考。

# 从0到1

back

一、前言
二、环境搭建
electron-forge搭建一个electron项目
三、Electron运行流程
四、Electron模块介绍
五、自定义顶部菜单_右键菜单

# 前言

back

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 开发的

Electron 是由谁开发的?
Electron 是由 Github 开发
Electron 是什么?
Electron 是一个用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库
Electron 把 HTML，CSS 和 JavaScript 组合的程序构建为跨平台桌面应用程序的原理是什么?
原理为 Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac，Windows 和 Linux 系统下的应用来实现这一目的。
Electron 何时出现的，为什么会出现?
Electron 于 2013 年作为构建 Atom 的框架而被开发出来。这两个项目在 2014 春季开源。 (Atom:为 Github 上可编程的文本编辑器)

一些历史:

2013 年 4 月 Atom Shell 项目启动。
2014 年 5 月 Atom Shell 被开源。
2015 年 4 月 Atom Shell 被重命名为 Electron
2016 年 5 月 Electron 发布了 v1.0.0 版本

Electron 当前流行程度?
目前 Electron 已成为开源开发者、初创企业和老牌公司常用的开发工具。
Electron 当前由那些人在维护支持?
Electron 当前由 Github 上的一支团队和一群活跃的贡献者维护。有些贡献者是独立开发者，有些则在用 Electron 构建应用的大型公司里工作。
Electron 新版本多久发布一次?
Electron 的版本发布相当频繁。每当 Chromium、Node.js 有重要的 bug 修复，新 API 或是版本更新时 Electron 会发布新版本。

一般 Chromium 发行新的稳定版后的一到两周之内，Electron 中 Chromium 的版本会对其进行更新，具体时间根据升级所需的工作量而定。
一般 Node.js 发行新的稳定版一个月后，Electron 中 Node.js 的版本会对其进行更新，具体时间根据升级所需的工作量而定。

Electron 的核心理念是什么?
Electron 的核心理念是:保持 Electron 的体积小和可持续性开发。

如:为了保持 Electron 的小巧 (文件体积) 和可持续性开发 (以防依赖库和 API 的泛滥) ， Electron 限制了所使用的核心项目的数量。
比如 Electron 只用了 Chromium 的渲染库而不是其全部组件。这使得升级 Chromium 更加容易，但也意味着 Electron 缺少了 Google Chrome 里的一些浏览器相关的特性。添加到 Electron 的新功能应该主要是原生 API。如果可以的话，一个功能应该尽可能的成为一个 Node.js 模块。

Electron 当前的最新版本为多少?
Electron 当前的最新版本为 4.0.1 (当前时间为 2019 年 1 月 6 号)

# 环境搭建

back

安装electron
克隆一个仓库快速启动一个项目
模板代码了解

# 安装electron

back

npm install -g electron

`$ npm install -g cnpm --registry=https://registry.npm.taobao.org`
`$ npm config set registry https://registry.npm.taobao.org`

1
2

或者 cnpm install -g electron
执行完上述命令后可用cnpm命令，更快

# 克隆一个仓库快速启动一个项目

back

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
cd electron-quick-start

# 安装依赖并运行
npm install && npm start

1
2
3
4
5
6
7
8

# 模板代码了解

back

上截图的4个标签对应的文件是全村的核心文件，开发electron都是根据这几个进行扩展的

package.json
存储的是整个app的基本信息，就跟我们的个人介绍是一样的
index.html_renderer.js
index.html和renderer.js是渲染层，也就是我们能看得见的层级，基本的视觉和交互操作都在这里编写
main.js
是主进程，相当于后台控制程序，这部分是electron的核心部分

# electron_forge

back

electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行、打包 electron 项目

npm install -g electron-forge
electron-forge init my-new-app
cd my-new-app
npm start

1
2
3
4

# Electron运行流程

back

Electron主进程和渲染进程
Electron渲染进程中通过Nodejs读取本地文件
Electron开启调试模式

# Electron主进程和渲染进程

back

Electron 运行 package.json 的 main 脚本的进程被称为主进程。
在主进程中运行的脚本通过创建 web 页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
由于 Electron 使用了 Chromium(谷歌浏览器)来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中。
主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow实例被销毁后，相应的渲染进程也会被终止

进程:进程是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
线程:在一个程序里的一个执行路线就叫做线程(thread)。更准确的定义是: 线程是“一个进程内部的控制序列”。
线程和进程:一个程序至少有一个进程,一个进程至少有一个线程

# Electron渲染进程中通过Nodejs读取本地文件

back

在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。然而 Electron 的用户在 Node.js 的 API支持下可以在页面中和操作系统进行一些底层交互。
Nodejs 在主进程和渲染进程中都可以使用。渲染进程因为安全限制，不能直接操作生 GUI。虽然如此，因为集成了 Nodejs，渲染进程也有了操作系统底层 API的能力，Nodejs 中常用的 Path、fs、Crypto 等模块在 Electron 可以直接使用，方便我们处理链接、路径、文件 MD5 等，同时 npm 还有成千上万的模块供我们选择。

# Electron开启调试模式

back

mainWindow.webContents.openDevTools();

# Electron模块介绍

back

Electron主进程和渲染进程中的模块
ElectronRemote模块
通过BrowserWindow打开新窗口

Electron 模块介绍、remote 模块、通过 BrowserWindow 打开新窗口

# Electron主进程和渲染进程中的模块

back

# ElectronRemote模块

back

remote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径
Electron 中, 与 GUI 相关的模块(如 dialog, menu 等)只存在于主进程，而不在渲染进程中。为了能从渲染进程中使用它们，需要用ipc模块来给主进程发送进程间消息。使用 remote 模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于 Java 的 RMI

# 通过BrowserWindow打开新窗口

back

Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口

# 自定义顶部菜单_右键菜单

back

主进程中调用Menu模块_自定义软件顶部菜单

back

Electron 中 Menu 模块可以用来创建原生菜单，它可用作应用菜单和 context 菜单

这个模块是一个主进程的模块，并且可以通过 remote 模块给渲染进程调用

# Electron

# 开发环境配置

# 创建应用以及编码

# 应用运行以及打包发布

# builder

# NPM下载的问题

# packager

# 总结

# 从0到1

# 前言

# 环境搭建

# 安装electron

# 克隆一个仓库快速启动一个项目

# 模板代码了解

# electron_forge

# Electron运行流程

# Electron主进程和渲染进程

# Electron渲染进程中通过Nodejs读取本地文件

# Electron开启调试模式

# Electron模块介绍

# Electron主进程和渲染进程中的模块

# ElectronRemote模块

# 通过BrowserWindow打开新窗口

# 自定义顶部菜单_右键菜单

# 主进程中调用Menu模块_自定义软件顶部菜单