vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信(實施方案)

第vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信(實施方案)目錄一、前言二、實施方案1.創(chuàng)建多窗口2.多窗口間的通信三、后記

一、前言

對于一個桌面應用來說，有時候單獨一個窗口用戶使用起來會不太方便，比方說寫日報或者查看文件等，若是在同一窗口內，我只能做一件事，不能邊預覽文件，邊去查看聊天消息內容等。又或者是多個應用間相互關聯(lián)的需要同步查看的事件，這都是極其不方便的。因此我們可以將某些集成到electron軟件中的應用或者某些界面用單獨的窗口打開（以下稱為獨立窗口）。

二、實施方案

1.創(chuàng)建多窗口

首先我們從electron官網中找到創(chuàng)建窗口的方法，electron官網的BrowserWindow，接下來我們就簡單寫一個獨立窗口的創(chuàng)建。這個窗口可以打開外部應用也可以是應用內部。

//windows/CreateIndependentWindow.js

import{BrowserWindow,globalShortcut,ipcMain}from'electron'

import{createProtocol}from'vue-cli-plugin-electron-builder/lib'

//關于這個插件，可以看下前幾天我寫的解決electron白屏那篇文章

importCreateProcessLoadingPagefrom'./CreateProcessLoadingPage'

*必傳參數(shù)

*outUrl外部鏈接

*or

*inUrl內部鏈接

*windowTitle頁面標題注意：此值不可重復

constCreateIndependentWindow=({

...data

},win)={

constobj={

//窗口的大小可以通過傳進來的參數(shù)控制

height:data.height||640,

width:data.width||1024,

show:false,//初始是否可顯示

center:true,

//窗口是否可以進入全屏狀態(tài)

fullscreenable:false,

closable:true,//窗口是否可關閉

resizable:true,//禁止改變主窗口尺寸

webPreferences:{

nodeIntegration:true,//啟用Nodeintegration

webSecurity:false,

webviewTag:true,//允許在頁面內使用webview標簽

enableRemoteModule:true,//允許渲染進程使用remote模塊

nodeIntegrationInWorker:true,//在Web工作器中啟用了Node集成

//允許在子頁面(iframe)或子窗口(childwindow)中集成Node.js

nodeIntegrationInSubFrames:true

//這里創(chuàng)建窗口實例

constindependentWindow=newBrowserWindow(obj)

//注冊全局快捷鍵-打開開發(fā)者工具（方便查看問題）

globalShortcut.register('CommandOrControl+alt+shift+l',()={

independentWindow.webContents.openDevTools()

//設置窗口名稱

independentWindow.setTitle(data.windowTitle||'人脈旺')

//這里將當前窗口的唯一id，存入全局變量，以容易區(qū)分多個獨立窗口

//變量聲明下方說明

global.sharedObject.independentWindow.set(data.windowTitle,independentWindow.webContents.id)

//聲明打開頁面的url

letwinURL=''

///IndependentWindow這個路由是在渲染進程創(chuàng)建的承載外部鏈接的獨立窗口的頁面

if(process.env.WEBPACK_DEV_SERVER_URL){//判斷若為開發(fā)環(huán)境

//independentWindow.webContents.openDevTools()

winURL=process.env.WEBPACK_DEV_SERVER_URL+'#/'+(data.inUrldata.inUrl:'IndependentWindow')

}else{

createProtocol('app')

winURL='app://./index.html#'+(data.inUrldata.inUrl:'#/IndependentWindow')

//這里是為了獲取拼接需要傳入到頁面的參數(shù)

constparam=Object.keys(data).reduce((pre,cue)={

returndata[cue]`${pre}${pre==='''':''}${cue}=${data[cue]}`:pre

},'')

//使用loadURL方法將頁面注入到窗口

independentWindow.loadURL(winURL+param)

//若參數(shù)設置開啟最大化窗口

if(data.maxSize){

independentWindow.maximize()

//加載頁面loading

CreateProcessLoadingPage(independentWindow,data)

independentWindow.on('close',(e)={

globalShortcut.unregister('CommandOrControl+alt+shift+l')

global.sharedObject.independentWindow.delete(data.windowTitle)

setTimeout(()={

if(!independentWindow.isDestroyed()independentWindow){

independentWindow.destroy()

},100)

global['independentWindow-'+independentWindow.webContents.id]=independentWindow

exportdefaultCreateIndependentWindow

之后我們在主進程中做一個監(jiān)聽，用來創(chuàng)建獨立窗口

ipcMain.on('createOtherWindow',(e,data)={//type窗口類型，data參數(shù)

constname=data.windowTitle

//判斷當前窗口是否已經存在，存在的話直接喚起

if(global.sharedObject.independentWindow.has(name)){

constid=global.sharedObject.independentWindow.get(name)

global['independentWindow-'+id].show()

}else{

CreateIndependentWindow(data,win)

})

這里我們記得聲明一下存儲獨立窗口id的變量

//background.js

//多窗口數(shù)據(jù)存儲

global.sharedObject={

independentWindow:newMap(),

}

之后我們在渲染進程創(chuàng)建一個頁面，用來展示外部鏈接頁面

template

div

webviewid="myWebView":src="outUrl"allowpopups/webview

/div

/template

script

exportdefault{

name:'IndependentWindow',

data(){

return{

outUrl:'',

created(){

this.outUrl=this.$route.query.outUrl

mounted(){

this.eventHandler()

methods:{

//監(jiān)聽打開webview控制臺的快捷鍵

eventHandler(){

constwebview=document.querySelector('#myWebView')

//用于查看webview內第三方應用問題，快捷鍵打開webview的開發(fā)者工具

window.addEventListener('keydown',e={

if(e.altKeye.ctrlKeye.shiftKeye.keyCode===190){

webview.openDevTools()

/script

stylelang="less"scoped

.independent-window{

width:100%;

height:100%;

/style

綜上，我們就創(chuàng)建了一個獨立窗口，這個獨立窗口可以打開項目內頁面又或者第三方外部鏈接窗口。

2.多窗口間的通信

electron官方文檔給我們提供了關于多個窗口間通訊的方法，對于多窗口間的通訊，多是指渲染進程間的通訊。這里我們可以使用ipcRenderer.sendTo()這個方法，來進行多窗口建的通信。詳見官方文檔說明

ipcRenderer.sendTo(webConten