前端桌面开发之Electron 常用

简介：

Electron是一个开源的跨平台桌面应用程序开发框架，允许开发者使用前端 Web 技术（HTML、CSS 和 JavaScript）来构建桌面应用程序

1. 下载node.js
2. npm install electron 这边建议去百度一下教程或者直接看 https://www.csev.cn/code-2/electron/2024032869.html/

这里记得安装：

Electron常用API详解

BrowserWindow创建窗口-配置

创建窗口时可以配置很多自定义配置，下面是一些常用配置及解析：

width 和 height：用于设置窗口的初始宽度和高度。
x 和 y：控制窗口的初始位置，以屏幕坐标为基准。
fullscreen：布尔值，指定窗口是否以全屏模式启动。
resizable：布尔值，控制用户是否可以调整窗口大小。
minWidth 和 minHeight：指定窗口的最小宽度和最小高度。
maxWidth 和 maxHeight：指定窗口的最大宽度和最大高度。
frame：布尔值，指定是否显示窗口的外部框架（包括标题栏和控制按钮）。
title：用于设置窗口的标题。
icon：指定窗口的图标文件路径。
backgroundColor：用于设置窗口的背景颜色。
webPreferences：用于配置窗口的 Web 集成选项，例如启用 Node.js、预加载脚本等。
nodeIntegration：指定是否在渲染进程中启用 Node.js 集成，允许在渲染进程中使用 Node.js API。
contextIsolation：启用上下文隔离，将渲染进程的环境与主进程隔离开来，以提高安全性。
preload：指定一个预加载的 JavaScript 文件的路径，该文件在渲染进程运行之前加载。
devTools：指定是否允许在窗口中打开开发者工具。
webSecurity：指定是否启用同源策略，限制页面对其他源的请求。
alwaysOnTop：布尔值，控制窗口是否始终保持在顶部。
fullscreenable：布尔值，指定窗口是否可以进入全屏模式。
show：布尔值，指定创建窗口后是否立即显示。
transparent：布尔值，指定窗口是否支持透明度。
parent 和 modal：用于实现模态窗口的行为。
closable：布尔值，指定用户是否可以关闭窗口。
focusable：布尔值，指定窗口是否可以获得焦点。
minimizable 和 maximizable：控制窗口是否可以最小化和最大化。
skipTaskbar：布尔值，控制窗口是否在任务栏中显示。

参考上面解释-代码：

const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    x: 100,
    y: 100,
    fullscreen: false,
    resizable: true,
    minWidth: 400,
    minHeight: 300,
    frame: true,
    title: 'My Electron App',
    icon: '/path/to/icon.png',
    backgroundColor: '#ffffff',
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        preload: 'path/to/preload.js',
        devTools: true,
        webSecurity: true
    },
    alwaysOnTop: false,
    fullscreenable: true,
    show: true,
    transparent: false,
    closable: true
});

mainWindow.loadFile('index.html');

窗口常用事件:

窗口用window.on来监听事件，可以在这些事件触发时做一切操作例如下面一些常用事件：

// main.js

const { app, BrowserWindow } = require('electron');
let mainWindow;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载你的 HTML 文件
  mainWindow.loadFile('index.html');

  // 事件: 关闭
  mainWindow.on('close', (event) => {
    // 允许或阻止窗口关闭
    // event.preventDefault();
    // 执行清理操作
  });

  // 事件: 关闭后
  mainWindow.on('closed', () => {
    // 释放资源或执行最终操作
    mainWindow = null;
  });

  // 事件: 调整大小
  mainWindow.on('resize', () => {
    // 在窗口调整大小时执行操作
  });

  // 事件: 移动
  mainWindow.on('move', () => {
    // 在窗口移动时执行操作
  });

  // 事件: 获得焦点
  mainWindow.on('focus', () => {
    // 在窗口获得焦点时执行操作
  });

  // 事件: 失去焦点
  mainWindow.on('blur', () => {
    // 在窗口失去焦点时执行操作
  });

  // 事件: 最小化
  mainWindow.on('minimize', () => {
    // 在窗口最小化时执行操作
  });

  // 事件: 最大化
  mainWindow.on('maximize', () => {
    // 在窗口最大化时执行操作
  });

  // 事件: 还原
  mainWindow.on('unmaximize', () => {
    // 在窗口从最大化状态还原时执行操作
  });

  // 事件: 准备好显示
  mainWindow.on('ready-to-show', () => {
    // 在窗口准备好显示后执行操作
    mainWindow.show();
  });

  // 事件: 显示
  mainWindow.on('show', () => {
    // 在窗口显示时执行操作
  });

  // 事件: 隐藏
  mainWindow.on('hide', () => {
    // 在窗口隐藏时执行操作
  });

  // 事件: 进入全屏模式
  mainWindow.on('enter-full-screen', () => {
    // 在窗口进入全屏模式时执行操作
  });

  // 事件: 离开全屏模式
  mainWindow.on('leave-full-screen', () => {
    // 在窗口离开全屏模式时执行操作
  });
}

窗口常用属性

win.id - 窗口的唯一ID。
win.webContents - 包含窗口网页内容的BrowserWindowProxy对象。
win.devToolsWebContents - 用于开发者工具窗口的webContents。
win.minimizable - 是否允许最小化窗口,默认为true。
win.maximizable - 是否允许最大化窗口,默认为true。
win.fullScreenable - 是否允许全屏窗口,默认为true。
win.resizable - 是否允许改变窗口大小,默认为true。
win.closable - 是否允许关闭窗口,默认为true。
win.movable - 是否允许移动窗口,默认为true。
win.alwaysOnTop - 是否永远置顶,默认为false。
win.modal - 是否为模态窗口,默认为false。
win.title - 窗口标题。
win.defaultWidth/Height - 窗口默认宽高。
win.width/height - 窗口当前宽高。
win.x/y - 窗口左上角坐标。

窗口常用方法

win.loadURL(url)- 加载指定URL到窗口中，通常用于加载本地文件或远程网页。
win.webContents.send(channel, ...args)- 在窗口之间发送异步消息。channel 是一个字符串，用于标识消息的类型，...args 是要传递的参数。
win.show()- 显示窗口，通常与 hide() 方法配合使用。
win.hide()- 隐藏窗口。
win.close()- 关闭窗口
win.minimize()- 最小化窗口
win.maximize()- 最大化窗口
win.restore()- 恢复窗口大小和位置。
win.setSize(width, height[, animate])- 设置窗口的宽度和高度。
win.setPosition(x, y[, animate])- 设置窗口的位置。
win.getTitle()- 获取窗口的标题。
win.setTitle(title)- 设置窗口的标题。
win.setMenu(menu)- 设置窗口的菜单。
win.setResizable(resizable)- 设置窗口是否可以改变大小。
win.setAlwaysOnTop(flag[, level[, relativeLevel]])- 将窗口置顶。
win.setMenu(null)- 隐藏窗口的菜单栏。
win.setProgressBar(progress)- 设置窗口的任务栏进度条。
win.focus()- 将窗口置于前台并获得焦点。
win.isVisible()- 返回窗口是否可见。
win.isFullScreen()- 返回窗口是否全屏。
win.isMaximized()- 返回窗口是否最大化。
win.webContents.executeJavaScript(code[, userGesture])- 在窗口的渲染进程中执行一段 JavaScript 代码。
win.openDevTools([options])- 打开开发者工具。

创建右下角系统托盘

右下角系统托盘electron的系统托盘使用tray这个api实现，下面是封装的专门处理系统托盘的文件：

const { app, Tray, Menu } = require('electron')
const path = require('path')
const { getMainWindow, mainWindowIsExist } = require('./windows/mainWindow')

let tray = null
const iconPath = path.resolve(__dirname, './assets/logo.png')  //获取托盘图标路径

function initTray() {
    tray = new Tray(iconPath)

    const contextMenu = Menu.buildFromTemplate([          //electron的方法用来创建一个菜单
        {
            label: '打开应用', click: () => {
                mainWindowIsExist() && getMainWindow().show()
            }
        },
        { label: '退出应用', click: () => { app.quit() } },
    ])
    
    tray.setToolTip('Harbour') // 设置鼠标悬停时显示的提示信息
    tray.setContextMenu(contextMenu) //将使用Menu.buildFromTemplate创建出的菜单设置为托盘菜单
    
    tray.on('click', () => {
        mainWindowIsExist() && getMainWindow().show()    //点击托盘的时候触发的事件鳄梨

其他需要详细了解可以参考：