桌面环境集成 | Desktop Environment Integration

不同的操作系统提供了将桌面应用程序集成到桌面环境中的不同功能例如，在Windows上，应用程序可以在任务栏的JumpList中放置快捷方式，在Mac上，应用程序可以将自定义菜单放在停靠栏菜单中。

本指南解释了如何使用Electron API将您的应用程序集成到这些桌面环境中。

通知

请参阅通知

最近的文档（Windows和MacOS）

通过Windows和MacOS，可以轻松访问应用程序通过JumpList或Dock菜单打开的最近文档列表。

JumpList：

应用程序停靠菜单：

要将文件添加到最近的文档，您可以使用app.addRecentDocument API：

const {app} = require('electron')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')

您可以使用app.clearRecentDocuments API来清空最近的文档列表：

const {app} = require('electron')
app.clearRecentDocuments()

Windows Notes

为了能够在Windows上使用此功能，您的应用程序必须注册为文档文件类型的处理程序，否则该文件即使添加后也不会出现在JumpList中。您可以在应用程序注册（http://msdn.microsoft.com/en-us/library/windows/desktop/ee872121（v = vs.85％29.aspx））中注册您的应用程序。

当用户从JumpList单击一个文件时，应用程序的一个新实例将以该文件的路径作为命令行参数被添加启动。

MacOS备注

当从最近的文件菜单中请求文件时，模块的open-file事件app将被发出。

自定义Dock菜单（macOS）

macOS使开发人员能够为扩展坞指定自定义菜单，其中通常包含应用程序常用功能的一些快捷方式：

Terminal.app的Dock菜单：

要设置您的自定义停靠菜单，您可以使用app.dock.setMenu仅在macOS上可用的API：

const {app, Menu} = require('electron')

const dockMenu = Menu.buildFromTemplate([
  {label: 'New Window', click () { console.log('New Window') }},
  {label: 'New Window with Settings',
    submenu: [
      {label: 'Basic'},
      {label: 'Pro'}
    ]
  },
  {label: 'New Command...'}
])
app.dock.setMenu(dockMenu)

用户任务（Windows）

在Windows上，您可以在TasksJumpList 的类别中指定自定义操作，如从MSDN引用的那样：

应用程序根据程序的功能和用户需要处理的关键事项来定义任务。任务应该是上下文无关的，因为应用程序不需要为他们运行而运行。它们也应该是普通用户在应用程序中执行的统计上最常见的操作，例如撰写电子邮件消息或在邮件程序中打开日历，在文字处理器中创建新文档，以特定模式启动应用程序或者启动它的一个子命令。应用程序不应该使用标准用户不需要的高级功能或者注册等一次性操作来混淆菜单。不要将任务用于促销项目，如升级或特价优惠。强烈建议任务列表是静态的。不管申请的状态如何，它都应该保持不变。尽管可以动态更改列表，但应该考虑到这可能会使不期望目标列表部分的用户发生更改。

Internet Explorer的任务：

与macOS中的dock菜单是一个真正的菜单不同，Windows中的用户任务像应用程序快捷方式一样工作，当用户单击任务时，程序将使用指定的参数执行。

要为您的应用程序设置用户任务，您可以使用app.setUserTasks API：

const {app} = require('electron')
app.setUserTasks([
  {
    program: process.execPath,
    arguments: '--new-window',
    iconPath: process.execPath,
    iconIndex: 0,
    title: 'New Window',
    description: 'Create a new window'
  }
])

要清理任务列表，只需app.setUserTasks使用空数组调用即可：

const {app} = require('electron')
app.setUserTasks([])

即使在应用程序关闭后，用户任务仍将显示，因此应该存在为任务指定的图标和程序路径，直到应用程序卸载完毕。

缩略图工具栏

在Windows上，您可以在应用程序窗口的任务栏布局中添加带指定按钮的缩略图工具栏。它为用户提供了访问特定窗口命令的方法，而无需恢复或激活窗口。

从MSDN可以看出：

这个工具栏就是常见的标准工具栏常用控件。它最多有七个按钮。每个按钮的ID，图像，工具提示和状态都在结构中定义，然后传递给任务栏。应用程序可以根据当前状态显示，启用，禁用或隐藏缩略图工具栏中的按钮。例如，Windows Media Player可能会提供标准的媒体传输控件，如播放，暂停，静音和停止。

Windows Media Player的缩略图工具栏：

您可以使用BrowserWindow.setThumbarButtons在应用程序中设置缩略图工具栏：

const {BrowserWindow} = require('electron')
const path = require('path')

let win = new BrowserWindow({
  width: 800,
  height: 600
})

win.setThumbarButtons([
  {
    tooltip: 'button1',
    icon: path.join(__dirname, 'button1.png'),
    click () { console.log('button1 clicked') }
  },
  {
    tooltip: 'button2',
    icon: path.join(__dirname, 'button2.png'),
    flags: ['enabled', 'dismissonclick'],
    click () { console.log('button2 clicked.') }
  }
])

要清理缩略图工具栏按钮，只需BrowserWindow.setThumbarButtons使用空数组调用即可：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setThumbarButtons([])

Unity启动器快捷键（Linux）

在Unity中，您可以通过修改.desktop文件将自定义条目添加到其启动程序，请参阅将快捷方式添加到启动程序。

Audacious的启动快捷键：

任务栏中的进度条（Windows，macOS，Unity）

在Windows上，任务栏按钮可用于显示进度条。这使得窗口能够向用户提供进度信息，而用户不必切换到窗口本身。

在macOS上，进度条将显示为停靠栏图标的一部分。

Unity DE也有类似的功能，可以让你在启动器中指定进度条。

任务栏按钮中的进度条：

要设置窗口的进度条，可以使用BrowserWindow.setProgressBar API：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setProgressBar(0.5)

任务栏中的图标叠加（Windows）

在Windows上，任务栏按钮可以使用一个小叠加层来显示应用程序状态，如MSDN引用的那样：

图标叠加层用作状态的上下文通知，旨在无需单独通知区域状态图标将该信息传达给用户。例如，Microsoft Outlook中当前显示在通知区域中的新邮件状态现在可以通过任务栏按钮上的叠加显示。同样，您必须在开发周期中决定哪种方法最适合您的应用。覆盖图标旨在提供重要的，长期的状态或通知，如网络状态，信使状态或新邮件。不应该让用户看到不断变化的叠加或动画。

在任务栏按钮上覆盖：

要设置窗口的叠加图标，可以使用BrowserWindow.setOverlayIcon API：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')

Flash Frame（Windows）

在Windows上，您可以突出显示任务栏按钮以获得用户的关注。这与在macOS上弹跳停靠栏图标相似。从MSDN参考文档：

通常，一个窗口会闪烁以通知用户该窗口需要注意，但它目前没有键盘焦点。

要刷新BrowserWindow任务栏按钮，可以使用BrowserWindow.flashFrame API：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)

不要忘记调用该flashFrame方法false关闭闪光灯。在上面的例子中，当窗口焦点时调用它，但你可能使用超时或其他事件来禁用它。

代表窗口文件（macOS）

在macOS上，一个窗口可以设置其表示的文件，因此该文件的图标可以显示在标题栏中，并且当用户Command-Click或Control-点击标题时，将显示一个路径弹出窗口。

您还可以设置窗口的编辑状态，以便文件图标可以指示此窗口中的文档是否已被修改。

表示文件弹出式菜单：

若要设置窗口的表示文件，可以使用布朗·温道。SET表示文件名和布朗·温道。setDocumenteded空气污染指数：

const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setRepresentedFilename('/etc/passwd')
win.setDocumentEdited(true)

将文件拖出窗口

对于某些操作文件的应用程序，能够将文件从Electron拖到其他应用程序非常重要。要在您的应用中实现此功能，您需要webContents.startDrag(item)在ondragstart事件上调用API 。

在网页中：

<a href="#" id="drag">item</a>
<script type="text/javascript" charset="utf-8">
  document.getElementById('drag').ondragstart = (event) => {
    event.preventDefault()
    ipcRenderer.send('ondragstart', '/path/to/item')
  }
</script>

在主要过程中：

const {ipcMain} = require('electron')
ipcMain.on('ondragstart', (event, filePath) => {
  event.sender.startDrag({
    file: filePath,
    icon: '/path/to/icon.png'
  })
})

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18