1.首先在background.js中利用ipcMain创建,首先引用
import { app, BrowserWindow, ipcMain } from 'electron'
2.在background.js里创建一个function
let newWindow //在顶部定义一个变量
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:8080` // 开发路径
: `file://${__dirname}/index.html` //生产路径
function jiuCuo() { //在下面定义一个函数
ipcMain.on('create-new-window', () => { //'create-new-window'随便命名,用于打开窗口
if (newWindow) {
newWindow.focus() // 存在 则聚焦
return
}
newWindow = new BrowserWindow({
width: 1107, //窗口宽高
height: 603,
title: '交换机路由器脚本自动配置工具-纠错',
closable: true,
resizable: false,//禁止窗口随意拉伸
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
})
newWindow.loadURL(winURL + '#/about')
newWindow.on('closed', () => {
newWindow = null
})
})
}
app.on('ready', async () => { //这个监听是background.js自带的
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
jiuCuo() //在此处调用
})
注意:create-new-window用于渲染进程(就是前端代码)用来发送这个字段,触发create-new-window窗口。
3.在渲染进程里,background.js是主进程,引用ipcRenderer
import { ipcRenderer} from 'electron';
在methods里定义一个点击事件
methods:{
clickd(){
ipcRenderer.send('create-new-window')
}
}
background.js接收到后窗口就出现了。