Electron开发 umi react 应用

2024-05-01 03:04

本文主要是介绍Electron开发 umi react 应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Electron 是一个跨平台桌面端的应用框架,electron 底层依赖3 个核心组件 Chromium、Node.js、Electron API,Chromium 是 Chrome 的开源版本,Node.js可以编写后台应用程序,集成 Node.js 到 Electron,使得 Electron 可以使用 Node.js 提供的功能,例如访问本地文件和数据库。

Electron可以理解成一个应用的壳子,Web应用自身是不能访问本地资源个无论是文件还是数据库,唯一可选择的方案是 local storage,但是 local storage是有大小限制的,大多数浏览器都只能存储 5M,只能对少量的数据做缓存,大量的业务数据肯定是不能满足的。

Electron 通过主进程和渲染进程实现Web 与本地资源的互相访问,下面一个例子实现 Web 调用主线程保存文件的功能。

初始化并安装依赖

初始化 Electron 项目并安装依赖

#在目标目录下运行
npm init -y
npm install --save-dev electron

修改配置文件

修改项目配置文件,入口文件,修改 main.js,添加启动命令:start: “electron .”

{"name": "electron","version": "1.0.0","main": "main.js","keywords": [],"author": "","scripts": {"start": "electron ."},"license": "ISC","description": "","devDependencies": {"electron": "^30.0.1"}
}

创建主进程文件以及网页

创建项目文件

  1. 主进程文件
#main.js
const { ipcMain, app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'), //运行接口定义脚本}});mainWindow.loadFile('index.html');
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});const os = require('os');
const fs = require('fs');
const tmpFilePath = path.join(os.tmpdir(), 'elec.txt');ipcMain.on('save-file', (event, text) => {fs.writeFile(tmpFilePath, text, (err) => {if (err) {console.error('File write failed:', err);} else {console.log('File saved successfully');}});
});
  1. 页面文件
<!DOCTYPE html>
<html>
<head><title>My Electron App</title>
</head>
<body><h1>保存文件</h1><input id="textInput" type="text" placeholder="Enter some text" /><button id="saveButton">Save to File</button><script src="renderer.js"></script>
</body>
</html>
  1. 定义 IPC API,定义暴露给页面的 API
// preload.js
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('api', {saveFile: (text) => ipcRenderer.send('save-file', text)}
);
  1. 页面逻辑
// renderer.js
document.getElementById('saveButton').addEventListener('click', function () {const text = document.getElementById('textInput').value;window.api.saveFile(text);
});

运行

输入测试信息,提交之后,可以看到文件生成成功。

umi react 开发 Electron 应用

umi 默认支持 electron 模板,直接安装运行。

pnpm create umi --template electron

不知为何呢缺了几个依赖,需要安装之后才能成功启动。

pnpm install clear-module --save-dev
pnpm install lodash  --save-dev
pnpm install chokidar  --save-dev

umi electron 项目打开项目的位置是本地开发网址,这是为什么umi electro可以热加载。
在这里插入图片描述
umi electron 有两个目录, .electron 是开发环境相关文件,.electron-production 是生产环境相关文件。
在这里插入图片描述
Electron 框架使用方便,按照前端项目开放方式,需要和原生系统进行整合或者交互的,通过Node.js 进行实现。

这篇关于Electron开发 umi react 应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/950581

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

hdu1394(线段树点更新的应用)

题意:求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质,在0到n-1这些数字组成的乱序排列,将第一个数字A移到最后一位,得到的逆序数为res-a+(n-a-1) 知道上面的知识点后,可以用暴力来解 代码如下: #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设