Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

立志于全桟开发
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Html5

  • JavaScript

  • Nodejs

  • express

  • electron

    • electron窗体操作
      • 基础窗体
      • 设置菜单栏菜单
      • 隐藏菜单栏
      • 设置窗口大小
      • 开发者工具
      • 设置托盘
    • electron应用更新
    • 02.electron打包操作(electron-builder)
    • electron调用打印机打印
    • electron文件缓存
    • electron常见问题
  • Android

  • 微信公众号

  • 框架

  • 其他

  • selenium

  • Sequelize

  • 大前端
  • electron
mrcdh
2022-06-10
目录

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)
1

# 开发者工具

win.webContents.openDevTools()
1

# 设置托盘

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应用更新

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

最近更新
01
python之Anaconda(conda)版本管理
03-24
02
electron文件缓存
02-16
03
vuex数据持久化插件vuex-persist
02-14
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×