winds7usb3.0
去年,苹果在MacBook Pro上发布了触摸条,这是科技/硬件领域最新和最酷的创新之一。 随着这些机器变得越来越流行,越来越多的应用程序正在使用触摸条以新的维度与用户交互。 当我们观察到这种趋势不断发展时,我们认为应对自己似乎是一个有趣的挑战,因为过去几个月我们的宠物项目Winds 2.0于本月初首次亮相。
随着我们继续根据社区的反馈在Winds上进行迭代,现在似乎是在Winds 2.1中启动对macOS上的触摸条控件的支持的绝佳时机。 进入它,似乎就像是小菜一碟。 但是,我们不可能错得更多。 macOS和Electron之间的API通讯还远远没有完成。 希望我们会在不久的将来看到一些变化,以便在macOS和Electron之间获得更好的支持。
目前,我们已经为该问题提出了一个不错的解决方案,该问题使我们能够在Electron和macOS触摸栏之间进行双向通信。 为此,我们严重依赖三个主要的电子组件:
- (有限的) 触摸栏 API 由Electron提供
- ipcMain模块,该模块处理从渲染器进程(网页)发送的异步和同步消息
- 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对象中拉出:
和
因此,说完并完成之后,我们可以使用播放器上下文来区分播放情节和暂停情节。 看起来像这样:
React生命周期事件
在componentDidMount()上 ,我们使用以下处理程序来确保接收到我们的传入事件。
注意 :我们通过 is-electron 节点模块将 代码包装在Electron检查中, 以确保仅在Electron环境中执行此操作-这很重要,因为我们拥有 该应用程序的 Web 版本 和 本机版本 。
在componentWillUnmount()上 ,我们使用以下处理程序来确保销毁所有侦听器:
电子触控栏API
正如本文前面部分所指出的,我们在electron.js文件中初始化了ipcMain。 但是,等等,还有更多……除了切换触摸条图像和处理触摸条事件之外,我们还有一部分代码专用于处理传入(和传出)消息:
该函数应该放在您的main.js文件中,或者在我们的示例中,在electron.js文件中。
最终产品
所有这些结合在一起为Winds 2.1提供了很棒的触摸条功能,使我们的用户可以暂停和播放Winds中的播客片段,查看当前正在播放的播客,以及向前和向后搜索。
随着我们继续构建该应用程序并收到来自我们敬畏社区的反馈 ,我们希望继续为用户添加新的方式来与触摸栏进行交互,并使人们对与Winds的每次交互感到惊喜。
总结思想
我希望这个迷你教程可以帮助您阐明主进程(电子)和渲染器(React)之间的通信。 如前所述,API尚不完全存在,因此您可能会遇到一些麻烦-请随时在评论中发布; 我很乐意提供帮助!
如果您认为我错过了任何事情,请随时在下面的评论中添加一行,或者在Twitter上找到我- @NickParsons 。
winds7usb3.0