Electronカスタムメニューを学びます.

8275 ワード
electron javascript
ここ数年、Electron/NW.jsなどの技術が発達するにつれて、VSB Code、WeChat開発者ツール、アイスホップ(ICE)などの優れたデスクトップの開発ツールが生み出されました.開発者にとって、デスクトップの開発者ツールの利点は、可視化能力、オペレーティングシステムレベルのAPIアクセス、および良好な開発デバッグ体験です.そのため、最近はシステム的な深い学習の下でElectron技術を準備し、学習した知識を適切に沈殿させます.この文章は主にElectronのカスタムメニューをまとめます.
伝統的なWeb APPの開発は基本的にメニューには触れませんが、Electronではメニューの全面的なコントロールを提供しています.Menu、MenuItemモジュールを通じてアプリケーションに必要なカスタマイズメニューを作成することができます.この文章では、Electronにはどのようなメニューがありますか?コードを使ってメニューをカスタマイズしますか?
まず、基本的なメニューを紹介してみます.基本的な概念については、初歩的な認識があります.
メニュー紹介
Electronのメニューは大きく三つの種類に分けられます.アプリケーションメニュー、コンテキストメニュー、Dockメニュー(OSXシステムのみ).
ここでは、WeChat開発者ツールを例に挙げて、これらのメニューの意味をそれぞれ紹介します.WeChat開発者ツールを開くと、下図のように3つのメニューの位置が分かります.
この三つのメニューの意味はそれぞれです.
  • アプリケーションメニュー:アプリケーションメニューは、通常、アプリケーションの先頭に位置しており、ユーザが利用可能な様々な動作を提供しています.
  • コンテキストメニュー:アプリケーション内で右クリックして見たメニュー.
  • Dockメニュー:OSXシステムだけであり、通常は機能が少なく、特に一般的な機能を提供します.
    • メニューの基本概念を理解してから、コードでカスタマイズメニューの機能を実現する方法を一緒に見てみます.
    アプリケーションメニュー
    まずアプリケーションメニューを見てみます.Electronはデフォルトでは標準的なアプリケーションメニューがあります.
    よく分析してみると、デフォルトのアプリケーションメニューに含まれるメニュー構造は以下の通りです.
    もしあなたがアプリケーションメニューをカスタマイズしたいなら、メニュー全体の定義を自分で実現する必要があります.ここで注意したいのですが、アプリケーションメニューはElectronのメインプロセスでしかアクセスできません.たとえば:
    // main.js
const {
    app,
    Menu
 } = require('electron');

app.on('ready', () => {
    const appMenu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(appMenu);
});
    この中ではアプリのreadyというコードブロックに注目して、アプリケーションメニューはMenu.setApple Menuで設定します.次に、メニューテンプレート、セパレータ、ショートカットキー、サブメニューのいくつかの態様から、アプリケーションメニューの内容をシステムで紹介します.
    メニューテンプレート:
    メニューのtemplateはオブジェクト配列で、各オブジェクトは独立したメニューを定義します.アプリケーションメニューのBar位置に表示され、表示されたテキストはlabel属性で定義されます.
    このコードを例にとって、二つのメニューを定義しました.各メニューには二つのメニューが含まれています.メニュー項目はメニューをクリックした時に引っ張られた内容です.
    const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo'
            },
            {
                label: 'Redo'
            }
        ]
    },
    {
        label: 'View App',
        submenu: [
            {
                label: 'Reload'
            },
            {
                label: 'Toggle Full Screen'
            }
        ]
    }
];
    対応する効果:
    ここで注意すべきなのは、OSXにとって、アプリケーションメニューの最初のメニューはアプリケーションの名前であり、Edit Appというメニューが上書きされます.したがって、OSXに対して特別な処理が必要であり、処理のプロセスは通常:
    if (process.platform === 'darwin') {
    template.unshift({
        label: app.getName(),
        submenu: [
            {
                label: 'Quit',
                accelerator: 'CmdOrCtrl+Q',
                click() {
                    app.quit();
                }
            }
        ]
    });
}
    区切り記号:
    type:'separator'により、2つのメニュー項目の間に1つのセパレータを定義できます.セパレータの役割は主に機能が似ているメニュー項目を分離して、より良い操作ができます.
    const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo'
            }
        ]
    }
];
    ユニドとRedoの間にセパレータが表示されます.
    次に、私たちはよく使うショートカットと内蔵のrole機能を一緒に調べます.
    ショートカットキー:
    ショートカットキーは私たちが日常的に開発する過程でたくさん使われています.例えば、Ctrl+Aの全選択、Ctrl+Cのコピー、Ctrl+Vの貼り付けなどです.私たちが選択できるショートカットはありますか?
  • Commmand(簡写Cmd)
  • Control(簡略Ctrl)
  • CommmadOrControl(CmdOrCtrl)
  • Alt
  • Option
  • AltGr
  • Shift
  • スーパー
    • 上のコードを修正してショートカットキーを追加します.ショートカットはaccererator属性で定義します.
    const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo',
                accelerator: 'CmdOrCtrl+Z'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo',
                accelerator: 'Shift+CmdOrCtrl+Z',
            }
        ]
    }
];
    ショートカットを追加したら、メニューまたはショートカットをクリックしたら、どのようにロジックを起動しますか?これはclick()カスタムコール関数を作成するか、またはElectron内蔵のroleを使用して指定できます.上記のコードを引き続き修正します.
    const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo',
                accelerator: 'CmdOrCtrl+Z',
                role: 'undo'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo',
                accelerator: 'Shift+CmdOrCtrl+Z',
                role: 'redo'
            }
        ]
    }
];
    roleを追加すると、対応する操作効果があります.Electronの内蔵のroleは以下の通りです.
  • undo:キャンセル
  • redo:やり直し
  • cut:切り取り
  • copy:コピー
  • paste:貼り付け
  • pasteAndMatch Style
  • selectAll:全選択
  • delete:
    • を削除します.
  • minimize:現在のウィンドウ最小化
  • close:現在のウィンドウを閉じる
  • quit:アプリケーションを終了する
  • reload:現在のウィンドウを更新する
  • forceReload:現在のウィンドウを強制的に更新し、キャッシュを無視する
  • toggaleDevTools:devtool
    • をオンまたはオフにします.
  • togg lefullscreen:フルスクリーン切り替えを行う
  • reetZoom:リセットウィンドウサイズ
  • zoomIn:拡大ウィンドウの10%
  • zoomOut:ウィンドウの10%を縮小します.
    • 完全なRoleは確認できます.https://electronjs.org/docs/api/menu-item#roles
    サブメニュー:
    前のメニューに基づいて新しいメニューを追加します.このメニューのメニュー項目にsubmenu属性が追加されています.この属性によってサブメニューを定義し続けることができます.ここでSubmenu item 1とSubmenu item 2を定義します.
    const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo',
                accelerator: 'CmdOrCtrl+Z',
                role: 'undo'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo',
                accelerator: 'Shift+CmdOrCtrl+Z',
                role: 'redo'
            }
        ]
    },
    {
        label: 'Sub Menu',
        submenu: [
            {
                label: 'Submenu item',
                submenu: [
                    {
                        label: 'Submenu item1'
                    },
                    {
                        label: 'Submenu item2'
                    }
                ]
            }
        ]
    },
];
    サブメニューの効果は以下の通りです.
    ここでは、アプリメニューという一番重要な内容を紹介しました.文脈メニューという部分を見てみます.
    コンテキストメニュー
    コンテキストメニュー(context menu)とは、通常私たちが話している右クリックメニューで、文章の先頭には効果があります.コンテキストメニューは、レンダリングプロセスで実行される必要があります.レンダリングプロセスでは、Remoteモジュールを通じてメインプロセスのモジュールを呼び出す必要があります.
    コンテキストメニューを実現するのは簡単です.イベントをモニターしてメニューを表示するだけでいいです.
    //renderer.js
const { remote } = require('electron');
const { Menu } = remote;

const createContextMenu = () => {
    const contextTemplate = [
        {
            label: 'Cut',
            role: 'cut'
        },
        {
            label: 'Copy',
            role: 'copy'
        }
    ];
    const contextMenu = Menu.buildFromTemplate(contextTemplate);
    return contextMenu;
}

window.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    const contextMenu = createContextMenu();
    contextMenu.popup({
        window: remote.getCurrentWindow()
    });
}, false);
    Dockメニュー
    最後に、私達はDockメニューを見てみます.Dockメニューの実現もメインプロセスの中で実現されています.考え方は前とほぼ同じです.コアはap.dock.setMenuを通じて実現されます.
    // main.js
const createDockMenu = () => {
    const dockTempalte = [
        {
            label: 'New Window',
            click () {
                console.log('New Window');
            }
        }, {
            label: 'New Window with Settings',
            submenu: [
                { label: 'Basic' },
                { label: 'Pro' }
            ]
        },
        {
            label: 'New Command...'
        }
    ];

    const dockMenu = Menu.buildFromTemplate(dockTempalte);
    app.dock.setMenu(dockMenu);
}

app.on('ready', function() {
    createDockMenu();
});
    Dockメニューの効果は以下の通りです.
    これで、この文章はここで終わります.ありがとうございます.後の文章はダイアログ、IPC通信、Electronアプリケーションのテスト、パッケージ、リリース、自動更新などに関連します.
    私の個人ブログ:https://github.com/cpselvis/b...
    もっと多くの干物の内容を勉強したいなら、コードをスキャンして私の公衆番号に関心を持つことができます.
    IntensとIntent Filters