electron+vue项目中的通信
在electron+vue项目中,package.json的main所运行的是主进程,代表服务端。vue的部分是项目的渲染进程。主进程和渲染进程的通信通过ipcMain.handle和ipcRenderer.invoke1、在vue中引入ipcRenderer主进程中引入ipcMain没啥大问题。在vue文件中引入ipcRenderer,需要先在vue.config.js中配置 nodeInteg
在electron+vue项目中,package.json的main所运行的是主进程,代表服务端。
vue的部分是项目的渲染进程。
主进程和渲染进程的通信通过ipcMain.handle和ipcRenderer.invoke
1、在vue中引入ipcRenderer
主进程中引入ipcMain没啥大问题。
在vue文件中引入ipcRenderer,需要先在vue.config.js中配置 nodeIntegration: true
pluginOptions: {
electronBuilder: {
// 在vue中能引入electron模块
nodeIntegration: true,
然后在各个vue文件中引入
import { ipcRenderer } from 'electron'
2、渲染进程通知主进程
即在vue文件中通知主进程
- vue中
methods: {
async send() {
const res = await ipcRenderer.invoke('msg', this.msg, 12, 23, 56)
console.log(res)
},
},
- 主进程中
function handleIPC() {
ipcMain.handle('msg', function (e, ...args) {
console.log('参数', args);
return 112233
})
}
在回调中,第一个参数是事件参数,后面的所有参数都是渲染进程传过来的参数。
handleIPC函数在app.on(‘ready’)的回调中运行一下。
app.on('ready', async () => {
...
handleIPC();
})
3、主进程通知渲染进程
主进程通知渲染进程的方法另有文章叙述。在vue项目中也是一样。
在vue中响应主进程的通知时,可以在多个组件的created钩子中进行注册,例如在home组件中
created() {
ipcRenderer.on('hehe', (e, ...args) => {
console.log('home中的响应', args)
})
},
回调的参数同上。
同在vue中注册事件一样,在beforeDestoryed钩子中,注意要移除掉,不然在此调用created钩子中就会重复注册
ipcRenderer.removeListener(channel, listener)
或者
ipcRenderer.removeAllListeners(channel)
更多推荐
所有评论(0)