




版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第vue+electron實(shí)現(xiàn)創(chuàng)建多窗口及窗口間的通信(實(shí)施方案)目錄一、前言二、實(shí)施方案1.創(chuàng)建多窗口2.多窗口間的通信三、后記
一、前言
對(duì)于一個(gè)桌面應(yīng)用來(lái)說(shuō),有時(shí)候單獨(dú)一個(gè)窗口用戶(hù)使用起來(lái)會(huì)不太方便,比方說(shuō)寫(xiě)日?qǐng)?bào)或者查看文件等,若是在同一窗口內(nèi),我只能做一件事,不能邊預(yù)覽文件,邊去查看聊天消息內(nèi)容等。又或者是多個(gè)應(yīng)用間相互關(guān)聯(lián)的需要同步查看的事件,這都是極其不方便的。因此我們可以將某些集成到electron軟件中的應(yīng)用或者某些界面用單獨(dú)的窗口打開(kāi)(以下稱(chēng)為獨(dú)立窗口)。
二、實(shí)施方案
1.創(chuàng)建多窗口
首先我們從electron官網(wǎng)中找到創(chuàng)建窗口的方法,electron官網(wǎng)的BrowserWindow,接下來(lái)我們就簡(jiǎn)單寫(xiě)一個(gè)獨(dú)立窗口的創(chuàng)建。這個(gè)窗口可以打開(kāi)外部應(yīng)用也可以是應(yīng)用內(nèi)部。
//windows/CreateIndependentWindow.js
import{BrowserWindow,globalShortcut,ipcMain}from'electron'
import{createProtocol}from'vue-cli-plugin-electron-builder/lib'
//關(guān)于這個(gè)插件,可以看下前幾天我寫(xiě)的解決electron白屏那篇文章
importCreateProcessLoadingPagefrom'./CreateProcessLoadingPage'
*必傳參數(shù)
*outUrl外部鏈接
*or
*inUrl內(nèi)部鏈接
*windowTitle頁(yè)面標(biāo)題注意:此值不可重復(fù)
constCreateIndependentWindow=({
...data
},win)={
constobj={
//窗口的大小可以通過(guò)傳進(jìn)來(lái)的參數(shù)控制
height:data.height||640,
width:data.width||1024,
show:false,//初始是否可顯示
center:true,
//窗口是否可以進(jìn)入全屏狀態(tài)
fullscreenable:false,
closable:true,//窗口是否可關(guān)閉
resizable:true,//禁止改變主窗口尺寸
webPreferences:{
nodeIntegration:true,//啟用Nodeintegration
webSecurity:false,
webviewTag:true,//允許在頁(yè)面內(nèi)使用webview標(biāo)簽
enableRemoteModule:true,//允許渲染進(jìn)程使用remote模塊
nodeIntegrationInWorker:true,//在Web工作器中啟用了Node集成
//允許在子頁(yè)面(iframe)或子窗口(childwindow)中集成Node.js
nodeIntegrationInSubFrames:true
//這里創(chuàng)建窗口實(shí)例
constindependentWindow=newBrowserWindow(obj)
//注冊(cè)全局快捷鍵-打開(kāi)開(kāi)發(fā)者工具(方便查看問(wèn)題)
globalShortcut.register('CommandOrControl+alt+shift+l',()={
independentWindow.webContents.openDevTools()
//設(shè)置窗口名稱(chēng)
independentWindow.setTitle(data.windowTitle||'人脈旺')
//這里將當(dāng)前窗口的唯一id,存入全局變量,以容易區(qū)分多個(gè)獨(dú)立窗口
//變量聲明下方說(shuō)明
global.sharedObject.independentWindow.set(data.windowTitle,independentWindow.webContents.id)
//聲明打開(kāi)頁(yè)面的url
letwinURL=''
///IndependentWindow這個(gè)路由是在渲染進(jìn)程創(chuàng)建的承載外部鏈接的獨(dú)立窗口的頁(yè)面
if(process.env.WEBPACK_DEV_SERVER_URL){//判斷若為開(kāi)發(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')
//這里是為了獲取拼接需要傳入到頁(yè)面的參數(shù)
constparam=Object.keys(data).reduce((pre,cue)={
returndata[cue]`${pre}${pre==='''':''}${cue}=${data[cue]}`:pre
},'')
//使用loadURL方法將頁(yè)面注入到窗口
independentWindow.loadURL(winURL+param)
//若參數(shù)設(shè)置開(kāi)啟最大化窗口
if(data.maxSize){
independentWindow.maximize()
//加載頁(yè)面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
之后我們?cè)谥鬟M(jìn)程中做一個(gè)監(jiān)聽(tīng),用來(lái)創(chuàng)建獨(dú)立窗口
ipcMain.on('createOtherWindow',(e,data)={//type窗口類(lèi)型,data參數(shù)
constname=data.windowTitle
//判斷當(dāng)前窗口是否已經(jīng)存在,存在的話(huà)直接喚起
if(global.sharedObject.independentWindow.has(name)){
constid=global.sharedObject.independentWindow.get(name)
global['independentWindow-'+id].show()
}else{
CreateIndependentWindow(data,win)
})
這里我們記得聲明一下存儲(chǔ)獨(dú)立窗口id的變量
//background.js
//多窗口數(shù)據(jù)存儲(chǔ)
global.sharedObject={
independentWindow:newMap(),
}
之后我們?cè)阡秩具M(jìn)程創(chuàng)建一個(gè)頁(yè)面,用來(lái)展示外部鏈接頁(yè)面
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)聽(tīng)打開(kāi)webview控制臺(tái)的快捷鍵
eventHandler(){
constwebview=document.querySelector('#myWebView')
//用于查看webview內(nèi)第三方應(yīng)用問(wèn)題,快捷鍵打開(kāi)webview的開(kāi)發(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)建了一個(gè)獨(dú)立窗口,這個(gè)獨(dú)立窗口可以打開(kāi)項(xiàng)目?jī)?nèi)頁(yè)面又或者第三方外部鏈接窗口。
2.多窗口間的通信
electron官方文檔給我們提供了關(guān)于多個(gè)窗口間通訊的方法,對(duì)于多窗口間的通訊,多是指渲染進(jìn)程間的通訊。這里我們可以使用ipcRenderer.sendTo()這個(gè)方法,來(lái)進(jìn)行多窗口建的通信。詳見(jiàn)官方文檔說(shuō)明
ipcRenderer.sendTo(webConten
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 大數(shù)據(jù)助力教育個(gè)性化與精準(zhǔn)化
- 心理分析與現(xiàn)代教育技術(shù)的融合
- 教育與科技的結(jié)合教學(xué)輔助型教育機(jī)器人研究
- 未來(lái)教育視域下的技術(shù)美學(xué)與空間設(shè)計(jì)
- 品牌數(shù)字營(yíng)銷(xiāo)戰(zhàn)略下的多平臺(tái)聯(lián)動(dòng)運(yùn)營(yíng)策略
- 教育領(lǐng)域的大數(shù)據(jù)技術(shù)應(yīng)用及未來(lái)趨勢(shì)分析報(bào)告
- 全球醫(yī)藥市場(chǎng)2025年創(chuàng)新藥物研發(fā)管線(xiàn)布局策略報(bào)告
- 全球鈾礦資源分布特點(diǎn)及2025年核能產(chǎn)業(yè)技術(shù)創(chuàng)新與產(chǎn)業(yè)協(xié)同研究報(bào)告
- 公交優(yōu)先戰(zhàn)略與2025年城市交通擁堵治理的公共交通優(yōu)先政策實(shí)施保障研究報(bào)告
- Carbonic-anhydrase-inhibitor-32-生命科學(xué)試劑-MCE
- 2022年劍河縣事業(yè)單位考試真題及答案
- 電氣控制與PLC應(yīng)用技術(shù)(三菱機(jī)型)高教版YL-235A送料機(jī)構(gòu)控制電路的連接與編程教學(xué)案例高教版
- GB/T 5163-2006燒結(jié)金屬材料(不包括硬質(zhì)合金)可滲性燒結(jié)金屬材料密度、含油率和開(kāi)孔率的測(cè)定
- GB/T 17989.2-2020控制圖第2部分:常規(guī)控制圖
- 建設(shè)項(xiàng)目安全設(shè)施‘三同時(shí)’課件
- 2022語(yǔ)文課程標(biāo)準(zhǔn):“語(yǔ)言文字積累與梳理”任務(wù)群解讀及實(shí)操
- DB15T 489-2019 石油化學(xué)工業(yè)建設(shè)工程技術(shù)資料管理規(guī)范
- 內(nèi)蒙古自治區(qū)通遼市各縣區(qū)鄉(xiāng)鎮(zhèn)行政村村莊村名居民村民委員會(huì)明細(xì)及行政區(qū)劃代碼
- 螺旋溜槽安裝標(biāo)準(zhǔn)工藝
- 2022年人教版六年級(jí)下冊(cè)語(yǔ)文期末考試卷
- 《土地開(kāi)發(fā)整理項(xiàng)目預(yù)算編制暫行辦法》
評(píng)論
0/150
提交評(píng)論