前端 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

安装 Electron

npm install electron -S

创建main.js入口文件，示例代码如下：

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