[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

相关推荐
帆张芳显几秒前
智表ZCELL产品V3.6 版发布,新增系统预置右键菜单操作、页签栏操作等功能
前端·canva可画·excel插件
漂流瓶jz6 分钟前
运行时vs编译时:CSS in JS四种主流方案介绍和对比
前端·javascript·css
Asmewill13 分钟前
uv包管理命令
前端
发现一只大呆瓜15 分钟前
深入浅出 Tree Shaking:Rollup 是如何“摇”掉死代码的?
前端·性能优化·vite
weixin1997010801634 分钟前
《转转商品详情页前端性能优化实战》
前端·性能优化
钮钴禄·爱因斯晨41 分钟前
他到底喜欢我吗?赛博塔罗Java+前端实现,一键解答!
java·开发语言·前端·javascript·css·html
Watermelo61742 分钟前
理解 JavaScript 中的“ / ”:路径、资源与目录、nginx配置、请求、转义的那些事
前端·javascript·vue.js·chrome·nginx·正则表达式·seo
Beingchou1 小时前
HTML头部元信息避坑指南大纲
前端·html
jserTang2 小时前
手撕 Claude Code-4: TodoWrite 与任务系统
前端·javascript·后端
腹黑天蝎座2 小时前
大屏开发必读:Scale/VW/Rem/流式/断点/混合方案全解析(附完整demo)
前端·javascript