Electron 初探

本期 Chat，由葡萄城资深工程师 —— 刘涛，带来《Electron 初探》，届时我们将通过线上直播，讲解 Electron 入门技巧及使用场景。

• 讲师简介：GrapeCity SpreadJS 前端工程师，前 ThoughtWorks 开发工程师。
• 课程地址：http://live.vhall.com/878864086
• 课程大纲：
  • Electron 是什么/li>
  • Electron 可以用来做什么/li>
  • 为什么选择 Electron Electron 架构实现
  • Electron 实例演示操作

在开始学习 Electron 之前，您一定有这样的困惑：Electron 是什么lectron 能做什么多伟大的公司使用 Electron 框架的原因又是什么/p>

初探 Electron

Electron 是什么为何称之为“跨平台桌面浏览器”）

前端开发的魅力，在于开发者随时要面临全新技术的挑战！

简而言之，Electron JS 是一个运行时框架，它允许用户使用 HTML5、CSS 和 JavaScript 创建桌面套件应用程序，而大部分应用程序都是由两种非常受欢迎的技术混合而成：Node.js 和 Chromium。因此，您编写的任何 Web 应用程序都可以在 Electron JS 上正常运行。

Electron 的内置功能包括：

• 自动更新 – 使应用程序能够自动更新、升级
• 本机菜单和通知 – 创建本机应用程序菜单和上下文菜单
• 应用程序崩溃 告 – 您可以将崩溃 告提交给远程服务器
• 调试和分析 – Chromium 的内容模块可以发现性能瓶颈和运行缓慢的原因。此外，您也可以在应用中使用自己喜欢的 Chrome 开发者工具
• Windows 安装程序 – 您可以快速而简单创建安装包

Electron 可以用来做什么哪些场景需要使用 Electron）

2 WebTorrentWebTorrent，作为第一个在浏览器中运行的 torrent 客户端，是一个完全由 JavaScript 编写并使用 WebRTC 进行点对点传输的客户端应用。无需任何插件，扩展或安装，WebTorrent 将用户链接到分散的浏览器到浏览器 络，以确保有效的文件传输。

WebTorrent 使用 Electron 框架开发，使其尽可能轻量、无广告且开源。此外，使用 Electron 还有助于流式传输，并充当混合客户端，将应用程序连接到所有流行的 BitTorrent 和 WebTorrent 络。

3 WordPress

虽然 Slack Desktop 融合了很多技术，但大多数资源文件和代码都是远程加载的，它们结合了 Chromium 的渲染引擎和 Node.js 运行时和模块系统。

5 WhatsApp

主进程

为了保持进程通信，Electron 有一个进程间通信系统（IPC 也就是内部进程通信）。您可以使用 IPC 在主进程和渲染进程之间传递信息。

Electron 进程通信的实现方式：

• 主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
• 主进程管理所有的 web 页面和它们对应的渲染进程。 每个渲染进程都是独立的，它只关心它所运行的 web 页面。
• 在页面中调用与 GUI 相关的原生 API 是不被允许的，因为在 web 页面里操作原生的 GUI 资源是非常危险的，而且容易造成资源泄露。 如果你想在 web 页面里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

说句题外话：在两个 页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。 其中比较好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB，但这些不是今天的主题。

如何构建 Electron 系统架构/h4>

为了降低构建整个 Chromium 带来的复杂度，Electron 通过 libchromiumcontent 来访问 Chromium 的 Content API。libchromiumcontent 是一个独立的、引入了 Chromium Content 模块及其所有依赖的共享库。用户不需要一个强劲的机器来构建 Electron。

Electron 只用了 Chromium 的渲染库而不是其全部组件。 这使得升 Chromium 更加容易，但也意味着 Electron 缺少了 Google Chrome 里的一些浏览器相关的特性。

打包

原来打包步骤略微繁琐，如今由于 区发展，产生了很多优秀的打包工具，让我们可以不用关注很多细节，（比如 asar）

我们仅需做的 ：将 app 的目录结构整理好，提供对应的资源，如 icon 等，然后使用工具制作镜像即可将资源打包成为各个平台下的 APP 应用。

打包工具的选择

阅读全文: http://gitbook.cn/gitchat/activity/5d5f6b90437e7f3d7f8a90de

相关资源：天猫店铺设计数据分析谋库助手v1.2.12.8-统计分析代码类资源-CSDN…