Electron+React 搭建桌面应用

news2025/5/26 8:01:30

创建应用程序

创建 Electron 应用

使用 Webpack 创建新的 Electron 应用程序：

npm init electron-app@latest my-new-app -- --template=webpack

启动应用

npm start

设置 Webpack 配置

添加依赖包，确保可以正确使用 JSX 和其他 React 功能：

npm install --save-dev @babel/core @babel/preset-react babel-loader

修改配置文件：

// webpack.rules.js
module.exports = [
  // ... existing loader config ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  }
  // ... existing loader config ...
];

集成前端 React

添加 React 依赖

将基本的 React 包添加到 dependencies：

npm install --save react react-dom

集成 React 代码

现在可以开始在 Electron 中编写和使用 React 组件了。在 src/app.jsx 中编写 React 代码：

import * as React from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.body);
root.render(<h2>Hello from React!</h2>);

添加渲染进程

将 React 代码添加到渲染进程 src/renderer.js 中：

import './index.css';
import './app.jsx';
console.log('👋 This message is being logged by "renderer.js", included via webpack');

启动应用

npm start

主进程和渲染进程通信

在 Electron 中，渲染进程和主进程之间的通信需要通过预加载脚本 preload.js 来进行，preload.js 的作用就是作为渲染进程和主进程之间通信的桥梁。

渲染进程 -> 主进程

当用户在界面上点击最小化或者最大化，或者更改某些全局设置（如语言偏好、主题等）时，这些更改通常由渲染进程触发，但实际执行由主进程负责。在这种情况下，渲染进程调用主进程的方法以应用这些更改，但不需要等待主进程的回包，因为用户界面的响应可以立即更新，而不必等待设置保存的确认。

预加载脚本

在预加载脚本 preload.js 中定义双方通信方法，使用 ipcRenderer.send 将信息发往主进程：

// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts

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

contextBridge.exposeInMainWorld('my_app_name', {
    // 最小化
    minimize: () => {
        ipcRenderer.send('minimize')
    },
    // 最大化
    maximize: () => {
        ipcRenderer.send('maximize')
    }
})

渲染进程

在渲染进程中，使用 window.app_name.func_name 调用预加载脚本里的方法：

import * as React from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.body);
root.render(<div>
    <button onClick={() => {
        window.my_app_name.minimize()
    }}>最小化</button>
    <button onClick={() => {
        window.my_app_name.maximize()
    }}>最大化</button>
</div>);

主进程

在主进程中，使用 ipc.Main.on 监听事件，并执行具体操作：

const {app, BrowserWindow, ipcMain} = require('electron');
const path = require('node:path');

let mainWindow;

const createWindow = () => {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // 预加载脚本，用于在主进程和渲染进程之间安全地共享数据
        },
    });

    // 加载应用的index.html。
    mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

    // 打开开发者工具。
    mainWindow.webContents.openDevTools();
};

// .....其他代码.....

// 监听来自渲染进程的'minimize'消息，最小化主窗口。
ipcMain.on('minimize', event => {
    mainWindow.minimize();
})

// 监听来自渲染进程的'maximize'消息，最大化主窗口。
ipcMain.on('maximize', event => {
    mainWindow.maximize();
})

渲染进程 <-> 主进程

在 Electron 中，用户可能需要打开、保存或者删除文件。当用户点击一个按钮或者菜单项来执行这些操作时，渲染进程会向主进程发送一个消息，请求执行相应的操作。主进程接到消息后，调用系统API来完成文件操作，并将操作结果发送回渲染进程，渲染进程根据主进程的响应更新界面状态等。

预加载脚本

在预加载脚本 preload.js 中定义双方通信方法，使用 ipcRenderer.invoke 将信息发往主进程，并将结果返回到渲染进程：

// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts

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

contextBridge.exposeInMainWorld('my_app_name', {
    // 选择文件
    chooseFile: async () => {
        const path = await ipcRenderer.invoke('choose-file');
        return path;
    },
})

渲染进程

在渲染进程中，使用 window.app_name.func_name 调用预加载脚本里的方法：

import * as React from 'react';
import {createRoot} from 'react-dom/client';

const root = createRoot(document.body);
root.render(<div>
    <button onClick={() => {
        window.my_app_name.chooseFile().then(result => {
            console.log(result['filePaths'][0])
            alert(result['filePaths'][0])
        })
    }}>选择文件
    </button>
</div>);

主进程

在主进程中，使用 ipc.handle 监听事件，执行操作并将结果返回给预加载脚本：

const {app, BrowserWindow, ipcMain, dialog} = require('electron');
const path = require('node:path');

let mainWindow;

const createWindow = () => {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // 预加载脚本，用于在主进程和渲染进程之间安全地共享数据
        },
    });

    // 加载应用的index.html。
    mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

    // 打开开发者工具。
    mainWindow.webContents.openDevTools();
};

// .....其他代码.....

// 监听来自渲染进程的'choose-file'消息，选择文件，并将结果返回给预加载脚本。
ipcMain.handle('choose-file', async (event, data) => {
    const result = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
        properties: ['openFile']
    });
    return result
});

主进程 -> 渲染进程

Electron 应用启动时，有时候需要由主进程从本地存储或者服务器来加载应用的配置信息（窗口大小、位置、主题设置等）。主进程加载完设置后，通过单向通信将配置信息发送给渲染进程。渲染进程接收到配置信息后，根据这些信息调整界面布局或者样式。通常用于初始化或者更新应用的界面设置。

主进程

在主进程中，使用 mainWindow.webContents.send 将消息发送给预加载脚本：

const {app, BrowserWindow, ipcMain, dialog} = require('electron');
const path = require('node:path');

let mainWindow;

const createWindow = () => {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, // 预加载脚本，用于在主进程和渲染进程之间安全地共享数据
        },
    });

    // 加载应用的index.html。
    mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

    // 打开开发者工具。
    mainWindow.webContents.openDevTools();

    // 设置十秒钟后发送消息到渲染进程
    setTimeout(() => {
        mainWindow.webContents.send('message-from-main', 'Hello from main process!');
    }, 3000); // 10000 毫秒等于 10 秒
};

// .....其他代码.....

预加载脚本

在预加载脚本 preload.js 中使用 ipcRenderer.on 监听消息，然后通过回调函数将消息传递给渲染进程：

// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts

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

contextBridge.exposeInMainWorld('my_app_name', {
    msgFromMain: (callback) => ipcRenderer.on('message-from-main', (event, message) => {
        callback(message);
    })
})

渲染进程

在渲染进程中，使用 useEffect 来监听消息并作出相应处理：

import React, { useEffect, useState } from 'react';

const App = () => {
    const [messageFromMain, setMessageFromMain] = useState('');

    useEffect(() => {
        // 调用预加载脚本中暴露的 msgFromMain 方法
        window.my_app_name.msgFromMain((message) => {
            setMessageFromMain(message);
        });

        // 清理函数（可选），如果需要的话可以在这里注销监听器
        return () => {
            // 如果有必要的话，可以在这里注销监听器，但在这个例子中我们不需要，因为ipcRenderer.on会自动管理监听器的生命周期
        };
    }, []); // 确保这个 effect 只运行一次

    return (
        <div>
            {/* 显示从主进程接收到的消息 */}
            <p>{messageFromMain}</p>
        </div>
    );
};

export default App;

【1】React | Electron Forge

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1593120.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java基础（一）--语法入门

Java基础（一）--语法入门

文章目录 第一章、语法入门一、Java简介1、JVM2、Java程序执行过程3、JDK4、JRE5、JDK、JRE和JVM三者关系 二、Java常量与变量1、标识符2、关键字3、保留字4、变量5、数据类型6、常量 三、运算符1、算术运算符2、赋值运算符3、关系运算符4、逻辑运算符5、条件运算符6、运算符的…
阅读更多...
全国各省环境规制强度数据（2004-2022年）

全国各省环境规制强度数据（2004-2022年）

01、数据简介 以保护环境为目的&#xff0c;对各种环境污染行为进行规制&#xff0c;政府相关政策规制&#xff0c;是社会性规制的重要内容&#xff0c;包含大气、水、废弃物、噪声污染等外部行为&#xff0c;对这些行为进行规制就是要将整个社会为其承担的成本转化为其自身承…
阅读更多...
funasr 麦克风实时流语音识别

funasr 麦克风实时流语音识别

参考： https://github.com/alibaba-damo-academy/FunASR chunk_size 是用于流式传输延迟的配置。[0,10,5] 表示实时显示的粒度为 1060=600 毫秒，并且预测的向前信息为 560=300 毫秒。每个推理输入为 600 毫秒（采样点为 16000*0.6=960），输出为相应的文本。对于最后一个语音…
阅读更多...
根据状态转移图实现时序电路

根据状态转移图实现时序电路

描述 某同步时序电路的状态转换图如下&#xff0c;→上表示“C/Y”&#xff0c;圆圈内为现态&#xff0c;→指向次态。 请使用D触发器和必要的逻辑门实现此同步时序电路&#xff0c;用Verilog语言描述。 如图所示&#xff1a; 电路的接口如下图所示&#xff0c;C是单bit数据…
阅读更多...
MySQL基础入门上篇

MySQL基础入门上篇

MySQL基础 介绍 mysql -uroot -p -h127.0.0.1 -P3306项目设计 具备数据库一定的设计能力和操作数据的能力。 数据库设计DDL 定义 操作 显示所有数据库 show databases;创建数据库 create database db02;数据库名唯一&#xff0c;不能重复。 查询是否创建成功 加入一些…
阅读更多...
文本检索粗读

文本检索粗读

一.前情提要 1.本文理论为主&#xff0c;并且仅为个人理解&#xff0c;能力一般&#xff0c;不喜勿喷 2.本文理论知识较为散碎 3.如有需要&#xff0c;以下是原文&#xff0c;更为完备 Neural Corpus Indexer 文档检索【论文精读47】_哔哩哔哩_bilibili 二.正文 &#xf…
阅读更多...
重大璧山院_APP_apk_安卓端下载

重大璧山院_APP_apk_安卓端下载

主要是方便去重庆大学璧山研究院搞科研的学生&#xff0c; 这个安卓安装包&#xff0c;在网上很难搜到。 找半天才搞到手、蓝奏云下载 https://wwb.lanzn.com/iqnro1v1bwkh 密码:i3n2
阅读更多...
防止邮箱发信泄露服务器IP教程

防止邮箱发信泄露服务器IP教程

使用QQ邮箱,网易邮箱,189邮箱,新浪邮箱,139邮箱可能会泄露自己的服务器IP。 泄露原理&#xff1a;服务器通过请求登录SMTP邮箱服务器接口&#xff0c;对指定的收件人发送信息。 建议大家使用商业版的邮箱&#xff0c;比如阿里云邮箱发信等 防止邮件发信漏源主要关注的是确保邮件…
阅读更多...
C语言 数据输入输出

C语言 数据输入输出

本文 我们来说 数据的输入与输出 及数据的运算 在程序的运算工程中 往往需要输入一些数据 而程序的运算 所得到的运算结果又需要输出给用户 因此 数据的输入与输出 就显得非常重要 在C语言中 不提供专门的输入输出语句 所有的输入输出 都是通过对标准库的调用 来实现的 一般 …
阅读更多...
权威Scrum敏捷开发企业级实训/敏捷开发培训课程

权威Scrum敏捷开发企业级实训/敏捷开发培训课程

课程简介 Scrum是目前运用最为广泛的敏捷开发方法&#xff0c;是一个轻量级的项目管理和产品研发管理框架。 这是一个两天的实训课程&#xff0c;面向研发管理者、项目经理、产品经理、研发团队等&#xff0c;旨在帮助学员全面系统地学习Scrum和敏捷开发, 帮助企业快速启动敏…
阅读更多...
抖音滑块验证码加密的盐的位置

抖音滑块验证码加密的盐的位置

最近更新后之前很容易找到盐的位置的方法变了&#xff0c;抖音特意把盐隐藏起来了 {"reply": "RJC","models": "yAd8rl","in_modal": "DTn0nD2","in_slide": "ou7H0Ngda","move": …
阅读更多...
基于java+springboot+vue实现的网上购物系统（文末源码+Lw+ppt）23-42

基于java+springboot+vue实现的网上购物系统（文末源码+Lw+ppt）23-42

摘 要 随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决生活上的问题&#xff0c;网上购物系统展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为…
阅读更多...
走进MySQL：从认识到入门（针对初学者）

走进MySQL：从认识到入门（针对初学者）

一&#xff0c;引言 MySQL是一款久负盛名且广泛应用的关系型数据库管理系统&#xff0c;自1995年Michael Widenius和David Axmark在瑞典和芬兰发起研发以来&#xff0c;其发展历程可谓辉煌且深远。作为开源软件的代表&#xff0c;MySQL以其卓越的成本效益、高性能及高可靠性赢得…
阅读更多...
【数据结构与算法】：二叉树经典OJ

【数据结构与算法】：二叉树经典OJ

目录 1. 二叉树的前序遍历 (中&#xff0c;后序类似)2. 二叉树的最大深度3. 平衡二叉树4. 二叉树遍历 1. 二叉树的前序遍历 (中&#xff0c;后序类似) 这道题的意思是对二叉树进行前序遍历&#xff0c;把每个结点的值都存入一个数组中&#xff0c;并且返回这个数组。 思路&…
阅读更多...
c++11 标准模板（STL）本地化库 - 平面类别（std::codecvt） - 在字符编码间转换，包括 UTF-8、UTF-16、UTF-32 （四）

c++11 标准模板（STL）本地化库 - 平面类别（std::codecvt） - 在字符编码间转换，包括 UTF-8、UTF-16、UTF-32 （四）

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 在字符编码间转换&#xff0c;包括 UTF-8、UTF-16、UTF-32 std::…
阅读更多...
ReactRouter

ReactRouter

React-Router 概念&#xff1a;一个路劲path对应一个组件component 当我们在浏览器中访问一个path的时候&#xff0c;path对应的组件会在页面中进行渲染路由语法&#xff1a; import {createBrowserRouter, RouterProvider} from react-router-dom// 1. 创建router实例对象并…
阅读更多...
【数据结构】习题之链表的回文结构和相交链表

【数据结构】习题之链表的回文结构和相交链表

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《数据结构》 &#x1f389;前路漫漫亦灿灿 前言 今日的习题是关于链表的&#xff0c;分别是链表的回文结构和相交链表的判断。 链表的回文结构 题目为&#xff1a;链表的回文结…
阅读更多...
RUM 最佳实践-交互延迟的探索与发现

RUM 最佳实践-交互延迟的探索与发现

FID 在互联网高速发展的时代&#xff0c;用户体验已成为企业竞争的关键所在。网页性能作为用户体验的重要组成部分&#xff0c;直接影响着用户的满意度和工作效率。First Input Delay&#xff08;FID&#xff09;作为衡量网页性能的重要指标&#xff0c;越来越受到业界关注。今…
阅读更多...
【RV1106的ISP使用记录之二】设备树的构建

【RV1106的ISP使用记录之二】设备树的构建

基于MIPI接口的两种摄像头接入方式&#xff0c;理清楚各链路关系&#xff0c;方便后续的开发调试工作&#xff0c;先上一张图&#xff0c;后面再补充解释。
阅读更多...
一起学习python——基础篇（20）

一起学习python——基础篇（20）

前言&#xff0c;之前经常从网上找一些免费的接口来测试&#xff0c;有点受制于人的感觉。想了想还不如直接写一个接口&#xff0c;这样方便自己测试。自己想返回什么格式就返回什么样子&#xff0c;不用担心服务报错&#xff0c;因为自己就可以完全掌控。然后宿舍二哥告诉我py…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023