【Electron-vue】构建桌面应用(10)-nodejs调用exe传参获取返回值

1.前言

在前面做了一些Eelectron-vue的基础调研,包含项目构建,打包应用以及构建安装程序等,其中也碰到了一些问题,基本上能解决的都解决了。

做了前面的研究准备,接下来就是项目的实际开发。目前是在主进程中可以启动子进程(这里指另外一个exe程序),并且能获取到子进程返回的数据,所以接下来要调研的就是怎么向子进程传递参数以及怎么获取子进程中返回的数据?

2.父子进程的参数传递

前面使用的是spawn的方式去实现的父子进程之间的通信,这里也还是使用spawn实现父子进程之间的参数传递。

其中子进程传给父进程就不需要做过多的研究了,父进程在启动子进程的时候,在stdout中就能获取到子进程的返回值,在返回值中就能搞定参数的问题。

这里主要是实现父进程怎么传递参数给子进程。

我们的实现逻辑是

用户点击登录,渲染进程会往主进程中发送参数。
主进程获取到参数,将参数传递给子进程。
子进程获取参数进行校验,检查登录信息是否正确,并返回结果。
主进程获取到返回值将返回值传递给渲染进程,然后显示在页面,提示用户。

首先在渲染进程中需要使用imRenderer去发送事件给主进程
login.vue定义如下:

onSubmit() {
   
      this.$refs.loginForm.validate((valid) => {
   
        console.log("loginVo:", this.loginVo);
        this.loginVo.username += "@dynarose.com";
        if (valid) {
   
          this.$electron.ipcRenderer.send("login", 
### Electron Vue 开发流程 以下是基于提供的引用内容以及专业知识整理的关于如何使用 ElectronVue 进行开发的具体流程: #### 1. 初始化 Vue 项目 通过 Vite 工具快速初始化一个新的 Vue 项目。这一步可以通过以下命令完成: ```bash npm init @vitejs/app my-electron-app --template vue cd my-electron-app ``` 此操作会创建一个基础的 Vue 项目结构并准备后续集成 Electron 的环境[^1]。 #### 2. 安装 Electron 及其依赖项 为了实现桌面应用的功能,需要引入 Electron 并将其作为项目的开发依赖项安装: ```bash npm install electron --save-dev ``` 该步骤确保了项目能够利用 Electron 提供的能力来跨平台运行。 #### 3. 配置 Vite 支持 Electron 环境 为了让 Vue 应用能够在 Electron 主进程中正常加载和渲染页面,需进一步调整 Vite 的配置文件 `vite.config.js` 或其他相关设置以适配 Electron 的需求。 #### 4. 替代方案:克隆预设框架 (Electron-Vue) 如果希望减少手动配置的工作量,则可以选择直接从官方维护的模板库获取完整的初始代码包: ```bash git clone https://github.com/SimulatedGREG/electron-vue.git cd electron-vue ``` 随后按照提示执行必要的依赖安装过程[^2]。 #### 5. 启动开发服务器与调试模式下的主进程 分别开启两个独立的任务用于前端界面展示和服务端逻辑处理部分: - **Vue Dev Server**: 执行 `npm run dev` 来启动标准的 Webpack HMR 测试服务; - **Electron Main Process**: 新开另一个 shell 输入 `npm run electron:dev` 命令激活 NodeJS 脚本入口点[^3]^。 当两者均处于活动状态时,应该可以看到由 HTML 文件定义的基础窗口布局呈现出来。 #### 6. 添加插件增强功能体验 考虑加入像 `vue-electron` 这样的第三方扩展模块,它允许开发者更方便地调用电流层面上的操作系统特性而无需额外封装复杂接口[^4]。 #### 7. 构建生产版本的应用程序 最后,在确认所有核心业务均已测试完毕之后,遵循特定指南打包最终产物以便分发给目标受众群体。例如针对 TypeScript + Element Plus 场景下可能还需要做些自定义修改才能顺利完成整个编译链路[^5]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值