electron（一）-webview与其加载页面间的通信、渲染进程间的通信、渲染进程与主进程间的通信

公司有个内部桌面软件是基于electron vue写的，前几天负责开发这个客户端的人离职，我就成了临时接档优化的人。作为写vue但第一次接触electron的人，花了几天时间浏览了一下electron、electron vue官方文档、客户端代码的整体架构，即便如此，在优化过程中还是遇到了很多麻烦，项目结束后，特此做了一下总结。

(1) webview所在窗口与其加载页面间的通信

---

背景：在开发过程中难免会遇到在一个窗口中使用webview引入其他网页，以节省开发成本。但这个引入页面往往不尽如人意，会再注入一些js、css来对这个页面进行改动，其中就有添加事件，webview所在窗口需要得知事件触发。

<template>
    <div class ="container">
        <webview
            id="webview"
            ref="webview"
            :src="webviewSrc"
            disablewebsecurity
            class="webview"
            nodeintegration
        />
    </div>
</template>

webview中加载的页面：在注入的js中使用ipcRenderer向窗口发送信息

btnDom.addEventListener('click', (e) => {
    e.stopPropagation()
    let ipcRenderer = require('electron').ipcRenderer
    var paramsJSON = JSON.stringify({cellId: cellId, url: dom.url})
    ipcRenderer && ipcRenderer.sendToHost(paramsJSON)
}, false)

webview所在的窗口：监听ipc-message接收信息

webview.addEventListener('ipc-message', (event) => {
    if (event.channel) {
        let params = JSON.parse(event.channel)
    }
})

(2) 渲染进程间的通信

---

背景：一个渲染进程可能需要向另一个渲染进程传递参数；渲染进程间需要共享一些数据。

（1）使用全局属性global
在主进程声明全局属性中的一个参数

global.sharedObject = {
    customerInfo: null
}

在渲染进程中修改这个参数

require('electron').remote.getGlobal('sharedObject').customerInfo = windowParam

读取参数

require('electron’).remote.getGlobal('sharedObject').customerInfo

（2）使用ipcRenderer进行通信
ipcRenderer.sendTo(webContentsId, channel, …args)
官方文档中ipcRenderer.sendTo:  Sends a message to a window with webContentsId via channel.

ipcRenderer.sendTo(remote.getGlobal('assistantWindowId'),'cometCustomer', event.channel)

其中webContentsId可以在主进程中获得

global.assistantWindowId = assistantWindow.webContents.id

在assitantWindow中：使用ipcRenderer.on监听channel

ipcRenderer.on('cometCustomer', (event, param) => {})

渲染进程和主进程间的通信

---

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

ipcRenderer.send('showCreateCustomerWindow’);

主进程：

ipcMain.on('showCreateCustomerWindow', (event, arg) => {

 event.sender.send(channel, argResponse) // 向发送消息的渲染进程回复消息，渲染进程通过ipcRenderer.on(channel, (event, arg) => {})接收回复消息

})

还有其他主进程回复消息的方式：event.reply(channel, argResponse)  \   event.returnValue = argResponse