electron-vue 开发(二)——主进程和渲染进程通信

☞☞electron-vue 开发(一)——Hello World
☞☞electron-vue 开发(二)——主进程和渲染进程通信
☞☞electron-vue 开发(三)——点击提交按钮创建子窗口

1.简介

electron是由Github开发，是一个用Html、css、JavaScript来构建桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。

electron是一个运行时环境，包含Node和Chromium，可以理解成把web应用运行在node环境中

2.进程

2.1主进程 Main Process
官网 ipcMain 介绍

可以使用和系统对接的Electron API - 创建菜单，上传文件等等
创建渲染进程 - Renderer Process
全面支持 Node.js
只有一个，作为整个程序的入口

2.2渲染进程 Renderer Process
官网 ipcRenderer 介绍

可以有多个，每个对应一个窗口
每个都是一个单独的进程
全面支持Node.js 和 DOM API
可以使用一部分Electron 提供的API

3.进程之间的通信小例子

3.1 渲染进程向主进程通信

在HelloWorld.vue页面上加一个按钮

<template>
  <div>
    <el-button type="primary" @click="sumbit">提交</el-button>
  </div>
</template>

<script>
import {
    
     ipcRenderer } from "electron";
export default {
    
    
  name: "HelloWorld",
  methods: {
    
    
    sumbit() {
    
    
      ipcRenderer.send("sumbit", "ipcRenderer --->ipcMain");
    }
  }
};
</script>

ipcRenderer.send(channel, ...args)

channel String
…args any[]
通过channel向渲染器进程发送异步消息，可以发送任意参数。我这里就发送了一条数据。

接下来我们看一下主进程如何接收：
打开/main/index.js

import {
    
     app, BrowserWindow, ipcMain } from "electron";

ipcMain.on("sumbit", (event, arg) => {
    
    
  console.log(arg);
});

IpcMain.on来侦听事件：
ipcMain.on(channel, listener)

channel String
listener Function
event IpcMainEvent
…args any[]

监听 channel，当接收到新的消息时 listener 会以 listener(event, args…) 的形式被调用。

看一下效果，点击提交按钮之后，会在终端打印出渲染进程向主进程传递的信息。
在这里插入图片描述

3.2 主进程向渲染进程通信
打开/main/index.js

ipcMain.on("sumbit", (event, arg) => {
    
    
  console.log(arg);
  event.sender.send("reply", "ipcMain--->ipcRenderer");
});

修改HelloWorld.vue页面：

<template>
  <div>
    <el-button type="primary" @click="sumbit">提交</el-button>
    <span id="message"></span>
  </div>
</template>

<script>
import {
    
     ipcRenderer } from "electron";
export default {
    
    
  name: "HelloWorld",
  methods: {
    
    
    sumbit() {
    
    
      ipcRenderer.send("sumbit", "ipcRenderer --->ipcMain");
      ipcRenderer.on("reply", (event, arg) => {
    
    
        document.getElementById("message").innerHTML = arg;
      });
    }
  }
};
</script>

当我们点击提交的时候，主进程传递到渲染进程的数据就显示到页面上了
在这里插入图片描述

拜拜ヾ(￣▽￣)Bye~Bye~