站点介绍

只有了解事实才能获得真正的自由

Electron主进程

首页 / 正文

https://www.electronjs.org/zh/docs/latest/api/app

1 App

1.1 事件

1.1.1 before-quit

在应用程序关闭窗口之前触发。

app.on('before-quit', (e) => {
  console.log('App is quiting')
  e.preventDefault()
})

1.1.2 browser-window-blur

在 browserWindow 失去焦点时发出

app.on('browser-window-blur', (e) => {
  console.log('App unfocused')
})

1.1.3 browser-window-focus

在 browserWindow 获得焦点时发出

app.on('browser-window-focus', (e) => {
  console.log('App focused')
})

1.2 方法

1.2.1 app.quit()

https://www.electronjs.org/zh/docs/latest/api/app#appquit

app.on('browser-window-blur', (e) => {
  setTimeout(() => {
    app.quit()
  }, 3000)
})

app.on('browser-window-blur', (e) => {
  setTimeout(app.quit, 3000)
})

1.2.2 app.getPath(name)

app.whenReady().then(() => {
  console.log(app.getPath('desktop'))
  console.log(app.getPath('music'))
  console.log(app.getPath('temp'))
  console.log(app.getPath('userData'))
})

2 BrowserWindow

electron.BrowserWindow: 创建和控制浏览器窗口

const win = new BrowserWindow({
    height:600,
    width:900
})

2.1 实例方法

win.loadURL(url[, options])和 loadFile 互斥

mainWindow.loadURL('https://www.baidu.com')

2.2 优雅的显示窗口

使用ready-to-show事件: 页面完成渲染再显示窗口

let mainWindow = new BrowserWindow({ show: false })
mainWindow.once('ready-to-show', () => {
  mainWindow.show()
})

设置 backgroundColor

let win = new BrowserWindow({ backgroundColor: '#2e2c29' })

2.3 父子窗口

secondaryWindow = new BrowserWindow({
  parent: mainWindon, // 定义父窗口
  modal: true // 禁用父窗口的子窗口
})

子窗口显示和隐藏

secondaryWindow = new BrowserWindow({
  show: false
})

setTimeout(() => {
  secondaryWindow.show()
  setTimeout(() => {
    secondaryWindow.hide()
  }, 3000)
}, 2000)

2.4 无边框窗口

Frameless Window

mainWindow = new BrowserWindow({
  frame: false
})

无边框窗口,不可拖拽

让页面可拖拽

<body style="user-select: none; -webkit-app-region:drag;">

给不需要点击拖动页面的元素添加no-drag

<input style="-webkit-app-region: no-drag;" type="range" name="range" min="0" max="10">

是否显示关闭窗口工具栏

mainWindow = new BrowserWindow({
  titleBarStyle: 'hidden' // or hiddenInset 距离红绿灯更近
})

2.5 属性与方法

2.5.1 minWidth && minHeight

mainWindow = new BrowserWindow({
  minWidth: 300,
  minHeight: 300
})

2.5.2 窗口焦点事件

secWindow = new BrowserWindow({
  width: 400, height: 300,
  webPreferences: { nodeIntegration: true },
})

mainWindow.on('focus', () => {
  console.log('mainWindow focused')
})

secWindow.on('focus', () => {
  console.log('secWindow focused')
})

app.on('browser-window-focus', () => {
  console.log('App focused')
})

2.5.3 静态方法

getAllWindows()

let allWindows = BrowserWindow.getAllWindows()
console.log(allWindows)

2.5.4 实例方法

maximize()

secWindow.on('closed', () => {
  mainWindow.maximize()
})

2.6 state

electron-win-state 保存窗口的状态: npm install electron-win-state

const { app, BrowserWindow,ipcMain } = require('electron')
const windowStateKeeper = require('electron-window-state');

const createWindow = () => {
    let mainWindowState = windowStateKeeper({
        defaultWidth: 1000,
        defaultHeight: 800
    });
    const win = new BrowserWindow({
      'x': mainWindowState.x,
      'y': mainWindowState.y,
      'width': mainWindowState.width,
      'height': mainWindowState.height
    })
    mainWindowState.manage(win)

    win.loadFile('./index.html')
}

app.whenReady().then(() => {
  createWindow()
})

2.7 webContents

webContents 是 EventEmitter 的实例，负责渲染和控制网页, 是 BrowserWindow 对象的一个属性。

let wc = mainWindow.webContents
// 打开调试
wc.openDevTools();
console.log(wc)

2.7.1 方法 getAllWebContents(）

返回所有 WebContents 实例的数组。包含所有Windows，webviews，opened devtools 和 devtools 扩展背景页的 web 内容

const {app, BrowserWindow, webContents} = require('electron')
console.log(webContents.getAllWebContents())

2.7.2 实例事件

did-finish-load：请求资源完毕触发
dom-ready：dom渲染完毕，请求资源尚未完成触发

<div>
   <img src="https://placekitten.com/500/500" alt="">
</div>
<script>
let wc = mainWindow.webContents
wc.on('did-finish-load', () => {
  console.log('Conent fully loaded')
})
wc.on('dom-ready', () => {
  console.log('DOM Ready')
})
</script>

new-window

<div>
   默认点击打开新窗口
  <a target="_blank" href="https://placekitten.com/500/500"><h3>Kitten</h3></a>
</div>

<script>
wc.on('new-window', (e, url) => {
  e.preventDefault()
  console.log('DOM Ready')
})
</script>

context-menu : 右键上下文信息

wc.on('context-menu', (e, params) => {
  console.log(`Context menu opened on: ${params.mediaType} at x:${params.x}, y:${params.y}`)
})

wc.on('context-menu', (e, params) => {
  console.log(`User seleted text: ${params.selectionText}`)
  console.log(`Selection can be copied: ${params.editFlags.canCopy}`)
})

2.7.3 实例方法

executeJavaScript()

wc.on('context-menu', (e, params) => {
  wc.executeJavaScript(`alert('${params.selectionText}')`)
})

3 dialog - 对话框

显示用于打开和保存文件、警报等的本机系统对话框

打开文件

const {app, BrowserWindow, dialog} = require('electron')

mainWindow.webContents.on('did-finish-load', () => {
  dialog.showOpenDialog({
    buttonLabel: '选择',
    defaultPath: app.getPath('desktop'),
    properties: ['multiSelections', 'createDirectory', 'openFile', 'openDirectory']
  }).then((result)=> {
    console.log(result)
  })
})

保存文件

dialog.showSaveDialog({}).then(result => {
  console.log(result)
})

选择弹框

const answers = ['Yes', 'No', 'Maybe']
dialog.showMessageBox({
  title: 'Message Box',
  message: 'Please select an option',
  detail: 'Message details.',
  buttons: answers
}).then(({response}) => {
  console.log(`User selected: ${answers[response]}`)
})

4 快捷键+系统快捷键

快捷键：定义键盘快捷键。
系统快捷键：在应用程序没有键盘焦点时，监听键盘事件。

快捷键可以包含多个功能键和一个键码的字符串，由符号+结合，用来定义你应用中的键盘快捷键

示例：

CommandOrControl+A
CommandOrControl+Shift+Z

快捷方式使用 register 方法在 globalShortcut 模块中注册。

globalShortcut 模块可以在操作系统中注册/注销全局快捷键, 以便可以为操作定制各种快捷键。

注意: 快捷方式是全局的; 即使应用程序没有键盘焦点, 它也仍然在持续监听键盘事件。在应用程序模块发出 ready 事件之前, 不应使用此模块。

const {app, BrowserWindow, globalShortcut} = require('electron')

globalShortcut.register('G', () => {
  console.log('User pressed G')
})

globalShortcut.register('CommandOrControl+Y', () => {
  console.log('User pressed G with a combination key')
  globalShortcut.unregister('CommandOrControl+Y')
})

5 Menu

const { app, BrowserWindow, Menu } = require('electron')
const createWindow = () => {
    // 1.
    let mainMenu = Menu.buildFromTemplate( require('./mainMenu') )
    
    const win = new BrowserWindow({
      'width': 1000,
      'height': 900
    })
    // 2.
    Menu.setApplicationMenu(mainMenu)
    
    win.loadFile('./index.html')

}


app.whenReady().then(() => {
  createWindow()
})

mainMenu.js

传递数据可以导出函数，传出数据可以用回调函数

module.exports = [
  {
    label: 'Electron',
    submenu: [
      { label: 'Item 1'},
      { label: 'Item 2', submenu: [ { label: 'Sub Item 1'} ]},
      { label: 'Item 3'},
    ]
  },
  {
    label: 'Edit',
    submenu: [
      { role: 'undo'},
      { role: 'redo'},
      { role: 'copy'},
      { role: 'paste'},
    ]
  },
  {
    label: 'Actions',
    submenu: [
      {
        label: 'DevTools',
        role: 'toggleDevTools'
      },
      {
        role: 'toggleFullScreen'
      },
      {
        label: 'Greet',
        click: () => { console.log('Hello from Main Menu') },
          // 快捷键
        accelerator: 'Shift+Alt+G'
      }
    ]
  }
]

传递数据可以导出函数，传出数据可以用回调函数

module.exports = (data, callback) => ([
    {
        label: 'Electron',
        submenu: [
        { label: 'Item 1'},
        { label: 'Item 2', submenu: [ { label: 'Sub Item 1'} ]},
        { label: 'Item 3'},
        ]
    },
    {
        label: 'Edit',
        submenu: [
        { role: 'undo'},
        { role: 'redo'},
        { role: 'copy'},
        { role: 'paste'},
        ]
    },
    {
        label: 'Actions',
        submenu: [
        {
            label: 'DevTools',
            role: 'toggleDevTools'
        },
        {
            role: 'toggleFullScreen'
        },
        {
            label: 'Greet',
            click: () => {
                console.log(data);
                callback('haha')
            },
            // 快捷键
            accelerator: 'Shift+Alt+G'
        }
        ]
    }
])

main.js

let mainMenu = Menu.buildFromTemplate( require('./mainMenu')('传入数据',(data)=>{
    console.log(data);
}) )

6 Context Menus

main.js

const { app, BrowserWindow, Menu } = require('electron')
const createWindow = () => {
    // 1.
    let mainMenu = Menu.buildFromTemplate( require('./mainMenu') )
    
    const win = new BrowserWindow({
      'width': 1000,
      'height': 900
    })
    // 2.
    Menu.setApplicationMenu(mainMenu)
    
    win.loadFile('./index.html')
    // 监听鼠标右键
    win.webContents.on('context-menu', e => {
      // 3.鼠标点击右键弹出菜单
      contextMenu.popup()
    })
}


app.whenReady().then(() => {
  createWindow()
})

7 Tray (托盘)

main.js

const { app, BrowserWindow, Menu, Tray } = require('electron')
const path = require('path')

const createWindow = () => {
    const win = new BrowserWindow({
        height:1080,
        width:1920
    })
    
    win.loadURL('')
    
    // 点击关闭时触发close事件
    win.on('close',(e)=>{
        // 阻止默认关闭，隐藏窗口，隐藏任务栏窗口
        e.preventDefault()
        win.hide();
        win.setSkipTaskbar(true);
    })

    // 1.新建托盘
    let tray = new Tray(path.join(__dirname, 'favicon.ico'));
    // 2.托盘名称
    tray.setToolTip('Electron Tray');
    // 3.托盘菜单
    const contextMenu = Menu.buildFromTemplate([{
            label: '显示',
            click: () => { win.show() }
        },
        {
            label: '退出',
            click: () => { 
                win.destroy() 
            }
        }
    ]);
    // 4.载入托盘菜单
    tray.setContextMenu(contextMenu);
    
    // 5.双击触发
    tray.on('double-click', () => {
        // 双击通知区图标实现应用的显示或隐藏
        win.isVisible() ? win.hide() : win.show()
        win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
    });
}


app.whenReady().then(() => {
    createWindow()
})

日历

2025年09月

日	一	二	三	四	五	六
	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	29	30

修罗

站点介绍

Electron主进程

1 App

1.1 事件

1.1.1 before-quit

1.1.2 browser-window-blur

1.1.3 browser-window-focus

1.2 方法

1.2.1 app.quit()

1.2.2 app.getPath(name)

2 BrowserWindow

2.1 实例方法

2.2 优雅的显示窗口

2.3 父子窗口

2.4 无边框窗口

2.5 属性与方法

2.5.1 minWidth && minHeight

2.5.2 窗口焦点事件

2.5.3 静态方法

2.5.4 实例方法

2.6 state

2.7 webContents

2.7.1 方法 getAllWebContents(）

2.7.2 实例事件

2.7.3 实例方法

3 dialog - 对话框

4 快捷键+系统快捷键

5 Menu

mainMenu.js

6 Context Menus

main.js

7 Tray (托盘)

main.js

评论(0)

热门文章

最新评论

日历

标签云

文章目录

日	一	二	三	四	五	六
	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	29	30

日	一	二	三	四	五	六
	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	29	30

日	一	二	三	四	五	六
	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	29	30