开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
如何利用 Electron 开发一个桌面 APP - 技术翻译 - 开源中国社区

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

oschina 推荐于 4个月前 (共 20 段, 翻译完成于 01-05) 评论 19
收藏  
94
推荐标签: 待读

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

使用 Electron 就能做到。

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

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

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

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

边城
 翻译得不错哦!

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

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

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

边城
 翻译得不错哦!

什么是 Electron?

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

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

它还有其它一些特性:

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

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

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

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

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

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

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

我会在教程中使用 Github。

边城
 翻译得不错哦!

开始

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

按照下面的介绍将 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 开发者工具,这个工具的用法跟在浏览器中的开发者工具一样,再赞一个!

边城
 翻译得不错哦!

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 领域,这对你来说可能是一块新的领域!

边城
 翻译得不错哦!

什么是进程?

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

启动 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”消息只会出现在渲染模块中。

边城
 翻译得不错哦!

主进程

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

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

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

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

“main”: “main.js”,

修改为

“main”: “mainTest.js”,

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

注意,主进程只有一个。

边城
 翻译得不错哦!

渲染进程

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

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

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

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

这样考虑;

[来源: Kristian Poslek]

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

边城
 翻译得不错哦!

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

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

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

现在回到我们的代码!

边城
 翻译得不错哦!

私有化

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

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

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

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

边城
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(19)
Ctrl/CMD+Enter

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

这玩意写个hello world程序,打包出来都70/80+ MB大小。

引用来自“kchr”的评论

js 这玩艺,都把微软、google、mozilla 这些生死冤家,逼得联合起来,搞了一个 WebAssembly。
以前用 js 是历史原因,被逼无奈。
现在吃饱了撑的,用 js 开发桌面应用。
因为互联网发展,越来越多的需求并不是单机应用。网站开发,往往只是用一种语言,比如java、php,但是js是肯定都要会的。现在有写一个桌面应用来实现一些更强大的功能,或者更好的体验,让做java、php的人再去熟练是用c去开发,这是很麻烦的。
从nodejs、前端框架的流行就可以看出来,这样的情况是很多的。如果为了更好的性能、更复杂的功能,当然是c、c++之类的。但是一些相对简单的应用,当然能用最熟悉的语言效率更高、代价更低
哎,这啥时候的新闻了,旧闻了吧
我就问一下,git clone连个地址都没有,玩呢?:pensive:

引用来自“kchr”的评论

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

引用来自“TonyJian”的评论

因为互联网发展,越来越多的需求并不是单机应用。网站开发,往往只是用一种语言,比如java、php,但是js是肯定都要会的。现在有写一个桌面应用来实现一些更强大的功能,或者更好的体验,让做java、php的人再去熟练是用c去开发,这是很麻烦的。
从nodejs、前端框架的流行就可以看出来,这样的情况是很多的。如果为了更好的性能、更复杂的功能,当然是c、c++之类的。但是一些相对简单的应用,当然能用最熟悉的语言效率更高、代价更低
明白。可能现在做一个跨平台的轻量桌面应用,electron 算是最不坏的选择。我的意思是,赶快把 WebAssembly 搞出来,就可以扔掉 js,想用什么语言就用什么语言,统一编译到标准的字节码。
感觉这货比vb还复杂。

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

感觉这货比vb还复杂。
但是会js的人肯定比会vb的多
最近刚好要学,嘿嘿
看这switch case写法。。。。

引用来自“pigdonkey”的评论

这玩意写个hello world程序,打包出来都70/80+ MB大小。
现在很多应用程序都会比较大,这种程序相当于已经把运行时(包括GUI)都整合进去了,所以实际上并不大。

引用来自“kchr”的评论

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

引用来自“TonyJian”的评论

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

引用来自“kchr”的评论

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

引用来自“Zhengtank”的评论

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

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

看这switch case写法。。。。
作者故意留给读者去优化的
请问一下这个可以将clodop打包进去吗?

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

感觉这货比vb还复杂。
可惜了vb
还不如做浏览器插件呢
Clone地址都没了,补上
git clone https://github.com/electron/electron-quick-start
顶部