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