返回

无需繁琐操作，Electron入门开发实战，主渲染进程通信揭秘

前端

Electron简介

Electron是一个基于Chromium和Node.js的开源框架，可以轻松构建跨平台的桌面应用程序。它将Chromium引擎和Node.js运行时打包在一起，使其能够在Windows、macOS和Linux上运行，而无需担心平台差异。凭借其简单易用的API，Electron已成为构建跨平台桌面应用程序的热门选择。

Electron入门实战

现在，让我们来一起进行Electron入门实战，一步一步搭建一个简单的项目，并体验主进程与渲染进程之间的通信。

项目搭建

  1. 创建命令
npx create-electron-app electron-tutorial
  1. 必要的配置

在创建项目后，需要进行一些必要的配置，包括：

  • 在package.json中，将main字段设置为main.js，这将指定应用程序的主进程文件。
  • 在scripts字段中，添加一个dev命令，用于在开发模式下运行应用程序。
  1. package.json
{
  "name": "electron-tutorial",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron-rebuild && electron ."
  },
  "dependencies": {
    "electron": "^20.0.0"
  },
  "devDependencies": {
    "electron-rebuild": "^5.0.0"
  }
}
  1. main.js
const { app, BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });

  win.loadFile('index.html');

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
  1. index.html
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

运行项目

  1. yarn dev

在项目根目录下，运行yarn dev命令，这将启动开发模式，并自动编译和运行Electron应用程序。

  1. 查看效果

打开浏览器，访问localhost:3000，即可看到一个简单的Electron应用程序。

主进程与渲染进程通信

Electron应用程序由两个进程组成：主进程和渲染进程。主进程负责管理应用程序的生命周期、窗口管理等，而渲染进程负责渲染应用程序的界面。主进程和渲染进程之间的通信是通过IPC（进程间通信）机制实现的。

在Electron中，可以使用ipcRenderer模块（在渲染进程中）和ipcMain模块（在主进程中）进行IPC通信。

主进程发送消息到渲染进程

// 主进程
const { ipcMain } = require('electron');

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg); // 打印收到的消息
});

// 渲染进程
const { ipcRenderer } = require('electron');

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

渲染进程发送消息到主进程

// 渲染进程
const { ipcRenderer } = require('electron');

ipcRenderer.on('message-from-main', (event, arg) => {
  console.log(arg); // 打印收到的消息
});

// 主进程
const { ipcMain } = require('electron');

ipcMain.send('message-from-main', 'Hello from main!');

结语

至此，我们已经完成了Electron的入门实战，并体验了主进程与渲染进程之间的通信。希望本指南能够帮助您快速上手Electron开发，打造出属于自己的跨平台桌面应用程序。