Electron开发 umi react 应用

devtools/2024/9/24 6:39:11/

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 进行实现。


http://www.ppmy.cn/devtools/31815.html

相关文章

P1094 [NOIP2007 普及组] 纪念品分组

传送门&#xff1a;P1094 [NOIP2007 普及组] 纪念品分组 一道裸贪心啊&#xff0c;没什么难度&#xff0c;就是证明比较麻烦&#xff0c;但是题解里写的听清楚的&#xff0c;就先不放了。 解法就是先排序&#xff0c;然后定义两个指针&#xff0c;指向数组的头和尾&#xff0c…

深度学习之基于Matlab BP神经网络烟叶成熟度分类

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 烟叶的成熟度是评估烟叶品质的重要指标之一&#xff0c;它直接影响着烟叶的口感、香气和理化特性。传…

华为平板手机如何清理应用市场的存储空间

如何清理应用市场的存储空间 适用产品&#xff1a; 手机&#xff0c;平板 适用版本&#xff1a;不涉及系统版本 如果您的应用市场显示应用的数据较大&#xff0c;可能是下载的安装包没有安装成功&#xff0c;导致安装包未自动删除。&#xff08;可参考&#xff1a;应用市场下…

FANUC机器人SOCKET断开KAREL程序编写

一、添加一个.KL文件创建编辑断开指令 添加一个KL文件用来创建karel程序中socket断开指令 二、断开连接程序karel代码 PROGRAM SOC_DIS %COMMENT SOCKET断开 %INCLUDE klevccdf VAR str_input,str_val : STRING[20] status,data_type,int_val : INTEGER rel_val : REALBEGING…

这是一个简单的照明材料网站,后续还会更新

1、首页效果图 代码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>爱德照明网站首页</title><style>/*外部样式*/charset "utf-8";*{margin: 0;padding: 0;box-sizing: border-box;}a{text-dec…

Content type ‘application/json;charset=UTF-8‘ not supported异常的解决过程

1.首先说明开发场景 *就是对该json格式数据传输到后台 后台实体类 import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.Data; import org.sp…

二叉树:数据结构的分形之美

1.树形结构 1.1概念 树是一种非线性的数据结构&#xff0c;它是由n(n>0)个有限结点组成一个具有层次关系的集合。把他叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就说它的根朝上&#xff0c;而叶朝下的。它具有以下的特点&#xff1a; 有一个特殊的节点&#xff0…

香港BGP服务器和香港双线服务器的区别

香港BGP服务器和香港双线服务器在网络架构和连接方式上有一些区别&#xff0c;主要体现在以下几个方面&#xff1a; 网络连接方式&#xff1a; 香港BGP服务器采用BGP(边界网关协议)技术&#xff0c;通常连接到多个不同的网络服务提供商(ISP)&#xff0c;并通过BGP协议动态选择最…