关于electron进程管理的一些认识

electron的一些认识

一、electron是什么

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用的框架,用来创建可在 Windows、mac 和 Linux 上运行的跨平台应用,说白了这个桌面应用就是包含Chromium和nodejs的浏览器套壳

市面上electron开发的软件有vs code、github desktop和markdown工具Typora等等

二、electron的应用进程管理

在 Electron 中,应用程序通常由两个主要的进程组成:主进程(Main Process)和渲染进程(Renderer Process)。

  • 主进程是 Electron 应用的入口点,通常在 main.js 文件中定义。主进程的主要职责包括:

    1. 创建窗口:使用 BrowserWindow 模块创建和管理浏览器窗口。
    2. 管理应用生命周期:使用 app 模块处理应用的启动、关闭、打开文件等事件。
    3. 处理系统事件:监听系统级别的事件,如窗口关闭、应用激活等。
    4. 跨进程通信:使用 ipcMain 模块与渲染进程进行通信。
  • 渲染进程负责渲染用户界面,通常在 index.html 和 renderer.js 文件中定义。渲染进程的主要职责包括:

    1. 渲染用户界面:使用 HTML、CSS 和 JavaScript 构建用户界面。
    2. 处理用户交互:响应用户的点击、输入等事件。
    3. 跨进程通信:使用 ipcRenderer 模块与主进程进行通信。
    4. 使用 Node.js API:在渲染进程中直接使用 Node.js API,但需要注意安全性和性能问题。

三、关于electron应用进程的一些示例

1、主进程(main.js)

javascript 复制代码
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js') // 预加载脚本
    }
  });

  win.loadFile('index.html');
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// 处理来自渲染进程的消息
ipcMain.on('message-from-renderer', (event, arg) => {
  console.log('Message from renderer:', arg);
  event.reply('message-from-main', 'Hello from main process!');
});

2、渲染进程(renderer.js)

javascript 复制代码
const { ipcRenderer } = require('electron');

// 发送消息到主进程
document.getElementById('send-button').addEventListener('click', () => {
  ipcRenderer.send('message-from-renderer', 'Hello from renderer process!');
});

// 接收主进程的消息
ipcRenderer.on('message-from-main', (event, arg) => {
  console.log('Message from main:', arg);
});

3、预加载脚本(preload.js)

预加载脚本用于在渲染进程中暴露一些安全的 API,同时限制对 Node.js API 的直接访问。

javascript 复制代码
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
  sendMessage: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  receiveMessage: (channel, func) => {
    ipcRenderer.on(channel, (event, ...args) => func(...args));
  }
});

4、跨进程通信

Electron 提供了 ipcMain 和 ipcRenderer 模块来实现主进程和渲染进程之间的通信。

1. 主进程发送消息到渲染进程:

javascript 复制代码
// 主进程
const { ipcMain } = require('electron');
ipcMain.on('message-from-renderer', (event, arg) => {
  event.reply('message-from-main', 'Hello from main process!');
});

2. 渲染进程发送消息到主进程:

javascript 复制代码
// 渲染进程
const { ipcRenderer } = require('electron');
ipcRenderer.send('message-from-renderer', 'Hello from renderer process!');

3. 渲染进程接收主进程的消息:

javascript 复制代码
// 渲染进程
ipcRenderer.on('message-from-main', (event, arg) => {
  console.log('Message from main:', arg);
});
相关推荐
浏览器爱好者1 分钟前
Chrome与火狐哪个浏览器的性能表现更好
前端·chrome
Topstip4 分钟前
在 Google Chrome 上查找并安装 SearchGPT 扩展
前端·人工智能·chrome·gpt·ai·chatgpt
gqkmiss4 分钟前
Chrome 130 版本开发者工具(DevTools)更新内容
前端·chrome·chrome devtools·开发者工具·chrome 130
小远yyds19 分钟前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
weixin_516875651 小时前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
皮卡穆1 小时前
JavaScript 变量作用域与函数调用机制:var 示例详解
javascript
_oP_i1 小时前
Unity 中使用 WebGL 构建并运行时使用的图片必须使用web服务器上的
前端·unity·webgl
H_HX1261 小时前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http
羊小猪~~1 小时前
前端入门一之CSS知识详解
前端·javascript·css·vscode·前端框架·html·javas
哪 吒1 小时前
华为OD机试 - 无重复字符的元素长度乘积的最大值(Python/JS/C/C++ 2024 C卷 100分)
javascript·python·华为od