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

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章