桌面 Web 应用程序中丰富的 HTML 托盘菜单

Question

我想创建一个带有自定义按钮、滑块的托盘菜单应用程序，也许还有一些不错的过渡效果，页眉和页脚如下所示：

应用程序需要在 Linux、Windows 和 Mac 上运行。我猜桌面 Web 应用程序 + 一些 HTML 应该是可能的，但我找不到任何框架的有用示例。每个示例都使用 OS' 菜单，但没有我需要的元素。

谁能告诉我如何在任何网络应用程序框架中或多或少地实现这一点？

Answer 1

这可以很容易地在 electron 中完成，实际上我在下图中自己创建了几个托盘应用程序：

您需要的基本文件是：

index.html
main.js
package.json

在 index.html 中，您可以按照自己希望的方式设计应用程序。在上面的示例中，我只使用了几个输入框并将它们设置为 CSS.

main.js 文件是放置应用程序主要代码的地方。

在 package.json 文件中，您可以放置有关应用、开发依赖项等的详细信息。

您应该关注的主要文件是 main.js 文件。以下是上述应用的 main.js 文件示例。我添加了评论以帮助您理解：

// Sets variables (const)
const {app, BrowserWindow, ipcMain, Tray} = require('electron')
const path = require('path')

const assetsDirectory = path.join(__dirname, 'img')

let tray = undefined
let window = undefined

// Don't show the app in the doc
app.dock.hide()

// Creates tray & window
app.on('ready', () => {
  createTray()
  createWindow()
})

// Quit the app when the window is closed
app.on('window-all-closed', () => {
  app.quit()
})

// Creates tray image & toggles window on click
const createTray = () => {
  tray = new Tray(path.join(assetsDirectory, 'icon.png'))
  tray.on('click', function (event) {
    toggleWindow()
  })
}

  const getWindowPosition = () => {
  const windowBounds = window.getBounds()
  const trayBounds = tray.getBounds()

  // Center window horizontally below the tray icon
  const x = Math.round(trayBounds.x + (trayBounds.width / 2) - (windowBounds.width / 2))

  // Position window 4 pixels vertically below the tray icon
  const y = Math.round(trayBounds.y + trayBounds.height + 3)

  return {x: x, y: y}
}

// Creates window & specifies its values
const createWindow = () => {
  window = new BrowserWindow({
        width: 250,
        height: 310,
        show: false,
        frame: false,
        fullscreenable: false,
        resizable: false,
        transparent: true,
        'node-integration': false
    })
    // This is where the index.html file is loaded into the window
    window.loadURL('file://' + __dirname + '/index.html');

  // Hide the window when it loses focus
  window.on('blur', () => {
    if (!window.webContents.isDevToolsOpened()) {
      window.hide()
    }
  })
}

const toggleWindow = () => {
  if (window.isVisible()) {
    window.hide()
  } else {
    showWindow()
  }
}

const showWindow = () => {
  const position = getWindowPosition()
  window.setPosition(position.x, position.y, false)
  window.show()
  window.focus()
}

ipcMain.on('show-window', () => {
  showWindow()
})

下面是 package.json 文件的示例：

{
  "name": "NAMEOFAPP",
  "description": "DESCRIPTION OF APP",
  "version": "0.1.0",
  "main": "main.js",
  "license": "MIT",
  "author": "NAME OF AUTHOR",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron-packager": "^8.2.0"
  }
}

因此，如果您创建一个简单的 index.html 文件，上面写着“Hello World”，请将上述代码分别放入 main.js 文件和 package.json 文件中，然后运行该应用程序将从托盘中运行。

如果你不知道如何使用 Electron，你需要先弄明白 (Electron docs)。然后就会清楚在哪里放置哪个文件以及如何运行应用程序。

桌面 Web 应用程序中丰富的 HTML 托盘菜单

Rich HTML tray menu in a desktop web application

desktop-application

phonegap-desktop-app

nw.js

electron