当前位置: 首页 > 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

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

相关文章:

  • 打卡今天学习的命令 (linux
  • Swift Combine 管道 从入门到精通三
  • Java实现批量视频抽帧2.0
  • java list集合相关介绍和方法使用操作
  • Quicker读取浏览器的书签(包括firefox火狐)
  • Camunda流程引擎数据库架构
  • Redis面试题43
  • vuecli3 执行 npm run build 打包命令报错:TypeError: file.split is not a function
  • EasyExcel分页上传数据
  • json、jsonlines格式化显示
  • Android:国际化弹出框
  • Linux下centos操作系统安装Mysql8.0过程及踩坑填补
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Menu组件
  • 通过Spring @Validated 更优雅的实现参数校验
  • Vue3中路由配置Catch all routes (“*“) must .....问题
  • 【译】理解JavaScript:new 关键字
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • extract-text-webpack-plugin用法
  • JS函数式编程 数组部分风格 ES6版
  • Laravel 菜鸟晋级之路
  • Leetcode 27 Remove Element
  • MySQL的数据类型
  • php ci框架整合银盛支付
  • springMvc学习笔记(2)
  • uni-app项目数字滚动
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 关于使用markdown的方法(引自CSDN教程)
  • 缓存与缓冲
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 力扣(LeetCode)357
  • 应用生命周期终极 DevOps 工具包
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • 在Mac OS X上安装 Ruby运行环境
  • 追踪解析 FutureTask 源码
  • 走向全栈之MongoDB的使用
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • 如何用纯 CSS 创作一个货车 loader
  • #ifdef 的技巧用法
  • (+4)2.2UML建模图
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (第61天)多租户架构(CDB/PDB)
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (附源码)ssm高校实验室 毕业设计 800008
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (解决办法)ASP.NET导出Excel,打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • (牛客腾讯思维编程题)编码编码分组打印下标题目分析
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (转) Android中ViewStub组件使用
  • (转)大型网站的系统架构
  • .equal()和==的区别 怎样判断字符串为空问题: Illegal invoke-super to void nio.file.AccessDeniedException
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .net refrector
  • //解决validator验证插件多个name相同只验证第一的问题
  • @ModelAttribute 注解