electron窗体操作

# 基础窗体

const win = new BrowserWindow({
    width: 970,
    height: 580,
    autoHideMenuBar: false,
    transparent: true, // 设置窗口透明
    backgroundColor: '#00000000', // 背景颜色透明
    icon: path.join(__dirname, './assets/health-hut-100.png'),
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: false,
      enableRemoteModule: true
    }
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 设置菜单栏菜单

const { Menu } = require('electron')

const menu = Menu.buildFromTemplate([
    {
        label: '编辑', // 菜单名称
        submenu: [
            {
                //role: '', //系统的一些内置功能，如:reload=刷新,forceReload=强制刷新
                //id: 'delete', //在单个菜单中唯一。如果已定义，则可以通过位置属性将其用作对此项的引用。
                label: '删除',
                //sublabel: '',
                //icon: '', // NativeImage | string
                accelerator: 'ctrl+d',// 快捷键
                enabled: true, // 如果为false，菜单项则为灰色不可点击
                //type: 'normal', // normal, separator, submenu, checkbox or radio
                //checked: true,// 选中的，配合type的`checkbox`或`radio`使用
                click:(menuItem, browserWindow, event) => {// 点击事件
                    
                }
            }
        ]
    }
])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 隐藏菜单栏

const win = new BrowserWindow({
    width: 600,
    height: 360,
    autoHideMenuBar: true,  // 隐藏菜单栏
  })

1
2
3
4
5

# 设置窗口大小

win.setContentSize(width, height, animal)

# 开发者工具

win.webContents.openDevTools()

# 设置托盘

const {Menu, Tray} = require('electron')
const path = require('path')
// 新建托盘-设置托盘图标
const tray = new Tray(path.join(__dirname, 'static/logo.ico'))
// 鼠标移动上去提示信息
tray.setToolTip('视觉管家助手');
// 托盘菜单
const contextMenu = Menu.buildFromTemplate([
    {
        label: '显示', click: () => {
            win.show()
        }
    },
    {
        label: '退出', click: () => {
            win.destroy()
        }
    }
]);
// 载入托盘菜单
tray.setContextMenu(contextMenu);
// 双击触发
tray.on('double-click', () => {
    // 双击通知区图标实现应用的显示或隐藏
    win.isVisible() ? win.hide() : win.show()
    // 设置跳转任务栏-待定
    // win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#electron

上次更新: 2023/02/16, 15:02:00

← express常见问题 electron应用更新→