electron electron-vue创建子窗口

Love The Way You Lie 2021-07-24 11:25 1194阅读 0赞

只能通过主线程创建窗口
    
    1、配置路由,在router/index.js中配置好窗口对应的路由
    
    2、在main/index.js主线程中创建窗口
    	function openVip()
    		var xx = new BrowserWindow({
    		    width: 400,
    		    height: 550,
    		    x:n,  位移
    		    y:n,  位移
    		    parent: mainWindow, 
    		    frame:false,  是否显示默认工具栏
    		    webPreferences: {
    		        nodeIntegration: true
    		    }
    		})
    		  xx.loadURL(winURL+'#/router配置的path路径');
    		  xx.on('closed', () => { vipWin = null })
    	}
    
    3、操作子窗口
    	开启:
    		通过主线程和渲染进程的通信,在主线程中对窗口进行自定义操作
    			ipcMain.on('openVip', e =>
    			  openVip()
    			);
    	关闭放大缩小等:
    		方式一:通过主进程和渲染进程通信,在主进程关闭
    		方式二:在当前进程的窗口关闭,remote.getCurrentWindow().close();

代码示例:  
主进程

import {  app, BrowserWindow,ipcMain } from 'electron'
    
    /** * Set `__static` path to static files in production * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html */
    if (process.env.NODE_ENV !== 'development') { 
      global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    }
    
    let mainWindow
    const winURL = process.env.NODE_ENV === 'development'
      ? `http://localhost:9080`
      : `file://${ __dirname}/index.html`
    
    function createWindow () { 
      /** * Initial window options */
      mainWindow = new BrowserWindow({ 
        height: 670,
        useContentSize: true,
        width: 1020,
        frame:false,
        webPreferences:{ 
          // devTools:false
        }
    
      })
    
      mainWindow.loadURL(winURL)
    
      mainWindow.on('closed', () => { 
        mainWindow = null
      })
    }
    
    // 开启vip新窗口
    
    function openVip()
    { 
      var vipWin = new BrowserWindow({ 
        width: 400,
        height: 550,
        parent: mainWindow, // win是主窗口
        // frame:false,
        webPreferences: { 
            nodeIntegration: true
        }
    })
      vipWin.loadURL(winURL+'#/vip');
      // vipWin.loadURL("https://bilibili.com/")
      // vipWin.loadFile('../renderer/pages/openVip/index.vue')
      vipWin.on('closed', () => {  vipWin = null })
    }
    
    ipcMain.on('openVip', e =>
      openVip()
    );
    
    
    app.on('ready', createWindow)
    
    app.on('window-all-closed', () => { 
      if (process.platform !== 'darwin') { 
        app.quit()
      }
    })
    
    app.on('activate', () => { 
      if (mainWindow === null) { 
        createWindow()
      }
    })
    
    /** * Auto Updater * * Uncomment the following code below and install `electron-updater` to * support auto updating. Code Signing with a valid certificate is required. * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating */
    
    /* import { autoUpdater } from 'electron-updater' autoUpdater.on('update-downloaded', () => { autoUpdater.quitAndInstall() }) app.on('ready', () => { if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() }) */

渲染进程:

showWindow()
    { 
        ipcRenderer.send('openVip')
    }

路由:

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'home',
          component: require('@/pages/home').default,
          meta:{ 
            showTop:true
          }
        },
        { 
          path: '/vip',
          name: 'vip',
          component: require('@/pages/openVip').default,
          meta:{ 
            showTop:false
          }
        },
      ]
    })