[electron] 程序的生命周期

electron 程序的生命周期

生命周期是一个 electron程序从启动到关闭的时间

electron 程序生命周期事件

  1. ready: app初始化完成(此时可以创建 browserWindow了)
  2. dom-ready: webContents 一个窗口中的文本加载完成
  3. did-finsh-load webContents 导航完成时触发
  4. window-all-closed 所有窗口都被关闭时触发(有默认行为,就是退出整个程序)
  5. before-quit: 关闭窗口之前触发
  6. will-quit 在窗口关闭并且应用退出时触发
  7. quit: 当所有窗口被关闭时触发

代码

javascript 复制代码
const {app, BrowserWindow} = require('electron');

app.on('ready', ()=>{
    console.log('11111111111 app ready');
    const mainwindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainwindow.on('close', (event)=>{
        console.log('4444444444444 mainwindow close');
        event.preventDefault();
    });

    mainwindow.webContents.on('dom-ready', ()=>{
        console.log('222222222222 webContents dom-ready');
    });

    mainwindow.webContents.on('did-finish-load', ()=>{
        console.log('3333333333 webContents did-finish-load');
    });

    mainwindow.loadFile('index.html');
});

app.on('quit', ()=>{
    console.log('88888888888888 app quit');
});

app.on('window-all-closed', ()=>{
    console.log('5555555555555555 app window-all-closed');
    app.quit();
});

app.on('before-quit', ()=>{
    console.log('6666666666666666 app before-quit');
});

app.on('will-quit', ()=>{
    console.log('7777777777777 app will-quit');
});

输出结果

复制代码
11111111111 app ready
222222222222 webContents dom-ready
3333333333 webContents did-finish-load
4444444444444 mainwindow close
5555555555555555 app window-all-closed
6666666666666666 app before-quit
7777777777777 app will-quit
88888888888888 app quit

总结

目前来说就 app 的 ready 事件很重要。它用于在此事件里面创建 BrowserWindow

相关推荐
J***Q2926 小时前
Vue数据可视化
前端·vue.js·信息可视化
ttod_qzstudio8 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
_大龄8 小时前
前端解析excel
前端·excel
一叶茶8 小时前
移动端平板打开的三种模式。
前端·javascript
前端大卫8 小时前
一文搞懂 Webpack 分包:async、initial 与 all 的区别【附源码】
前端
Want5959 小时前
HTML音乐圣诞树
前端·html
老前端的功夫9 小时前
前端浏览器缓存深度解析:从网络请求到极致性能优化
前端·javascript·网络·缓存·性能优化
Running_slave10 小时前
你应该了解的TCP滑窗
前端·网络协议·tcp/ip
程序员小寒10 小时前
前端高频面试题之CSS篇(一)
前端·css·面试·css3
颜酱10 小时前
Monorepo 架构以及工具选型、搭建
前端·javascript·node.js