Electron 快速入门指南

前段时间同事休假几个月，交给我一个electron项目，只能迎难而上啦，简单分享一下electron的一些知识

Electron简介

Electron 是一个强大的开源框架，用于构建跨平台的桌面应用程序。它基于 Chromium 和 Node.js，允许你使用常见的 web 技术（HTML、CSS、JavaScript）构建桌面应用。

安装Electron

npm install -g electron

Electron进程

在 Electron 中，主要有两种类型的进程：主进程和渲染进程。

• 主进程（Main Process）： 运行 main.js 文件，负责创建应用窗口和处理应用的生命周期事件。
• 渲染进程（Renderer Process）： 运行在应用窗口中的页面，使用 Web 技术构建用户界面。

Electron进程通信

Electron 允许主进程和渲染进程之间进行通信。使用 ipcMain 和 ipcRenderer 模块可以实现进程间通信。 在主进程中：

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

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg); // 输出渲染进程发送的消息
  event.reply('message-from-main', 'Hello from main process!');
});

在渲染进程中：

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

ipcRenderer.send('message-from-renderer', 'Hello from renderer process!');

ipcRenderer.on('message-from-main', (event, arg) => {
  console.log(arg); // 输出主进程发送的消息
});

Electron中创建菜单

使用 Menu 和 MenuItem 类可以创建菜单

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });

  const template = [
    {
      label: 'File',
      submenu: [
        {
          label: 'Open',
          click() {
            // 打开文件的逻辑
          },
        },
        {
          label: 'Exit',
          role: 'quit',
        },
      ],
    },
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
  mainWindow.loadFile('index.html');

Electron中使用对话框

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

// 打开文件选择框
dialog.showOpenDialog(mainWindow, {
  properties: ['openFile'],
  filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }],
}, (filePaths) => {
  console.log(filePaths);
});

// 警告框
dialog.showMessageBox(mainWindow, {
  type: 'warning',
  title: '警告',
  message: '这是一个警告示例。',
  buttons: ['OK'],
}, (buttonIndex) => {
  console.log(buttonIndex);
});

Electron中使用文件操作系统

使用 Node.js 提供的 fs 模块，我们可以在 Electron 中进行文件系统操作。

const fs = require('fs');

// 读取文件
fs.readFile('path/to/file.txt', 'utf-8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

// 写入文件
const contentToWrite = 'Hello, Electron!';
fs.writeFile('path/to/newfile.txt', contentToWrite, (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('File written successfully!');
});

更多功能API可以查看官网了解，学习Electron，不要惧怕他，抱着兴趣去学习可以让我们的学习事半功倍。