当前位置: 首页 > news >正文

小记:把react项目从web迁移到electron

electron的启动模版:electron项目启动模版资源-CSDN文库

使用vite构建,包含了react react-router-dom tailwindcss mui  主副进程通讯

使用:

解压后使用vscode打开

终端里:npm install

然后npm run dev

打包:

windows系统计算机
npm run build:win
国产操作系统计算机
npm run build:linux

src/main/index.js://创建窗口,ipc通讯
..............//更新单位名称ipcMain.on("updatecompany", async (event, arg) => {// console.log(arg);const settings = {method: "PUT",headers: {Accept: "application/json","Content-Type": "application/json"},body: JSON.stringify({companyname: `${arg}`})};const res = await fetch(`http://192.168.1.99:7077/api/v1/store/company`, settings);const data = await res.json();event.returnValue = data;});//获取单位名称ipcMain.on("getcompany", async (event) => {const res = await fetch(`http://192.168.1.99:7077/api/v1/store/company`);const data = await res.json();event.returnValue = data;});...............

scr/preload/index.jsimport { contextBridge } from "electron";
import { electronAPI } from "@electron-toolkit/preload";// Custom APIs for renderer
const api = {};// Use `contextBridge` APIs to expose Electron APIs to
// renderer only if context isolation is enabled, otherwise
// just add to the DOM global.
if (process.contextIsolated) {try {contextBridge.exposeInMainWorld("electron", electronAPI);contextBridge.exposeInMainWorld("api", api);} catch (error) {console.error(error);}
} else {window.electron = electronAPI;window.api = api;
}

src/renderer/scr/....:

company.jsx 示例文件

...
useEffect(() => {//ipc通讯const result = window.electron.ipcRenderer.sendSync("getcompany");companyRef.current.value = result.companyname;}, []);
...

home.jsx 主页文件

main.jsx 启动文件

routemain.jsx 路由定义文件

相关文章:

  • 蒸馏微调DeepSeek-R1-Distill-Qwen-7B
  • Leetcode 刷题记录 16 —— 栈
  • [windows工具]OCR识文找图工具1.2版本使用教程及注意事项
  • [windows工具]OCR多区域识别导出excel工具1.2版本使用教程及注意事项
  • Unity3D仿星露谷物语开发63之NPC移动
  • XR-RokidAR-ADB环境搭建
  • OpenSpeedy:让游戏体验“飞”起来的秘密武器
  • 【Shader学习】完整光照效果
  • Unity基础-范围检测
  • 【Quest开发】初始项目环境配置
  • 用c语言实现简易c语言扫雷游戏
  • 嵌入式硬件篇---常见电平标准
  • NJet Portal 应用门户管理介绍
  • 实时操作系统(FreeRTOS、RT-Thread)RISC-V
  • 基于SpringBoot和Leaflet的电影票房时序展示-以《哪吒2》为例
  • Django图片管理系统
  • 在idea上打包DolphinScheduler
  • VTK 显示大量点云数据及交互(点云拾取、着色、测量等)功能
  • SAP实施服务专家——哲讯科技,赋能企业智慧升级
  • RTDETRv2 pytorch 官方版自己数据集训练遇到的问题解决
  • 沈阳网站建设工作/南昌网站建设
  • dw怎么做秋季运动会网站/chrome手机安卓版
  • 门户网站前期网络采集商家信息免费发布/2022年最近十大新闻
  • 如何做wap网站/公司网站设计图
  • wordpress破解密码/文山seo
  • 网站域名解析失败/广州seo技术外包公司