Electron 深入探秘：基础功能全攻略

前端

2024-01-09 05:10:36

Electron，基于 Node.js 和 Chromium 的跨平台桌面应用开发框架，凭借其强大的功能和丰富的生态系统，深受开发者青睐。在本文中，我们将深入探讨 Electron 的基础功能实现，助力你打造出色的桌面应用。

窗口操作

窗口是桌面应用的关键元素。Electron 提供了丰富的 API，让你可以轻松控制窗口的行为：

创建窗口：BrowserWindow.create()
设置窗口尺寸和位置：BrowserWindow.setSize(), BrowserWindow.setPosition()
隐藏和显示窗口：BrowserWindow.hide(), BrowserWindow.show()
关闭窗口：BrowserWindow.close()

托盘图标

托盘图标是用户与后台运行的应用交互的便捷方式。Electron 允许你轻松设置托盘图标：

创建托盘图标：Tray.create()
设置托盘图标图像：Tray.setImage()
添加托盘菜单：Tray.setContextMenu()
处理托盘点击事件：Tray.on('click')

防止应用多开

对于某些应用，防止多开至关重要。Electron 提供了以下方法来实现应用单例：

使用进程间通信（IPC）：应用启动时向共享内存中写一个值，检测到已有进程存在则关闭自身。
利用全局锁文件：创建和锁定一个全局锁文件，其他实例检测到锁文件存在则退出。

其他基础功能

除了上述核心功能，Electron 还提供了更多实用功能：

菜单栏：Menu.buildFromTemplate()
对话框：dialog.showMessageBox()
文件操作：fs.readFile(), fs.writeFile()
网络请求：net.request()
数据库集成：sqlite3

示例代码

创建一个带托盘图标的窗口：

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

function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');

  const tray = new Tray('icon.png');
  tray.setToolTip('My App');
  tray.on('click', () => {
    win.isVisible() ? win.hide() : win.show();
  });
}

app.whenReady().then(() => {
  createWindow();
});