小记:把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 路由定义文件