リッチHTMLデスクトップWebアプリケーション

Question

でトレイメニュー：

アプリケーションLinux、Windows、Macで動作する必要があります。 デスクトップWebアプリケーション+ HTMLで可能であるはずですが、どのフレームワークでも便利な例は見つけられません。すべての例では、必要な要素を持っていないOSのメニューを使用しています。

ウェブアプリケーションのフレームワークでこれを実装する方法を教えてもらえますか？

Answer 1

これは非常に簡単に電子で行うことができますが、私が実際に作成したいくつかのトレイが下の画像に自分自身をアプリ：ここ

は何をするまさに概説記事であります：あなたが必要とするhttp://www.bytcode.com/articles/1

初歩的なファイルは、次のとおりです。

• のindex.html
• main.jsあなたはそれを見てみたかったindex.htmlアプリを設計しますように
• package.json

。上記の例では、入力ボックスをいくつか使用し、CSSでスタイルを設定しました。

main.jsファイルには、アプリケーションの電源を入れるためのメインコードを置く場所があります。 package.jsonファイルで

アプリの詳細を置く場所で、DEVの依存関係など

あなたがに関係しなければならない主なファイルはmain.jsファイルです。以下は、上記のアプリのmain.jsファイルの例です。私はあなたが理解を助けるために、コメントを追加しました：あなたはHello Worldのを言って、単純なindex.htmlファイルを作成する場合は上記のコードを配置し、だから

{ 
    "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" 
    } 
} 

：

以下

// 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ファイルの例です。それぞれmain.jsファイルとpackage.jsonファイルにコピーし、トレイから実行するアプリを実行します。

電子の使い方が分からない場合は、まず電子を理解する必要があります（それを把握するのは難しくありません）。その後、これは少し複雑に見えるかもしれません、そしてより多くの詳細については、あなたがdocs