React + Electron环境搭建

基础环境

• create-react-app创建react项目
• 添加electron
• 添加编译依赖electron-builder

开发环境处理

• 下载依赖concurrently 合并并监控多个node指令进程
• wait-on: 监控react热更新后，Electron也会进行刷新

进程通信

• main.js配置

webPreferences: {
			nodeIntegration: true, 
			contextIsolation: false, // 渲染进程是否可使用require
			preload: path.join(__dirname, 'preload.js')
		},

• React渲染进程

let ipcRenderer;
if (window?.require) {
	const electron = window?.require("electron");
	ipcRenderer = electron.ipcRenderer;
}

• 自定义操作列
  React定义事件

const min = () => {
		ipcRenderer?.send('window-min');
	};
	const screen = () => {
		ipcRenderer?.send('window-max');
	};
	const close = () => {
		ipcRenderer?.send('window-close');
	};

main.js定义接受通信监听

//接收窗口最小化通信
ipc.on('window-min', () => {
	mainWindow.minimize();
});

//接收窗口变小（还原到原状态）通信
ipc.on('window-max', () => {
	if (mainWindow.isMaximized()) {
		mainWindow.unmaximize();
	} else {
		mainWindow.maximize();
	}
});

//接收窗口最大化通信
ipc.on('window-close', () => {
	mainWindow.close();
});

圆角处理

1、main.js处理

backgroundColor: '#00000000', // 窗口背景色
transparent: true, // 设置透明窗体

2、React样式处理

// body要设置成透明色
body {
 background-color: rgba(0, 0, 0, 0);
}
// 其他div等主要元素设置
#root {
	border-radius: 24px;
	overflow: hidden;
	width: 100%;
    height: 100%;
}