7. Electron功能速览

一、前言

通过前面章节的学习,我想大家对electron的基本使用方法、整体运行逻辑已经有了一定程度上的了解。

对于开发桌面应用来说,除了前面基于框架本身的东西,事实上还有很多是基于系统的。

比如“全局快捷键”“托盘”“主题”等等,这些都是特定于操作系统的,而Electron只是将这些功能封装了一遍,让我们可以在自己的软件中非常方便的使用。

但要注意:本文中所有涉及到与系统交互的,都是需要在主进程代码中完成的。

其原因也已经在前文中说的很清楚了,渲染进程是没有权限访问这些的,如果希望渲染进程控制,那么就需要通过渲染进程与主进程之间的通信,间接使用、访问。

二、应用主题

很多成熟的应用一般都会有暗、亮两套主题色,同时如果你熟悉电脑的话,会发现其实系统本身也是有暗色主题、亮色主题两类的。

所以就有这样一个需求:如果用户系统是暗色调主题,那我应用就自动应用暗色调主题,亮色调也是同理。

而在Electron中可以非常方便的做到这一点:Dark Mode

对于本地界面来说,比如文件选择器、对话框等等,这些本身就是调用的系统功能,所以这些东西的样式并不需要我们去调整。

我们需要调整样式的只有内容区域内的东西。

按官方文档的意思,想要实现我们自定义样式自动适应系统,只需要使用一个css的媒体查询即可:prefers-color-scheme

比如示例代码:

image-20240216095857643

如果你想要让某个标签在暗模式下应用不同的样式,那么只需要使用媒体查询prefers-color-scheme即可。

不会媒体查询的可以参考文章:css响应式详解

上面是自动跟随系统主题切换的方式,如果你还想让用户可以在应用内主动切换本应用的主题,那么可以使用nativeTheme

具体来说就是在主进程中这样用:

image-20240216100624987

它有三个属性值,其默认为system,也就是跟随系统,但你可以主动设置它的值为dark还是light,分别对应暗色调主题与亮色调主题。

注意:以上步骤仅仅只是切换前面通过媒体查询prefers-color-scheme的值,想要真正应用暗模式还需要你自己手动为标签添加暗色调的样式。

三、设备访问

如果你的应用涉及控制一些硬件,那么这就很必要了,它可以帮助你非常便捷的访问、使用当前系统上的设备:设备访问

比如官方示例中的蓝牙设备,事实上其使用的是chrome本身就支持的能力:通过 JavaScript 与蓝牙设备通信

唯一有所区别的在于,你需要在electron主进程中在webContents上监听一个select-blurtooth-device事件,用来处理结果:

image-20240216102525512

官方文档中还包含了USB、串口设备的使用示例,如果有需要可以自己去研究一下。

四、快捷键

该部分官方文档为:键盘快捷键

快捷键是很多程序都有的一个功能,主要分别两部分:

  1. 应用内快捷键
  2. 全局快捷键

其中应用内快捷键比较简单,如果某个应用的菜单功能,如果你想让用户使用快捷键来代替点击,就可以这样做:

image-20240216104521547

也就是菜单中有一个叫做accelerator的属性,官方文档这里还提供了不同平台设置不同按键的写法。

如果不是mac就是Alt+Cmd+I,否则就是Alt+Shift+I

除了菜单外,如果你想要设置应用程序内的快捷键,那么最简单的方式就是在渲染进程代码中通过前端的事件:

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux