一、 vue页面下发消息给主进程(ipcRenderer发 ipcMain接收)
import { ipcMain } from 'electron'
const path = require('path');
#定义preload.js
const win = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
//定义事件
ipcMain.on('vue-event', function(event, arg) {
// mainWindow.destroy() // 名为 mainWindow 的进程关闭
console.log(arg); // prints "ping"
})
preload.js(新加)
import { contextBridge, ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer
vue.config.js
#添加
module.exports = defineConfig({
...
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
preload: 'src/preload.js',
}
}
}
vue3页面里调用
#调用方法一
window.ipcRenderer.send('vue-event', { evt:"dosome", message: 'hello'})
#调用方法二
import { ipcRenderer } from 'electron'
ipcRenderer.send('vue-event', { evt:"mini"})
二、 ipcMain中发消息给ipcRenderer
发送路由router
#background.js
win.webContents.send('goto', '/home');
#main.js
import router from './router'
import { ipcRenderer } from 'electron'
//跳转到指定页面
ipcRenderer.on('goto', (evt,arg) => {
router.push(arg)
});
右键菜单
#background.js
// 监听右键事件&显示右键菜单
ipcMain.on('contextMenu', () => {
contextMenu.popup(BrowserWindow.getFocusedWindow());
});
#vue页面
<div class="about" @contextmenu="openMenu($event)">
openMenu(evt){
evt.preventDefault();
ipcRenderer.send('contextMenu')
}
发送消息给窗口
#vue页面
<button @click="sendA">Max</button>
<script lang="ts">
import from 'electron'
sendA(){
console.log('事件')
ipcRenderer.send('vue-event',{"evt":"max"})
},