我们是如何使用 Electron 构建 Linux 桌面应用程序的

Tutanota 是一种安全的开源电子邮件服务，它可通过浏览器使用，也有 iOS 和 Android 应用。其客户端代码在 GPLv3 下发布，Android 应用程序可在 F-Droid 上找到，以便每个人都可以使用完全与 Google 无关的版本。

由于 Tutanota 关注开源和 Linux 客户端开发，因此我们希望为 Linux 和其他平台发布一个桌面应用程序。作为一个小团队，我们很余搜肆快就排除了为 Linux、Windows 和 MacOS 构建原生应用程序的可能性，并决定使用 Electron 来构建我们的应用程序。

对于任何想要快速交付视觉一致的跨平台应用程序的人来说，Electron 是最适合的选择，尤其是如果你已经有一个 Web 应用程序，想要从浏览器 API 的束缚中摆脱出来时。Tutanota 就是这样一个案例。

Tutanota 基于 SystemJS 和 Mithril ，旨在为每个人提供简单、安全的电子邮件通信。 因此，它必须提供很多用户期望从电子邮件客户端获得的标准功能。

由于采用了现代 API 和标准，其中一些功能（如基本的推送通知、搜索文本和联系人以及支持双因素身份验证）很容易在浏览器中提供。其它功能（例如自动备份或无需我们的服务器中转的 IMAP 支持）需要对系统资源的限制性访问，而这正是 Electron 框架提供的功能。

虽然有人批评 Electron “只是一个基本的包装”，但它有明显的好处：

Tutanota 不依靠于大笔的投资资金，而是依靠社区驱动的项目。基于越来越多的用户升级到我们的免费服务的付费计划，我们有机地发展我们的团队。倾听用户的需求不仅对我们很重要，而且对我们的成功至关重要。

提供桌面客户端是 Tutanota 用户 最想要的功能 ，我们感到自豪的是，我们现在可以为所有用户提供免费的桌面客户端测试版。（我们还实现了另一个高度要求的功能 —— 搜索加密数据 —— 但这是另一个主题了。）

我们喜欢为用户提供签名版本的 Tutanota 并支持浏览器中无法实现的功能，例如通过后台进程推送通知。 现在，我们计划添加更多特定于桌面的功能，例如 IMAP 支持（而不依赖于我们的服务器充当代理），自动备份和离线可用性。

我们选择 Electron 是因为它的 Chromium 和 Node.js 的组合最适合我漏模们的小型开发团队，因为它只需要对我们的 Web 应用程序进行最小的更改。在我们开始使用时，可以将浏览器 API 用于所有功能特别有用，随着我们的进展，慢慢地用更多原生版本替换这些组件。这种方法对附件下载和通知特别方便。

我们知道有些人关注 Electron 的安全问题，但我们发现 Electron 在 Web 应用程序中微调访问的选项非常令人满意。你可以使用 Electron 的 安全文档 和 Luca Carettoni 的 Electron 安全清单 等资源，来帮助防止 Web 应用程序中不受信任的内容发生灾难性事故。

Tutanota Web 客户端从一开始就构建了一个用于进程间通信的可靠协议。我们利用 Web 线程在加密和请求数据时保持用户界面（UI）响应性。当我们开始实现我们的移动应用时，这就派上用场，这些应用程序使用相同的协议在原生部分和 Web 视图之间进行通信。

这就是为竖轿什么当我们开始构建桌面客户端时，很多用于本机推送通知、打开邮箱和使用文件系统的部分等已经存在，因此只需要实现原生端（Node.js）。

另一个便利是我们的构建过程使用 Babel 转译器 ，它允许我们以现代 ES6 JavaScript 编写整个代码库，并在不同环境之间混合和匹配功能模块。这使我们能够快速调整基于 Electron 的桌面应用程序的代码。但是，我们也遇到了一些挑战。

虽然 Electron 允许我们很容易地与不同平台的桌面环境集成，但你不能低估投入的时间！最后，正是这些小事情占用了比我们预期更多的时间，但对完成桌面客户端项目也至关重要。

特定于平台的代码导致了大部分阻碍：

由于用户对不同平台上的应用程序的某些（有时不直接兼容）行为的期望，此过程有点复杂。使三个版本感觉像原生的需要一些迭代，甚至需要对 Web 应用程序进行一些适度的补充，以提供类似于浏览器中的文本搜索的功能。

我们在 Electron 方面的经验基本上是积极的，我们在不到四个月的时间内完成了该项目。尽管有一些相当耗时的功能，但我们感到惊讶的是，我们可以轻松地为 Linux 提供一个测试版的 Tutanota 桌面客户端 。如果你有兴趣，可以深入了解 GitHub 上的源代码。

via: https://opensource.com/article/19/4/linux-desktop-electron

作者： Nils Ganther 选题： lujun9972 译者： wxy 校对： wxy

新建一个Java项乱判目，新建一个包，然后右键点击那个包，选择new ,在选择other，就会出现一个对话框，选择Java，visual class，出现一个对话框，填写名字，选择所要的窗体类型轮悔，如Swing的Frame，确定哗桐改后，就会出现Button等控件的。

上次我们提到了业界大名鼎鼎的Qt桌面级应用开发框架，不过Qt是基于c++进行开发的，c++的开发模式也并不是十分适用蔽芹携于现代这种短平快的软件开发模式，相比之下，electron是基于nodejs和 Chromium使用javascript，html和css来开发桌面应用的框架。

Electron的原理很简单，基本上就是使用我们常见的chrome浏览器的宏伏内核为基础通过nodejs和底层 *** 作系统进行 *** 作交互。

必要的准备内容不多，不管你是windows，linux还是mac只要安装最新版本的nodejs就可以了，除此之外确保你有npm和git

然后打开命令提示符输入

安装依赖的过程可能比较久，npm会自动安装一些windows的编译包。

安装成功并且运行了会提示入下图

实际上就是个chrome浏览器的壳子把html和css以及js绘制的UI显示出来，右边的debug工具都是和chrome里一模一样的。

当然我们也可以关闭它。显示的时候看起来就更加像是一个浏览器了。

electron的目录结构如下。

package.json是我们常见的npm包管理软件，这里主要是一些APP的应用信息，包的管理和开发用的脚本命令。在这里我们还要定义好main为main.js如果没有定义的话会默认启动index.js。这里和nodejs默认的情况首枯都差不多。

main.js是应用程序的主进程文件，这个主进程文件就是用来创建应用程序窗口和处理系统事件使用的文件。它看起来大概是下面这个样子。

这个文件显示主界面的信息内容。

就是图中红色箭头指示的位置。

electron想必qt开发起来就容易多了，因为我们可以通过html，css和javascript这样简单容易的语言开发跨平台的桌面应用，因为读取的是html文件，这还意味着我们可以更容易的在服务端实时更新数据内容。

---