关于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);
});
相关推荐
翻滚吧键盘9 分钟前
js代码09
开发语言·javascript·ecmascript
万少39 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架