翻译 | 《JavaScript Everywhere》第18章带Electron的桌面应用程序

时间 2020-12-06

标签 javascript html 前端 java node git github web shell npm 栏目 JavaScript 繁體版

原文原文链接

翻译 | 《JavaScript Everywhere》第18章带Electron的桌面应用程序javascript

写在最前面

你们好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。html

为了提升你们的阅读体验，对语句的结构和内容略有调整。若是发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，能够在评论区留言，或者加个人微信：code_maomao，欢迎相互沟通交流学习。前端

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦java

第18章带Electron的桌面应用程序

我第一次接触我的计算机是在一个充满Apple II机器的学校实验室中进行的。node

每周一次，我和个人同窗被老师带进教室，给了一些软盘，并给出了有关如何加载应用程序（一般是Oregon Trail）的粗略说明。在这些课程上，除了记得本身发呆以外，我对其余事情记不清了。自1980年代中期以来，我的计算机已经走了很长一段路，可是咱们仍然须要依靠桌面应用程序来执行许多任务。git

一般，我可能会访问电子邮件客户端、文本编辑器、聊天客户端、电子表格软件、音乐流服务以及其余多个桌面应用程序。通常，这些应用程序具备与Web应用程序等效的功能，可是桌面应用程序的便利性和集成性能够为用户带来不少好处。可是，多年来，建立这些应用程序的能力一直很是缺少。值得庆幸的是，今天，咱们可以使用网络技术来构建功能全面的桌面应用程序，并且学习曲线很小。github

咱们正在构建什么

在接下来的几章中，咱们将为Notedly的社交笔记应用程序构建一个桌面客户端。咱们的目标是使用JavaScript和Web技术来开发桌面应用程序，用户能够下载并安装在计算机上。目前，该应用程序将是一个简单的实现，它将咱们的Web应用程序包装在桌面应用程序shell中。以这种方式开发咱们的应用程序将使咱们可以快速将桌面应用程序发送给感兴趣的用户，同时为咱们提供了之后为桌面用户引入自定义应用程序的灵活性。web

咱们将如何构建它

要构建咱们的应用程序，咱们将使用Electron，它是一个开放源代码的框架，用于使用Web技术构建跨平台的桌面应用程序。它能够利用Node.js和Chrome的基础浏览器引擎Chromium来工做。shell

这意味着做为开发人员，咱们可使用浏览器、Node.js和特定于操做系统的功能，而这些功能一般在Web环境中不可用。Electron最初是由GitHub为Atom文本编辑器开发的，但此后一直用做大小应用程序的平台，包括Slack，VS Code，Discord和WordPress Desktop。npm

入门

在开始开发以前，咱们须要将项目启动程序文件复制到咱们的电脑上。

项目的源代码包含了开发应用程序所需的全部脚本和对第三方库的引用。

要将代码克隆到咱们的本地计算机，请打开终端，切换到保存项目的目录，而后git clone项目存储库。若是你已经研究过API和Web章节，则可能已经建立了一个 notedly目录来保持项目代码的有条理：

$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/desktop.git
$ cd desktop
$ npm install

安装第三方依赖项

经过制做本书的入门代码的副本，并在目录中运行npm install，你无需为任何第三方依赖项再次运行npm install。

该代码的结构以下：

/src

这是你随书一块儿进行开发的目录。

/solutions

该目录包含每章的解决方案。
若是你卡住了，这些能够供你参考。

/final

该目录包含最终的工做项目。

建立项目目录并安装依赖项以后，咱们就能够开始开发了。

咱们的第一个电子应用程序

将咱们的代码存储库克隆到咱们的电脑后，让咱们开发咱们的第一个Electron应用程序。若是你在src目录中查找，则会看到其中有一些文件。index.html文件包含了HTML标记。目前，该文件将用做Electron的“渲染器过程”，这意味着它将是咱们Electron应用程序显示为窗口的网页。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Notedly Desktop</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

咱们将在index.js文件中设置咱们的Electron应用程序。在咱们的应用程序中，该文件将包含Electron所谓的“主进程”，它定义了应用程序shell。主要过程经过在Electron中建立一个BrowserWindow实例来工做，该实例用做应用程序shell。

index.js与main.js

在咱们的案例应用中的其余部分都是用的index.js命名，可是一般在软件开发中命名main.js来命名“主程序”。让咱们设置主要过程以显示包含HTML页面的浏览器窗口。首先，导入Electron的应用程序，而后写src/index.js中的browserWindow功能：

const { app, BrowserWindow } = require('electron');

如今，咱们能够定义应用程序的browserWindow并定义应用程序将加载的文件。在src/index.js中，添加如下内容：

const { app, BrowserWindow } = require('electron');
// to avoid garbage collection, declare the window as a variable
let window;
// specify the details of the browser window
function createWindow() {
window = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// load the HTML file
window.loadFile('index.html');
// when the window is closed, reset the window object
window.on('closed', () => {
window = null;
});
}
// when electron is ready, create the application window
app.on('ready', createWindow);

有了这个，咱们开始准备在本地运行咱们的桌面应用程序。在终端应用程序中，从项目目录中运行如下命令：

$ npm start

该命令将运行电子src/index.js，启动咱们应用程序的开发环境版本（请参阅图18-1）。

图18-1。运行启动命令将启动咱们的“ Hello World” Electron应用程序

macOS应用程序窗口详细信息

macOS处理应用程序窗口的方式与Windows不一样。当用户单击“关闭窗口”按钮时，应用程序窗口将关闭，但应用程序自己不会退出。单击macOS扩展坞中的应用程序图标将从新打开应用程序窗口。Electron容许咱们实现此功能。将如下内容添加到src/index.js文件的底部：

// quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS only quit when a user explicitly quits the application
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// on macOS, re-create the window when the icon is clicked in the dock
if (window === null) {
createWindow();
}
});

添加此功能后，你能够经过退出应用程序并使用npm start命令从新运行它来查看这些更改。如今，若是用户正在使用macOS访问咱们的应用程序，则他们在关闭窗口时将看到预期的行为。

开发者工具

因为Electron基于Chromium浏览器引擎（Chrome，Microsoft Edge，Opera和许多其余浏览器），它还使咱们可以使用Chromium的开发人员工具。这使咱们可以执行与浏览器环境中相同的全部的JavaScript调试。让咱们检查咱们的应用程序是否处于开发模式，若是是，请在应用程序启动时自动打开开发工具。

要执行此检查，咱们将使用electronic-util库。这是一小部分的实用程序，可以让咱们轻松检查系统条件并简化常见Electron的样式代码。

如今，咱们将使用is模块，这将使咱们可以检查咱们的应用程序是否处于开发模式。

在咱们的src/index.js文件的顶部，导入模块：

const { is } = require('electron-util');

如今，在咱们的应用程序代码中，咱们能够在window.loadFile(index.html) 加载咱们的HTML文件，当应用程序处于开发环境中时，它将打开开发工具（图18-2）：

// if in development mode, open the browser dev tools
if (is.development) {
window.webContents.openDevTools();
}

图18-2。如今，当咱们在开发过程当中打开应用程序时，浏览器开发工具将自动打开。

Electron安全警告

你可能会注意到，当前咱们的Electron应用程序显示了与不安全的内容安全策略（CSP）相关的安全警告。咱们将在下一章中解决此警告。

经过轻松访问浏览器开发工具，咱们为开发客户端应用程序作好了充分的准备。

Electron API

桌面开发的优势之一是，经过Electron API，咱们能够访问操做系统级别的功能，而这些功能在Web浏览器环境中是不可用的，其中包括：

通知事项
本机文件拖放
macOS暗模式
自定义菜单
健壮的键盘快捷键
系统对话框
应用托盘
系统信息

你能够想象，这些选项使咱们可以为桌面客户端添加一些独特的功能并改善用户体验。咱们不会在简单的示例应用程序中使用它们，可是你须要熟悉它们。Electron的文档提供了每一个Electron API的详细示例。此外，Electron团队还建立了electron-api-demos，这是一个功能齐全的Electron应用程序，演示了Electron API的许多独特功能。

结论

在本章中，咱们探讨了使用Electron经过Web技术构建桌面应用程序的基础。Electron环境为咱们（做为开发人员）提供了一个向用户提供跨平台桌面体验的机会，而无需学习多种编程语言和操做系统的复杂性。借助咱们在本章中探索的简单设置以及Web开发的知识，咱们为构建健壮的桌面应用程序作好了充分的准备。在下一章中，咱们将研究如何将现有的Web应用程序合并到Electron Shell中。

若是有理解不到位的地方，欢迎你们纠错。若是以为还能够，麻烦你点赞收藏或者分享一下，但愿能够帮到更多人。

翻译 | 《JavaScript Everywhere》第18章 带Electron的桌面应用程序