Electron其它功能合集

发表于 分类于 阅读次数：

自定义菜单

Electron 所有类型的菜单都是基于 Menu 类和 MenuItem 类实现的。
Menu 接口说明。
MenuItem 接口说明。
如果是要构建静态菜单，可使用 Menu.buildFromTemplate() 方法，根据模板构建菜单。其参数是一个 MenuItemConstructorOptions 类型的数组，使用这种方式更加方便快捷。

应用菜单（顶部菜单）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Menu } from "electron";
import type { MenuItemConstructorOptions } from "electron";

const template: MenuItemConstructorOptions = [
    {
        label: 'New Window',
        click() {
            console.log('New Window');
        }
    }, {
        label: 'New Window with Settings',
        submenu: [
            {label: 'Basic'},
            {label: 'Pro'}
        ]
    },
    {
        label: 'New Command...'
    }
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

上下文菜单（右键菜单）

设置全局上下文菜单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Menu, BrowserWindow } from "electron";

const win = new BrowserWindow();
win.webContents.on("context-menu", () => {
    const menu = Menu.buildFromTemplate([
        {
            label: '复制'
        }, {
            label: '粘贴'
        },
        {
            label: '新建',
            submenu: [
                { label: '文件夹' },
                { type: "separator" },
                { label: 'TXT 文档' },
                { label: 'DOCX 文档' }
            ]
        }
    ]);

    menu.popup();
});
动态设置某一元素的上下文菜单

这种情况通常是在渲染进程中监听元素的 “contextmenu” 事件并阻止其默认行为，然后向主线程发送消息，通知其修改上下文菜单。

1
2
3
4
5
6
7
// 渲染进程

const box = document.getElementById("box");
box.oncontextmenu = ev => {
    ev.preventDefault();
    window.myApi.contextMenu();
}
1
2
3
4
5
// 预加载脚本

contextBridge.exposeInMainWorld("myApi", {
    contextMenu: () => ipcRenderer.send("context-menu")
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 主进程

ipcMain.on("context-menu", (event) => {
    const menu = Menu.buildFromTemplate([
        {
            label: "复制"
        },
        {
            label: "转发"
        }
    ]);
    const webContents = event.sender;
    const win = BrowserWindow.fromWebContents(webContents);
    menu.popup({ window: win! });
});

系统托盘的上下文菜单
1
2
3
4
5
6
7
8
9
10
import { Tray, nativeImage } from "electron";

const menu = Menu.buildFromTemplate([
    { label: '剪切', role: "cut" },
    { label: '退出', role: "quit" }
]);
const tray = new Tray(nativeImage.createFromPath("../dist/favicon.ico"));
tray.setContextMenu(menu);
tray.setToolTip("xxx");
tray.setTitle("xxx");