TNotes

Appearance

to top

TNotes.electron ​

1. TNotes.electron 笔记简介 ​

2. Electron 学习资源 ​

3. Electron 应用 ​

4. Electron 核心概念 ​

5. Electron 应用的最小组成 ​

6. contextBridge 上下文桥接 ​

7. IPC 基础 ​

8. IPC 进阶 ​

9. 窗口 ​

9.1. 不同系统的窗口行为兼容适配 ​

9.2. 窗口首次加载的白屏问题 ​

9.3. 无边框窗口 ​

9.4. 窗口层级 ​

  • 0017. 窗口置顶
    • 1. 🔗 links
    • 2. 💻 demo
    • 本文介绍了两种使窗口置顶的方式，以及它们之间的一些区别。
    • 做法 1：在 new BrowserWindow 的时候，丢一个配置项 alwaysOnTop: true 进去，暴力置顶。
    • 做法 2：通过 BrowserWindow 实例 win 的 setAlwaysOnTop 方法实现置顶，可以进行更细粒度的控制置顶的层级。

10. 菜单 ​

10.1. 不同系统的菜单适配 ​

  • 0010. macos 应用菜单第一项的问题
    • 1. 📺 视频
    • 2. 🔗 links
    • 3. 💻 demo1
    • 4. 💻 demo2
    • 5. 🤔 问：在 macos 中，第一项菜单的名称如何自定义呢？
    • macos 应用菜单第一项的有什么问题【demo1】
    • 如何解决 macos 应用菜单第一项的有什么问题【demo2】
    • 【demo1】介绍了 macos 应用菜单第一项的问题 —— 始终显示应用程序的名称，我们配置的 label 不生效。
    • 【demo2】介绍了让我们配置的菜单项信息能够完整展示出来的一种解决方案 —— 对 macos 特殊处理，往菜单列表中 unshift 一项内容作为第一项。
    • Q：实际开发中会存在这个问题吗？应该如何解决呢？
    • A：不存在，解决方式也很简单。
    • 在实际开发中会使用一些主流工具（比如 electron-builder）来出包，这时候 macos 菜单的第一项可以很方便地自定义配置，只需要配置 pageage.json 中的 productName 即可。
    json
    {
  // ...
  "productName": "xxx", // 在这里配置你的应用名称
  // ...
}

10.2. 页面右键菜单 ​

  • 0012. 使用 Menu 模块实现页面中的右键菜单
    • 1. 🔗 links
    • 2. 💻 demo
    • 在页面上创建右键菜单，这是桌面端应用中很常见的一个功能点。本文的介绍了如何使用 Menu 模块来创建一个右键菜单。
    • 本节介绍如何如何使用 Menu 模块来创建一个右键菜单。这里提到的右键菜单，又称为上下文菜单，也就是你在一些应用程序的界面上，点击鼠标右键所弹出的内容。

10.3. Dock 菜单 ​

10.4. 自定义菜单 ​

10.5. Tray 菜单 ​

11. app ​

11.1. 路径 ​

12. 快捷键 ​

12.1. 页面级别 ​

  • 0023. 页面级别的快捷键
    • 1. 🔗 links
    • 2. 💻 demo
    • 本节通过一个很简单的 demo，介绍如何实现页面级别的快捷方式。
    • 全局快捷键可以使用 Electron 提供的模块 globalShortcut 来实现，这是一个主进程模块。但是，就文档中要求的页面级别的快捷方式，完全可以使用原生的 Web API window.onkeydown = function(e) { ... } 来实现。

12.2. 全局级别 ​

  • 0022. 全局级别的快捷键
    • 1. 🔗 globalShortcut
    • 2. 💻 demo
    • 学习如何注册全局（系统）级别的快捷方式
    • 全局级别的快捷键，也称系统级别的快捷键，这玩意儿在很多桌面应用程序中多多少少都会有一些。对于一些常用的操作和交互行为，绑定好快捷键，还是蛮必要的。
    • globalShortcut 是一个主进程中的模块，其作用是 在应用程序没有键盘焦点时，监听键盘事件。
    • Q：什么叫“应用程序没有键盘焦点”？
    • A：就是你当前鼠标点击的位置并非该应用，焦点不在这个应用身上。

13. 剪切板 ​

14. 系统通知 ​

15. 桌面视频流 ​

16. 插件化 ​

16.1. 集成浏览器插件 ​

17. 其它功能 ​

17.1. webContents startDrag 原生文件拖放 ​

18. 第三方库 ​

18.1. electron-reload ​

18.2. electron-builder ​

19. 小练习 ​

19.1. 桌面时钟 ​

19.2. 微信读书助手 ​

19.3. 自动定时截图工具 ​

  • 0033. ScreenCaptureApp
    • demo - 自动截图程序
    • 目前在测试 nodejs 的第三方库，看下是否能够支持实现定时定区域自动截图的功能，如果表现良好，可以考虑将其集成到 electron 中，出一个桌面端的自动截图工具。
    • 应用场景：看外文视频的时候，自动定时截字幕。
    • 功能：
      • 定时截图
      • 定区域截图
      • ORC 识别（识别字幕，去重）