一、前言
通过前面章节的学习,我想大家对electron的基本使用方法、整体运行逻辑已经有了一定程度上的了解。
对于开发桌面应用来说,除了前面基于框架本身的东西,事实上还有很多是基于系统的。
比如“全局快捷键”“托盘”“主题”等等,这些都是特定于操作系统的,而Electron只是将这些功能封装了一遍,让我们可以在自己的软件中非常方便的使用。
但要注意:本文中所有涉及到与系统交互的,都是需要在主进程代码中完成的。
其原因也已经在前文中说的很清楚了,渲染进程是没有权限访问这些的,如果希望渲染进程控制,那么就需要通过渲染进程与主进程之间的通信,间接使用、访问。
二、应用主题
很多成熟的应用一般都会有暗、亮两套主题色,同时如果你熟悉电脑的话,会发现其实系统本身也是有暗色主题、亮色主题两类的。
所以就有这样一个需求:如果用户系统是暗色调主题,那我应用就自动应用暗色调主题,亮色调也是同理。
而在Electron中可以非常方便的做到这一点:Dark Mode。
对于本地界面来说,比如文件选择器、对话框等等,这些本身就是调用的系统功能,所以这些东西的样式并不需要我们去调整。
我们需要调整样式的只有内容区域内的东西。
按官方文档的意思,想要实现我们自定义样式自动适应系统,只需要使用一个css的媒体查询即可:prefers-color-scheme。
比如示例代码:
如果你想要让某个标签在暗模式下应用不同的样式,那么只需要使用媒体查询prefers-color-scheme
即可。
不会媒体查询的可以参考文章:css响应式详解。
上面是自动跟随系统主题切换的方式,如果你还想让用户可以在应用内主动切换本应用的主题,那么可以使用nativeTheme。
具体来说就是在主进程中这样用:
它有三个属性值,其默认为system
,也就是跟随系统,但你可以主动设置它的值为dark
还是light
,分别对应暗色调主题与亮色调主题。
注意:以上步骤仅仅只是切换前面通过媒体查询prefers-color-scheme
的值,想要真正应用暗模式还需要你自己手动为标签添加暗色调的样式。
三、设备访问
如果你的应用涉及控制一些硬件,那么这就很必要了,它可以帮助你非常便捷的访问、使用当前系统上的设备:设备访问。
比如官方示例中的蓝牙设备,事实上其使用的是chrome本身就支持的能力:通过 JavaScript 与蓝牙设备通信。
唯一有所区别的在于,你需要在electron主进程中在webContents
上监听一个select-blurtooth-device事件,用来处理结果:
官方文档中还包含了USB、串口设备的使用示例,如果有需要可以自己去研究一下。
四、快捷键
该部分官方文档为:键盘快捷键。
快捷键是很多程序都有的一个功能,主要分别两部分:
- 应用内快捷键
- 全局快捷键
其中应用内快捷键比较简单,如果某个应用的菜单功能,如果你想让用户使用快捷键来代替点击,就可以这样做:
也就是菜单中有一个叫做accelerator
的属性,官方文档这里还提供了不同平台设置不同按键的写法。
如果不是mac就是Alt+Cmd+I
,否则就是Alt+Shift+I
。
除了菜单外,如果你想要设置应用程序内的快捷键,那么最简单的方式就是在渲染进程代码中通过前端的事件: