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

5.electron之主进程起一个本地服务

如果可以实现记得点赞分享,谢谢老铁~

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和
Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux
的跨平台应用。

1.项目效果, 我这里的本地服务是一个离线的地图
在这里插入图片描述
2. 文件目录
在这里插入图片描述

我的目的就是将 public/foxigis-server-lite-win/foxigis-server-lite-win.exe 这个文件起一个服务便于本地离线地图调用。

  1. electron.js 主进程, 编写startServer和stopServer的方法
// 打开窗口
function createWindow() {mainWindow = new BrowserWindow({width: 1200,height: 700,minWidth: 1200, // 设置窗口的最小宽度minHeight: 700, // 设置窗口的最小高度icon: __dirname + "/favicon.ico",});mainWindow.title = 'UniSAR';mainWindow.maximize();mainWindow.loadFile(appConfig.fileUrl);
}let childProcess = null;
function startServer() {// 构建 .exe 文件的绝对路径const exePath = path.join(__dirname, 'foxgis-server-lite-win', 'foxgis-server-lite-win.exe');const childProcess = cp.spawn(exePath);console.log('=========================' + exePath)childProcess.on('close', (code) => {console.log(`exe process exited with code ${code}`);});// 监听服务 B 的输出childProcess.stdout.on('data', (data) => {console.log(`Service B Output: ${data}`);// 在这里可以根据输出信息判断服务是否已经启动// 例如,检查输出中是否包含特定的启动完成标志if (data.indexOf('1234') !== -1) {// 服务已经启动,可以执行服务 A 中调用服务 B API 的代码// PS: 这里确保本地服务启动起来才来调用窗口的创建函数。createWindow();}});// 监听服务 B 的错误信息childProcess.stderr.on('data', (data) => {console.error(`Service B Error: ${data}`);// 这里可以处理服务 B 的错误信息});// 在服务 B 启动后执行其他逻辑childProcess.on('exit', (code) => {console.log(`Service B exited with code ${code}`);// 这里可以处理服务 B 退出后的逻辑});
}function stopServer() {if (childProcess !== null) {childProcess.kill('SIGTERM'); // 发送 SIGTERM 信号终止子进程childProcess = null; // 清空对子进程的引用console.log('服务已停止');} else {console.log('没有运行的服务');}
}app.on('ready', () => {// 开始本地服务启动startServer()});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});app.on("window-all-closed", () => {if (process.platform !== "darwin") {// 停止本地服务stopServer()app.quit();}
});// 在应用退出时关闭服务
app.on('before-quit', () => {// 停止本地服务stopServer();
});

4.运行以下命令来构建React项目:

npm run build

PS:打开build目录下的index.html文件,发现是一片空白😱,F12一下,发现是资源路径不对。解决方案是在package.json中添加"homepage": “./”。添加之后再进行build,打开index.html,就能看到正常页面了。

5.运行以下命令来启动Electron应用程序:

npm run electron:dev

这将启动Electron应用程序,并加载React应用程序的构建文件。

6.运行以下命令来打包Electron应用程序:

npm run electron:build

收工!谢谢老铁们的点赞收藏~

http://www.lryc.cn/news/295512.html

相关文章:

  • 爬取58二手房并用SVR模型拟合
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RichText组件
  • 7.electron之渲染线程发送事件,主进程监听事件
  • thinkphp6入门(19)-- 中间件向控制器传参
  • Flink Format系列(2)-CSV
  • Spring Data Envers 数据审计实战2 - 自定义监听程序扩展审计字段及字段值
  • 一个 SpringBoot 项目能同时处理多少请求?
  • 计算机网络——网络
  • C语言探索:选择排序的实现与解读
  • Golang 学习(二)进阶使用
  • ubuntu22.04@laptop OpenCV定制化安装
  • linux系统非关系型数据库redis
  • 【LeetCode: 292. Nim 游戏+ 博弈问题】
  • Android 9.0 禁用adb reboot recovery命令实现正常重启功能
  • 分析网站架构:浏览器插件
  • CentOS7搭建Hadoop集群
  • 10.0 Zookeeper 权限控制 ACL
  • 容器化技术基础概念:雪花服务器与凤凰服务器
  • 解决maven 在IDEA 下载依赖包速度慢的问题
  • 用python编写爬虫,爬取二手车信息+实验报告
  • 代码随想录算法训练营第二十九天|491.非递减子序列、46.全排列、47.全排列II
  • (2)(2.14) SPL Satellite Telemetry
  • OTG -- STM32 OTG驱动代码下载及简述(三)
  • STM32F407 CAN参数配置 500Kbps
  • python常用的深度学习框架
  • 将xyz格式的GRACE数据转成geotiff格式
  • 【机器学习】机器学习流程之收集数据
  • IP风险画像在企业网络统计与安全防范中应用
  • Unity类银河恶魔城学习记录3-6 Finalize BattleState源代码 P52
  • 【语音合成】中文-多情感领域-16k-多发音人