Rich меню в трее HTML в настольных веб-приложений

Question

Я хочу создать приложение меню лоток с настраиваемыми кнопками, ползунками, возможно, некоторые хороший эффект перехода, верхний и нижний колонтитулы, как это:

Заявка должен работать на Linux, Windows и Mac. Я предположил, что это должно быть возможно с помощью веб-приложения для настольных компьютеров + некоторый HTML-код, но я не могу найти какой-либо полезный пример для любой среды. В каждом примере используется меню ОС, которое просто не содержит элементов, которые мне нужны.

Может ли кто-нибудь направить меня, как более или менее реализовать это в любой из рамок веб-приложений?

Answer 1

Это может быть сделано в электроном довольно легко, я на самом деле создал несколько приложений лоток себя в изображениях ниже:

Вот пост, который описывает именно то, что нужно сделать: http://www.bytcode.com/articles/1

рудиментарные файлы, которые вам нужны:

• index.html
• main.js
• package.json

В index.html вы бы разработать приложение так, как вы хотели, чтобы она выглядела. В моем примере выше я только что использовал несколько ящиков ввода и стилизовал его с помощью CSS.

В файле main.js файл, где будет размещен ваш основной код, чтобы включить приложение.

В файле package.json где вы положили детали о вашем приложении, Dev зависимостей и т.д.

Основной файл вы должны быть обеспокоены является 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