electron-vue打开新窗口
electron-vue 打开新窗口(实践最佳方案)。以及打开新窗口空白资源引进报错问题。
·
- vue文件内 绑定创建 新建窗口 的 事件
@click="openNewWindow" // 元素上绑定
- 使用ipcRenderer 通知主进程 创建新窗口,新窗口创建 请使用 主进程创建,不要在vue文件内创建。利于主进程对窗口的控制。
import { ipcRenderer } from 'electron'
openNewWindow(){
ipcRenderer.send('newwindow')
},
- ipcMain 添加 新建窗口事件。请在 createWindow函数外,定义newWin变量。用于判断窗口是否已存在,存在则聚焦。
窗口设置 请查看官方文档 中 BrowserWindow 的介绍。
loadURL(winURL + “#/路由地址”) router默认采用 hash模式,/#/路由地址 会导致 新建窗口空白
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
// http://localhost:9080 可根据自己项目运行端口配置
// createWindow 函数中
ipcMain.on('newwindow',function(){
if(newWin){
newWin.focus() // 存在 则聚焦
return
}
newWin = new BrowserWindow({
width:900,
height:620,
minWidth:900,
minHeight:620,
frame:true,//是否显示边缘框
fullscreen:false, //是否全屏显示
title:"项目名",
autoHideMenuBar:true
})
newWin.loadURL(winURL+'#/路由地址') // 此处写 你要打开的路由地址
newWin.on('close',()=>{
newWin=null
})
})
- 主进程 窗口关闭时,请把子窗口也关闭。
ipcMain.on('window-close',function (){
mainWindow.close();
if(newWin){
newWin.close();
}
})
这里 只写了 部分核心代码,如有疑问,请私信。
更多推荐
已为社区贡献2条内容
所有评论(0)