豐富的HTML托盤菜單

Question

我想創建一個自定義按鈕，滑塊，也許有些很好的過渡效果，頁眉和頁腳這樣的托盤菜單應用：

的應用需要在Linux，Windows和Mac上工作。 我猜想它應該可以與桌面web應用程序+一些HTML，但我找不到任何框架的任何有用的例子。每個例子都使用操作系統的菜單，但沒有我需要的元素。

任何人都可以指導我如何在任何Web應用程序框架中實現或多或少？

Answer 1

這可以在電子做很容易，其實我已經創建了幾個托盤應用程式自己在下面的圖片：

這裏是概括到底該怎麼做一個帖子： http://www.bytcode.com/articles/1

您所需要的最基本的文件是：

• 的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文件並運行它將從托盤運行的應用程序。

如果你不知道如何使用電子，你需要首先弄清楚（它不那麼難以掌握）。然後，它會變得不清楚的地方放置什麼文件，以及如何運行應用程序

這可能看起來有點複雜，併爲更多的細節，你可以閱讀docs