【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", this.loginVo);
          this.$electron.ipcRenderer.on('login-message',(event, arg)=>{
            console.log('登陆结果:',arg)
          })
          // this.$router.push("/home");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

主要的代码是下面，将用户输入的数据对象发送给主进程

this.$electron.ipcRenderer.send("login", this.loginVo);

在主进程main.js中定义如下

// 监听登陆渲染进程事件
ipcMain.on("login", (event, arg) => {
  let message = ''
  let cmdStr = '' + JSON.stringify(arg) + ''
  let ch_login = cp.spawn(`${__dirname}/main8.exe`)
  ch_login.stdin.write(cmdStr + '\n')
  ch_login.stdout.on('data', (data) => {
    let logs = data.toString().split('\n').filter(x => x);
    logs.forEach(el => {
      message = `${el}\n\n`
    });
    log.info('login response data:', message)
    event.sender.send('login-message', JSON.parse(message))
  })
  ch_login.stderr.on('data', (data) => {
    log.info('login response data:', data)
  })
})

其中cp定义

const cp = require('child_process')

通过cp.spawn先建立通道，然后使用stdin.write方法将参数信息写给子进程即参数传递。在stdout中去获取到子进程返回的数据，并且将数据转为字符串。

可以查看日志的输出，可以查看我们已经获得子进程返回的结果。

[2020-10-09 18:07:24.197] [info] login response data: {"msg":"账户密码不匹配","type":"result"}

将结果返回给渲染进程代码见上面main.js的定义，主要代码为

event.sender.send('login-message', JSON.parse(message))

然后在login.vue中可以监听到结果，主要代码为

this.$electron.ipcRenderer.on('login-message',(event, arg)=>{
   console.log('登陆结果:',arg)
})

那么现在为止，我们就实现了，从渲染进程到主进程，主进程到子进程，子进程到主进程，主进程到渲染进程之间的数据传递。