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
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
electron-vue是一个将VueElectron结合的项目,可以方便地创建窗口应用程序。下面是一个演示如何在electron-vue创建窗口的例子: 1. 首先,在renderer目录下创建一个新的Vue组件,例如`SecondWindow.vue`,用于作为第二个窗口的内容。 ```vue <template> <div> <h1>Second Window</h1> <p>This is the content of the second window.</p> </div> </template> <script> export default { name: 'SecondWindow' } </script> ``` 2. 在`renderer/router/index.js`文件中,添加一个新的路由路径,用于打开第二个窗口。 ```javascript import SecondWindow from '@/components/SecondWindow.vue' // ... const routes = [ // ... { path: '/second', name: 'SecondWindow', component: SecondWindow } ] // ... ``` 3. 在`renderer/App.vue`文件中,添加一个按钮,用于打开第二个窗口。 ```vue <template> <div> <h1>Main Window</h1> <p>This is the content of the main window.</p> <router-link to="/second">Open Second Window</router-link> </div> </template> <script> export default { name: 'App' } </script> ``` 4. 在`renderer/main.js`文件中,添加一个新的窗口创建函数,用于创建第二个窗口。 ```javascript import { createApp } from 'vue' import SecondWindow from './components/SecondWindow.vue' // ... function createSecondWindow() { const secondWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) secondWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/second') // ... return secondWindow } // ... ``` 5. 在需要打开第二个窗口的地方调用`createSecondWindow`函数。 ```javascript // ... ipcMain.on('open-second-window', () => { const secondWindow = createSecondWindow() // ... }) // ... ``` 现在,你可以通过点击"Open Second Window"按钮来打开第二个窗口,并在第二个窗口显示"Second Window"的内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值