如何利用 Electron 开发一个桌面 APP 已翻译 100%

oschina 投递于 01/03 14:44 (共 20 段, 翻译完成于 01-05)
阅读 8805
收藏 93
3
加载中

你是否曾经想过可以用 HTML、CSS 和 JavaScript 这些前端技术来构建跨平台的桌面应用?

使用 Electron 就能做到。

本文带着你深入 Electron 的核心概念。

阅读本文后,你会知道如何使用 Electron、HTML 和 CSS 构建跨平台桌面应用。

在开始之前,你可以提前看看我们在本教程中要构建的应用。

Hear Me Type [译者注:本文的示例应用名为 Hear Me Type] 功能简单直接,应用中每个键都会播放特有的声音。比如我按下了 “A”,应用会播放字母 A 特有的声音。

边城
边城
翻译于 01/03 15:12
1

该应用目前有两个版本可供下载:本教程的源码,以及一个推荐给更有经验的 Electron 用户的高级版本

因为我还在为改善应用以及添加一些新功能,所以代码会发生变化,请一定注意看看有哪些更新。

就此打住,我们现在开始学习 Electron 并用它来创建第一个应用!

边城
边城
翻译于 01/03 15:16
0

什么是 Electron?

Electron 是一个基于 Chrominum 和 Node.js 的跨平台桌面应用框架。

在这个框架中很容易构建基于 HTML、CSS 和 JavaScript 技术的跨平台应用。构建出来的应用会很好地兼容 Mac、Windows 和 Linux 操作系统。

它还有其它一些特性:

  • 自动更新 —— 应用支持自动更新

  • 原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单

  • 应用崩溃报告 —— 可以将崩溃报告提交到远程服务器

  • 调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。

  • Windows installer —— 可以快速便捷地创建安装包。

如果你对 Electron 的功能感到满意,我们就继续深入,创建一个简单的 Electron 应用。

动手之前需要先安装 Node.js。你还应该申请一个 GitHub 账户来保存和更新应用。虽然这个账户并不是必须的,但我非常建议你去申请一个。Github 是一个行业标准,学会使用 Github 非常重要。

我会在教程中使用 Github。

边城
边城
翻译于 01/03 15:28
0

开始

准备好之后,打开系统终端窗口。

按照下面的介绍将 Electron Quick Start 这个 Git 库克隆到计算机上。

我们会基于 Electron Quick Start 来创建自己的软件。

# Clone the Quick Start repository
git clone 
# Go into the repository
cd electron-quick-start
# Install the dependencies and run
npm install && npm start

完成上面的步骤之后,你会看到一个像浏览器窗口的应用打开。它确实是一个浏览器窗口!

这个窗口显示的样子在不同的操作系统上会有所不同。我选择使用 Windows 的经典样式。非常赞!

Quick-Start Electron 应用的主窗口

正如我之前所说,你可以在应用中使用 Chrome 开发者工具,这个工具的用法跟在浏览器中的开发者工具一样,再赞一个!

边城
边城
翻译于 01/03 15:51
2

Electron 应用程序架构

我们来看看这个应用的源代码及其文件结构。可以使用你自己喜欢的编辑器或者 IDE 打开项目,我使用 Atom …… 你猜到了 …… 它就是用 Electron 构建的![译者注:我比较喜欢 VSCode,也是基于 Electron 构建的]

新应用的目录和文件结构。

我们有一个基本的文件结构:

electron-quick-start

- index.html
- main.js
- package.json
- render.js

文件结构类似于我们创建网页的结构。

我们有:

  • index.html 是一个 HTML5 页面,它具有很重要的作用:提供画布

  • main.js 创建窗口并处理系统事件

  • package.json 是应用的启动脚本。它包含了应用的信息,在主进行中运行

  • render.js 处理应用的渲染进程

也许你对主进程和渲染进程存有疑问。它们到底是什么,用来干什么?

很高兴你有此疑问。注意了,如果你来自浏览器的 JavaScript 领域,这对你来说可能是一块新的领域!

边城
边城
翻译于 01/03 16:04
0

什么是进程?

看到“进程”这个词的时候,想像一下操作系统级的进程。那是运行在系统中的计算机程序实例。

启动 Electron 应用之后,查看 Windows 的任务管理器或者 macOS 的活动监视器,就可以看到与这个应用相关的进程。

这些进程都是并行运行的,为每个进程分配的内存和资源相互隔离。

如果我想创建一个 for 循环在渲染进程中逐步处理一些事件。

var a = 1;
for ( a = 1; a < 10; a ++) {
 console.log('This is a for loop');
}

这些改变只在渲染进程中有效,根本不会对主进行造成影响。“This is a for loop”消息只会出现在渲染模块中。

边城
边城
翻译于 01/03 16:10
0

主进程

主进程控制着应用的生命周期。它内置了完整的 Node.js API,可以打开对话框,创建渲染进程,还可以处理其它其它与操作系统的交互操作,包括启动和退出应用。

按照惯例,这个进程写在名为 main.js 的文件中。不过你想使用其它名字也没有问题。

你可以在 package.json 文件中配置主进程文件的名称。

试验一下,打开 package.json 并将

“main”: “main.js”,

修改为

“main”: “mainTest.js”,

启动应用看看它是否仍然正常运行。

注意,主进程只有一个。

边城
边城
翻译于 01/03 16:16
0

渲染进程

应用中的渲染进程是一个浏览器窗口。与主进程不同,可以存在多个独立的渲染进程。

因为渲染进程是各自独立的,如果其中一个崩溃了并不会影响到其它进程,这得益于 Chrominum 的多进程架构。

这些浏览器窗口就像演示网页一样,也可以被隐藏或自定义。

不过 Electron 内置了完整的 Node.js API,也就是说我们可以打开对话框或进行其它与操作系统的交互。

这样考虑;

[来源: Kristian Poslek]

还有一个问题,它们能以某种方式联系起来吗?

边城
边城
翻译于 01/03 16:22
1

这些进程都在独立运行,但他们仍然需要通信,因为它们负责不同的任务,这尤其需要通信。

为此,存在一个进程间的通信系统或者 IPC。你可以使用 IPC 在主进程和渲染进程间进行通信。对于这个知识点更深入一些的解释,请阅读 Christian Engvall 的文章

上面说的都是开发 Electron 应用的基础知识。

现在回到我们的代码!

边城
边城
翻译于 01/03 16:26
0

私有化

让我们给应用所在的目录起一个合适的名称。

将目录名从 electron-quick-start 改为 hear-me-type-tutorial。

重新在编辑器或 IDE 中打开这个目录,我们打开 package.json 来进一步定制应用标识。

package.json 包含了至关重要的应用信息。这里定义应用的名称、版本、主文件、作者、许可协议等。

边城
边城
翻译于 01/03 16:29
0
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(19)

xinyin025
xinyin025
Clone地址都没了,补上
git clone https://github.com/electron/electron-quick-start
Aorey
Aorey
还不如做浏览器插件呢
全体人员
全体人员

引用来自“gugu&gigi”的评论

感觉这货比vb还复杂。
可惜了vb
吴Yuan_小森森
吴Yuan_小森森
请问一下这个可以将clodop打包进去吗?
边城
边城

引用来自“开源中国马甲号”的评论

看这switch case写法。。。。
作者故意留给读者去优化的
边城
边城

引用来自“Zhengtank”的评论

我就问一下,git clone连个地址都没有,玩呢?:pensive:
一开始就给出来了“本教程的源码”
dolloyo
dolloyo

引用来自“kchr”的评论

js 这玩艺,都把微软、google、mozilla 这些生死冤家,逼得联合起来,搞了一个 WebAssembly。
以前用 js 是历史原因,被逼无奈。
现在吃饱了撑的,用 js 开发桌面应用。

引用来自“TonyJian”的评论

因为互联网发展,越来越多的需求并不是单机应用。网站开发,往往只是用一种语言,比如java、php,但是js是肯定都要会的。现在有写一个桌面应用来实现一些更强大的功能,或者更好的体验,让做java、php的人再去熟练是用c去开发,这是很麻烦的。
从nodejs、前端框架的流行就可以看出来,这样的情况是很多的。如果为了更好的性能、更复杂的功能,当然是c、c++之类的。但是一些相对简单的应用,当然能用最熟悉的语言效率更高、代价更低

引用来自“kchr”的评论

明白。可能现在做一个跨平台的轻量桌面应用,electron 算是最不坏的选择。我的意思是,赶快把 WebAssembly 搞出来,就可以扔掉 js,想用什么语言就用什么语言,统一编译到标准的字节码。
既然开发桌面应用了,为何还要绕个弯子等WebAssembly?直接编译成native不就好了……
antipro
antipro

引用来自“pigdonkey”的评论

这玩意写个hello world程序,打包出来都70/80+ MB大小。
现在很多应用程序都会比较大,这种程序相当于已经把运行时(包括GUI)都整合进去了,所以实际上并不大。
开源中国马甲号
开源中国马甲号
看这switch case写法。。。。
Daniel-01
Daniel-01
最近刚好要学,嘿嘿
返回顶部
顶部