electron+vue3的基本使用及通信

环境参数
node -v v14.16.0
vue --version @vue/cli 4.5.11

electron应用是多进程的，而这个进程是分两种，一种是主进程[main]（主进程就是background.js所来承载的进程就是主进程），还有一种就是渲染进程[ready]（渲染进程就是打开的窗口）；主进程就一个，而渲染进程会有多个；
至于为什么electron应用采用的是多进程，而不是多线程，这主要是因为electron基于Chrome内核，而Chrome内核就是多进程的

一、创建vue3项目

 vue create electron-test

二、安装 vue-cli-plugin-electron-builder

• 直接无脑安装，也不用其他配置，3.0都用这个；如果用electron-builder 没效果
• 可以进入vue项目管理器，点击插件->右上角的添加插件，然后输入 vue-cli-plugin-electron-builder；找到后勾选安装，安装完成后，点击“安装完成”，（必须要点击安装完成，否则项目架构会出问题）；

package.json有如下命令就代表成功了

三、进程之间如何通讯

1、渲染进程如何和主进程进行通信

background.js

import { app, BrowserWindow, ipcMain } from 'electron'
// 由渲染进程触发
ipcMain.on('a',(e,data)=>{
  console.log('data',data)
  // 接收到渲染进程后，主进程会给渲染进程发送信息，不是针对所有窗口发送
  e.sender.send('b','主进程收到你的消息了,并告知你一声');
})

Home.vue

const electron = require('electron');
const ipc = electron.ipcRenderer;

//执行方法
electron.ipcRenderer.send('a','渲染进程给主进程发送数据啦~')

//获取主进程返回的数据
ipc.on('b',(e,data)=>{
	console.log(data)
})

主进程主动发送消息给渲染进程

广播式的发送消息 background.js

import { app, protocol, BrowserWindow, ipcMain, webContents } from 'electron'
webContents.getAllWebContents().forEach(v=>{
    v.send('b','获取打开的所有渲染进程并把当前文本发送，前期是开启了ipc.on 获取了 b')
  })

指定渲染进程发送消息 background.js

这里面的windowIds.name2 是我在创建窗口的时候起的一个别名，你也可以直接输入数字2（代表第二个渲染进程窗口）
webContents.fromId(windowIds.name2).send('b','我单独给你发消息了')

2、渲染进程和另一个渲染进程进行通信

/**
参数1：id 渲染进程的id
参数2：渲染进程所监听的label，就是说另一个渲染进程里开启的接收通知，ipc.on这个
参数3：要传递的数据
*/
ipc.sendTo(id,e,data)

在这里插入代码片

Tips：
ipcMain.on【没有返回值】 适合不需要返回值，可以直接去处理的场景
ipcMain.handle【有返回值】 前端可以根据返回值去做相应的事件

主进程
ipcMain.on('notice',(e,data)=>{
	console.log(data)
})

渲染进程 - 无返回值
ipc.on('b',(e,data)=>{
	console.log(data)
})

主进程
ipcMain.handle('notice',(e,data)=>{
	......
	return data;
})

渲染进程 - 返回的是一个promise
ipc.invoke('notice','发送给主进程的数据').then(res=>{
	console.log(res)
})