# 一、前言

• 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 被重命名为 Electron
• 2016 年 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

Preview

• 一、前言
• 二、环境搭建
• 三、Electron 运行流程
  • 3.1 Electron 运行的流程
  • 3.2 Electron 主进程和渲染进程
  • 3.3 Electron 渲染进程中通过 Nodejs 读取本地文件
  • 3.4 Electron 开启调试模式
• 四、Electron 模块介绍
  • 4.1 Electron 主进程和渲染进程中的模块
  • 4.2 Electron remote 模块
  • 4.3 通过BrowserWindow 打开新窗口
• 五、自定义顶部菜单/右键菜单
  • 5.1 主进程中调用Menu模块-自定义软件顶部菜单
  • 5.2 渲染进程中调用Menu模块
  • 5.3 渲染进程中自定义右键菜单
• 六、进程通信
  • 6.1 主进程与渲染进程之间的通信
    • 6.1.1 渲染进程给主进程发送异步消息
    • 6.1.2 渲染进程发送消息，主进程接收消息并反馈
    • 6.1.3 渲染进程给主进程发送同步消息
    • 6.1.4 渲染进程广播通知主进程打开窗口
  • 6.2 渲染进程与渲染进程之间的通信
    • 6.2.1 localstorage传值
    • 6.2.2 BrowserWindow和webContents方式实现
• 七、Electron Shell 模块
  • 7.1 Shell 模块使用
  • 7.2 Electron DOM <webview> 标签
  • 7.3 shell模块<webview>结合Menu模块使用案例
• 八、Electron dialog 弹出框
• 九、实现一个类似EditPlus的简易记事本代码编辑器
• 十、系统托盘、托盘右键菜单、托盘图标闪烁
• 十一、消息通知、监听网络变 化、网络变化弹出通知框
  • 11.1 消息通知
  • 11.2 监听网络变化
• 十二、注册全局快捷键/剪切板事件/nativeImage 模块
  • 12.1 注册全局快捷键
  • 12.2 剪切板clipboard、nativeImage 模块
• 十三、结合electron-vue
  • 13.1 electron-vue 的使用
  • 13.2 electron-vue 中使用 sass/ElementUi
  • 13.3 electron-vue 中隐藏顶部菜单隐藏
  • 13.4 使用electron-vue开发舆情监控系统
    • 13.4.1 配置开发环境
    • 13.4.2 主进程配置
    • 13.4.3 渲染进程配置
    • 13.4.4 多平台打包
      • 13.4.4.1 打包介绍
      • 13.4.4.2 修改应用信息
      • 13.4.4.3 打包遇到的问题
• 十四、更多参考

← Angular7入门总结篇浏览器缓存原理总结 →