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

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

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和

Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux

的跨平台应用。

1.项目效果, 我这里的本地服务是一个离线的地图

  1. 文件目录

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

  1. electron.js 主进程, 编写startServer和stopServer的方法
javascript 复制代码
// 打开窗口
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项目:

powershell 复制代码
npm run build

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

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

powershell 复制代码
npm run electron:dev

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

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

powershell 复制代码
npm run electron:build

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

相关推荐
_AaronWong2 小时前
实现一个鼠标滚轮横向滚动需求
前端·electron
_AaronWong1 天前
Electron 桌面应用侧边悬浮窗口设计与实现
前端·electron
_AaronWong3 天前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
alphageek83 天前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
xiaoyan20154 天前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
槿泽5 天前
Vue集成Electron目前最新版本
前端·vue.js·electron
LDM>W<6 天前
Electron下载失败
前端·javascript·electron
EndingCoder6 天前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
小圣贤君7 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
ayaya_mana7 天前
BilldDesk:基于Vue3+WebRTC+Nodejs+Electron的开源远程桌面控制
electron·开源·webrtc