electron-vue创建新窗口,以及打开窗口空白的解决办法

    vue文件内 绑定创建 新建窗口 的 事件

 @click="openNewWindow" // 元素上绑定

    使用ipcRenderer 通知主进程 创建新窗口,新窗口创建 请使用 主进程创建,不要在vue文件内创建。利于主进程对窗口的控制。

import { ipcRenderer } from 'electron'
openNewWindow(){
    ipcRenderer.send('newwindow')
},

  

    ipcMain 添加 新建窗口事件。请在 createWindow函数外,定义newWin变量。用于判断窗口是否已存在,存在则聚焦。
    窗口设置 请查看官方文档 中 BrowserWindow 的介绍。
    loadURL(winURL + “#/路由地址”)

注意:如果你vue的router没有关闭histrory也就是地址都带个“/#”比如“locolhost:8080/#main”

这里需要写成oadURL(winURL + “/#main”)

注意#加了跟没加处理不好会导致打开的窗口空白

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();
    }
  })

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值