前端 Electron 桌面应用学习笔记 介绍 Electron是什么? 为什么选择Electron? 创建你的第一个桌面应用程序 启动项目 生命周期函数 常用配置 配置窗口标题 配置小图标 隐藏菜单栏 关闭调试面板 是否可以使用Node.js 隐藏 Electron 标题、小图标和菜单栏 获取窗口对象方法
介绍
Electron是什么?
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
为什么选择Electron?
Electron 是一个框架,使开发者能够将 Web 技术(HTML、JavaScript、CSS)、Node.js 及原生代码相结合,构建适用于 macOS、Windows 和 Linux 的跨平台桌面应用程序。 它基于MIT开源许可证,对商业和个人用途均免费。
创建你的第一个桌面应用程序
npm init - y
npm install electron - S
const { app, BrowserWindow } = require ( 'electron' )
function createWindow ( ) { const mainWin = new BrowserWindow ( { width : 1200 , height : 800 } ) mainWin. loadFile ( './website/index.html' ) mainWin. webContents. on ( 'dom-ready' , ( ) => { console. log ( '22222--------dom-ready' ) ; } ) mainWin. webContents. on ( 'did-finish-load' , ( ) => { console. log ( '3333333--------did-finish-load' ) ; } ) mainWin. on ( 'close' , ( ) => { console. log ( '888888888--------close' ) ; mainWin = null } )
} app. on ( 'ready' , ( ) => { console. log ( '11111111111----------ready' ) ; createWindow ( )
} )
app. on ( 'window-all-closed' , ( ) => { console