文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏
参与翻译: learner (11)

什么是 Electron?

Electron 是一个程序库,通过它,你就可以使用 JavaScript、HTML 和 CSS 来编写桌面应用程序。这些应用程序可以被打包运行在Mac,Windows 和 Linux 操作系统的计算机上,还可以提交到 Mac 和 Windows 应用商店。

定义:

  • JavaScript,HTML 和 CSS 是 web 开发用到的编程语言, 这意味着他们是构建网站的基础块并且像 Chrome 之类的浏览器知道如何把这段代码转化为视觉图形。
  • Electron 是一个程序库 Electron 是可重用的代码,不需要您自己编写。您可以使用它并在它的基础之上建立您自己的项目。

资源:

第 1 段(可获 1.48 积分)

为什么这很重要?

通常情况下,每个操作系统的桌面应用程序都要通过其原生编程语言。这可能意味着有三个团队写了三个版本的应用程序。Electron 使您只需编写一次就可以适用于不同操作系统,而且支持使用 web 编程语言进行编写。

定义:

  • 原生(操作系统)编程语言 主流操作系统下用于编写桌面应用程序的语言: Mac, Objective C; Linux, C; Windows, C++.

这是怎么实现的?

Electron 结合了 Chromium 开源浏览器和带有一系列原生操作系统函数(打开文件对话框、通知、图标等等)的自定义 API 的 Node.js。

第 2 段(可获 1.16 积分)

Electron components

定义:

  • API 应用程序接口描述了一系列可供你使用的函数库中的函数。
  • Chromium 由 Google 创建,这是 Google 的 chrome 浏览器使用的开源库。
  • Node.js (或者简称 Node) 一个工具,可以通过他来使用 JavaScript 编写服务端程序,访问文件系统和网络(你的电脑也是一台服务器)。

资源:

开发过程是怎样的?

通过 Electron 开发就像在开发一个 web 页面,而且你可以直接在其中使用 Node,或者说,你可以使用 HTML 和 CSS 来为一个 Node 应用程序编写界面。你只需要为最新版本的 Chrome 这一个浏览器做设计(译注:不用考虑浏览器兼容问题)。

第 3 段(可获 1.49 积分)

定义:

  • Use Node in 这还不是全部!除了使用 Node 自带的完整的 API,你还可以使用超过 300,000 个已经被编写好并托管于 npm(Node 的包管理工具) 上模块。
  • One browser 并不是所有浏览器都是相同的,web 设计者和开发者经常要做一些额外的工作来使得一个网页在不同浏览器上看起来是一样的。
  • Latest Chrome 最新版 Chrome 支持超过 90% 的 JavaScript 最新更新的 ES2015 语法,也支持一些很酷的特性,比如 CSS 变量。

资源:

第 4 段(可获 1.28 积分)

前提

Electron 的两个组成部分分别是网站和 JavaScript,因此在开始之前,你需要有一些关于他们的经验。可以先去查看一下 HTML,CSS 和 JS 的教程,并且在你的电脑上安装 Node。 

定义:

  • Let's be real  学习网站开发和 Node 不是一夜之间的事情,希望下面的链接可以帮助你入门。

资源:

第 5 段(可获 1.3 积分)

两个进程

Electron 有两个进程:主进程和渲染进程。模块可以在单个或多个进程上工作。主进程工作在幕后,而渲染进程工作在你应用程序用户可以看到的每一个窗口。

定义:

  • 模块(Modules) Electron 的 API 根据他们的职责被组合到一起。例如 dialog 这个模块包含了所有本地对话框(打开文件框、提示框)的 API。

资源:

主进程

主进程通常就是一个名字叫 main.js 的文件,是每一个 Electron 应用程序的入口。他控制这应用程序的生命,从打开到关闭。它还会调用本地元素并创建应用程序中的每个新的渲染器进程。完整的 Node API 是内置的。

第 6 段(可获 1.6 积分)

main process diagram

定义:

  • 调用本地元素 打开对话框和其他本地操作系统的交互都是资源密集型的,所以这些操作都在主进程中完成,保证渲染进程不发生中断。

资源:

渲染进程

渲染进程也就是你创建的应用程序中的每一个浏览器窗口,以及一个一般名为 index.html 的文件。这些浏览器窗口用来显示你创建的 web 页面——不同于一般的 web 浏览器,在这里你可以使用完整的 Node API。

定义:

  • 每一个浏览器窗口 是一个独立的渲染进程,这意味着如果其中一个窗口崩溃,不会影响另一个窗口。
第 7 段(可获 1.16 积分)

资源:

可以这样来理解

在 Chrome (或者其他 web 浏览器中)每一个标签页和他显示的 web 页面就像是 Electron 中一个独立的渲染进程。如果你关闭了所有标签页,Chrome 这个程序仍然存在,这就像是 Electron 的主进程,然后你可以选择打开一个新的窗口或者退出程序。

Chrome comparison of the two processes

资源:

保持联系

因为主进程和渲染进程负责不同的任务,所以他们之间需要能够进行交流。IPC (进程间通信)解决了这个问题。主进程和渲染进程可以使用进程间通信传递消息。

第 8 段(可获 1.29 积分)

IPC diagram

定义:

  • IPC 主进程和渲染进程分别都有一个 IPC 模块可以使用。

接下来: 把它们结合到一起

把它们结合到一起

Electron 程序和 Node 程序一样使用 package.json 配置文件。在这个文件中你需要去定义主进程文件,这样 Electron 就知道应该从哪里启动你的程序。然后主进程就能创建渲染进程,你也就可以使用 IPC 在两者之间传递消息了。

Electron app components diagram

定义:

  • package.json 文件 这是一个 Node 程序的通用文件,其中包含了一些项目信息以及项目依赖的列表。

快速入门

Github 上的 Electron Quick Start 仓库里有一个最基本的 Electron 程序,其中包含着你在这篇文章中学到的 package.jsonmain.js 和 index.html 这三个文件——这篇文章真的是一个入门的好地方!还要查看一下你所选择的框架对应的样本模版。

第 9 段(可获 1.65 积分)

资源:

打包

当你的程序构建完成,你可以通过 Mac、Windows 或者 Linux 的命令行使用 electron-packager 工具来将其打包。把这个用于打包的程序的依赖脚本添加到 package.json 文件中。想要将你的程序提交到 Mac 和 Windows 的应用商店请参见下面的资源链接。

定义:

  • 命令行工具 这是一种通过终端传递命令进行交互的程序。

资源:

第 10 段(可获 1.04 积分)

更多资源

文章中提到的概念会让你走的更远,当然除了这些其实还有很多没有提到的,所以这里提供一些其他的资源供你参考。

资源:

本文由 @jllordOpen source on GitHub  为计算机发展而编写。

第 11 段(可获 0.63 积分)

文章评论