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

写在最前面

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

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code\_maomao，欢迎相互沟通交流学习。

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

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

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

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

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

我们正在构建什么

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

我们将如何构建它

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

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

入门

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

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

要将代码克隆到我们的本地计算机，请打开终端，切换到保存项目的目录，然后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）。

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

图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();
}

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

图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的桌面应用程序

写在最前面

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

我们正在构建什么

我们将如何构建它

入门

安装第三方依赖项

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

index.js与main.js

macOS应用程序窗口详细信息

开发者工具

Electron安全警告

Electron API

结论

常见问题FAQ

掘金(毛小悠) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

写在最前面

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

我们正在构建什么

我们将如何构建它

入门

安装第三方依赖项

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

index.js与main.js

macOS应用程序窗口详细信息

开发者工具

Electron安全警告

Electron API

结论

常见问题FAQ

掘金(毛小悠) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式

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