Winds 2.1：使用React在Electron中为macOS构建Touch Bar支持

去年，苹果在MacBook Pro上发布的触控条是技术/硬件领域最新和最酷的创新之一。 随着这些机器变得越来越流行，越来越多的应用程序正在使用触摸栏以新的角度与他们的用户进行交互。 当我们观察到这种趋势不断发展时，我们认为应对自己似乎是一个有趣的挑战，因为过去几个月我们的宠物项目Winds 2.0于本月初首次亮相。

随着我们继续根据社区的反馈在Winds上进行迭代，现在似乎是在Winds 2.1中启动对macOS上的触摸条控件的支持的绝佳时机。 进入它，似乎就像是小菜一碟。 但是，我们不可能错得更多。 macOS和Electron之间的API通信远未完成。 希望我们会在不久的将来看到一些变化，以便在macOS和Electron之间获得更好的支持。

目前，我们已经为该问题提出了一个不错的解决方案，该问题使我们能够在Electron和macOS触摸栏之间进行双向通信。 为此，我们严重依赖三个主要的电子组件：

1. （有限的） 触摸栏 API 由Electron提供
2. ipcMain模块，处理从渲染器进程（网页）发送的异步和同步消息
3. ipcRenderer模块，提供了一些方法，使您可以将同步和异步消息从渲染器进程（网页）发送到主进程（ipcMain）。

在本文中，我们将深入研究如何完成此任务。 我们开始做吧。

ipcMain模块

ipcMain模块是EventEmitter类的实例。 在主流程中使用时，它处理从渲染器流程（网页）发送的异步和同步消息。 从渲染器发送的消息被发送到此模块，并由事件处理程序接收，然后传递给函数以进行进一步处理。

从Electron发送和接收

在/app/public/electron.js中 ，一旦窗口准备显示，我们将初始化以下代码：

event属性指定发生了什么，而args可以是单个值或键-值对的对象。 对于Winds，我们选择使用一个对象，以便可以传递其他元数据（来自前端），例如当前的剧集标题和播客名称。

ipcRenderer模块

ipcRenderer模块是EventEmitter类的实例。 它提供了一些方法，使您可以将同步消息和异步消息从渲染器进程（网页）发送到主进程（Electron）。

了解沟通的工作方式是我们获得媒体控制支持的第一步。 为了更好地理解它是如何工作的，让我们看一些简短的代码示例：

从React发送和接收

在/app/src/components/Player.js中 ，我们使用window.ipcRenderer ，因为ipcRenderer不能直接使用，因此需要我们将其从window对象中拉出：

和

因此，说完并完成之后，我们可以使用播放器上下文来区分播放情节和暂停情节。 看起来像这样：

反应生命周期事件

在componentDidMount（）上 ，我们使用以下处理程序来确保接收到我们的传入事件。

注意 ：我们通过 is-electron 节点模块将 代码包装在Electron检查中， 以确保仅在Electron环境中执行此操作-这很重要，因为我们拥有 该应用程序的 Web 版本 和 本机版本 。

在componentWillUnmount（）上 ，我们使用以下处理程序来确保销毁所有侦听器：

电子触控栏API

正如本文前面部分所指出的，我们在electron.js文件中初始化了ipcMain。 但是，等等，还有更多……除了切换触摸条图像和处理触摸条事件之外，我们还有一部分代码专用于处理传入（和传出）消息：

该函数应该放在您的main.js文件中，或者在我们的示例中，在electron.js文件中。

最终产品

所有这些结合在一起为Winds 2.1提供了很棒的触摸条功能，使我们的用户可以暂停和播放Winds中的播客片段，查看当前正在播放的播客，以及向前和向后搜索。

随着我们继续构建该应用程序并接收来自我们敬畏社区的反馈 ，我们希望继续为用户添加新的方式来与触摸栏进行交互，并使人们对与Winds的每次交互感到惊喜。

总结思想

我希望这个迷你教程可以帮助您阐明主进程（电子）和渲染器（React）之间的通信。 如前所述，API尚不完全存在，因此您可能会遇到一些麻烦–请随时在评论中发表； 我很乐意提供帮助！

如果您认为我错过了任何事情，请随时在下面的评论中添加一行，或者在Twitter上找到我- @NickParsons 。

From: https://hackernoon.com/winds-2-1-building-touch-bar-support-for-macos-in-electron-with-react-e10adb811c91