---

前言

模態(tài)框是一種常用的交互元素，無論是在 Web 網(wǎng)站、桌面應(yīng)用還是移動 APP 中，都有其應(yīng)用場景。模態(tài)框指的是一種彈出窗口，它顯示在原有主界面的上方，通常使用于展示一些重要的信息或提供一些交互能力，增強(qiáng)用戶體驗。
那么在 Electron 中如何實(shí)現(xiàn)模態(tài)框呢？在 Electron 中是叫模態(tài)窗口，在 BrowserWindow 模塊中。

---

一、模態(tài)窗口

1.Web頁面模態(tài)框

模態(tài)框指的是一種彈出窗口，它顯示在原有主界面的上方，通常使用于展示一些重要的信息或提供一些交互能力。

模態(tài)框的外部區(qū)域會被半透明遮罩覆蓋，用戶必須優(yōu)先完成模態(tài)框的操作或關(guān)閉模態(tài)框，才可以返回到主界面進(jìn)行其他操作。這種機(jī)制可以有效地防止用戶在沒有進(jìn)行必要操作的情況下誤操作或忽視重要信息，從而提升用戶體驗和效率。

模態(tài)框通常包含一個標(biāo)題欄、一個內(nèi)容區(qū)域以及一組操作按鈕。標(biāo)題欄用于顯示模態(tài)框的名稱或信息，內(nèi)容區(qū)域用于展示相關(guān)信息或操作選項，操作按鈕則用于響應(yīng)用戶的操作或關(guān)閉模態(tài)框等。

其實(shí)很多前端UI框架都提供了模塊框，比如 Bootstrap 中的模態(tài)框：

是不是突然覺得很常見呀，原來就是它呀。

2.Electron中的模態(tài)窗口

我們先來看實(shí)際效果，以下是使用官方入門案例的主界面：

之后我們來看模態(tài)窗口效果，如下動圖：

如何實(shí)現(xiàn)呢？其實(shí)官網(wǎng)說的很清楚。

首先在 Main Process 模塊中，找到 BrowserWindow，它在主進(jìn)程中負(fù)責(zé)創(chuàng)建和控制瀏覽器窗口。

我們在官方文檔可以找到父子窗口和模態(tài)窗口API，如下：

父子窗口
通過使用 parent 選項，你可以創(chuàng)建子窗口。

官方示例代碼如下：

const { BrowserWindow } = require('electron')const top = new BrowserWindow() // 創(chuàng)建一個普通窗口
const child = new BrowserWindow({ parent: top })// 創(chuàng)建一個子窗口，并將top窗口設(shè)置為child窗口的父窗口
child.show() // 顯示子窗口
top.show() // 顯示父窗口

相信代碼中的注釋已經(jīng)很明了了，這里最重要的是在創(chuàng)建窗口時配置是parent 選項，用于指定父窗口。要注意，child 窗口將總是顯示在 top 窗口的頂部。

模態(tài)窗口
模態(tài)窗口是禁用父窗口的子窗口，創(chuàng)建模態(tài)窗口必須設(shè)置 parent 和 modal 選項。

const { BrowserWindow } = require('electron')// 創(chuàng)建child窗口，并將top窗口設(shè)置為父窗口。通過modal選項將該子窗口設(shè)置為模態(tài)窗口，預(yù)先將窗口隱藏起來
const child = new BrowserWindow({ parent: top, modal: true, show: false })
// 子窗口加載github網(wǎng)頁
child.loadURL('https://github.com')
// 當(dāng)子窗口渲染完畢后再顯示
child.once('ready-to-show', () => {child.show()
})

其實(shí)就是在創(chuàng)建父子窗口的基礎(chǔ)上，設(shè)置 modal 選項。將父子窗口變?yōu)槟B(tài)窗口，并通過 show:false 提前將其隱藏起來，再通過一些事件等觸發(fā)顯示。

該窗口也是一個普通瀏覽器窗口，new BrowserWindow() 時的一些屬性、方法等皆可以設(shè)置、調(diào)用。

現(xiàn)在貼出上面模態(tài)窗口的完整示例代碼：

const { app, BrowserWindow } = require('electron')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html')// 這里將創(chuàng)建的win窗口進(jìn)行返回return win;
}app.whenReady().then(() => {const win = createWindow()// 這里要拿到父窗口const child = new BrowserWindow({ width: 600, height: 400, parent: win, modal: true, show: false })child.loadURL('https://github.com')child.once('ready-to-show', () => {child.show()})
})

該示例代碼直接放在官網(wǎng)入門示例中 main.js 中運(yùn)行即可，運(yùn)行后會直接在窗口中顯示模態(tài)窗口。

3.區(qū)分父子窗口與模態(tài)窗口

在 Electron 中，父子窗口和模態(tài)窗口是兩種不同的窗口類型，它們具有不同的特點(diǎn)和用途。

• 父子窗口：在一個父窗口中打開一個子窗口，子窗口具有和父窗口相同的特性，可以共享父窗口的一些信息和資源。父子窗口之間可以相互通信和交互，父窗口還可以控制子窗口的動態(tài)行為，比如打開、關(guān)閉等。
• 模態(tài)窗口：指打開一個額外的窗口來進(jìn)行一些必要的交互，但你不能在模態(tài)窗口外面進(jìn)行任何操作。模態(tài)窗口打開后，你必須要完成其中需要的操作才能關(guān)閉它，否則無法操作其他窗口。模態(tài)窗口通常用于進(jìn)行重要的提示、詢問或操作確認(rèn)等場景，以確保用戶了解并明確自己的操作，避免一些不必要的錯誤發(fā)生。

需要注意的是，雖然父子窗口和模態(tài)窗口都可以用于打開新的窗口，并在其中進(jìn)行一些操作，但它們有著不同的交互模式和使用場景。在使用時需要根據(jù)實(shí)際需求選擇合適的窗口類型。

二、實(shí)際案例使用

我們先來看效果：

這里直接使用了 @中二少年學(xué)編程 導(dǎo)師的 electron+vue3 項目結(jié)構(gòu)和基礎(chǔ)代碼，應(yīng)用主窗口創(chuàng)建封裝在 windows.js 中，部分代碼如下：

const windowStateKeeper = require('electron-window-state');const { BrowserWindow, app, Menu, Tray} = require('electron');
const path = require('path');
const {join} = require('path');process.env.DIST = join(__dirname, '../../')
const indexHtml = join(process.env.DIST, 'dist/index.html')/*** 創(chuàng)建窗口類*/
class Window {win = null;getWindowState() {// 配置 electron-window-state 插件，獲取窗口 optionlet win;const mainWindowState = windowStateKeeper({defaultWidth: 1000,defaultHeight: 800});let{width,height}=mainWindowStateconst options = {width,height,devTools: true,show: false,icon: path.resolve(__dirname, '../log.ico'),webPreferences: {// nodeIntegration:true,  //集成node api// contextIsolation:false  //關(guān)閉上下文隔離，配合nodeIntegration，可以賦予在render進(jìn)程中寫node代碼的能力preload: path.resolve(__dirname, '../preload/preload.js')  //預(yù)加載的js文件}}win = new BrowserWindow(options)mainWindowState.manage(win);return win}// 創(chuàng)建窗口createWindow () {this.win = this.getWindowState()// 應(yīng)用被打包了，返回trueif(app.isPackaged){this.win.loadFile(indexHtml)}else{this.win.loadURL('http://localhost:5173')}// 等待dom渲染后打開窗口this.win.on('ready-to-show', () => {this.win.show()})this.win.on('closed', () => {this.win = null;})// webContents是一個EventEmitter. 負(fù)責(zé)渲染和控制網(wǎng)頁, 是 BrowserWindow 對象的一個屬性。（主進(jìn)程）let contents = this.win.webContents;contents.openDevTools()this.win.loadURL('http://localhost:5173/')// this.win.loadFile('../../dist/index.html')return this.win}
}module.exports = Window

我們可以看到在 Window 類中的 createWindow() 方法可以創(chuàng)建窗口，并返回該窗口實(shí)例。

我們在入口 main.js 中執(zhí)行，完成窗口創(chuàng)建工作，部分代碼如下：

const { app, BrowserWindow, ipcMain, dialog, globalShortcut } = require('electron')
const getWindow = require('./windows')// 當(dāng)Electron初始化完成
app.whenReady().then(() => {let win = nullwin = new getWindow().createWindow() // 創(chuàng)建窗口
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) win.createWindow()
});app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
});

在這段代碼中，主進(jìn)程（main.js）在應(yīng)用啟動時會創(chuàng)建一個瀏覽器窗口。但是對于需要顯示模態(tài)窗口的場景，我們需要將該場景的實(shí)現(xiàn)放到業(yè)務(wù)代碼中。在渲染器進(jìn)程與主進(jìn)程之間的通信過程中，渲染器進(jìn)程負(fù)責(zé)渲染頁面和執(zhí)行預(yù)加載的js文件，而主進(jìn)程負(fù)責(zé)實(shí)現(xiàn)模態(tài)窗口的功能。

我們可以直接在業(yè)務(wù)代碼中調(diào)用創(chuàng)建模態(tài)窗口的函數(shù)，但是需要注意的是，創(chuàng)建窗口的代碼可能會被封裝在 windows.js 等獨(dú)立的模塊中，在這種情況下，如何獲取到父窗口是一個需要考慮的問題。我們再次調(diào)用創(chuàng)建窗口代碼嗎？不！

win = new getWindow().createWindow() // 創(chuàng)建窗口

如何解決這個問題呢？BrowserWindow 類中提供了一個名為getFocusedWindow() 的方法，該方法可用于獲取當(dāng)前應(yīng)用程序中獲得焦點(diǎn)的窗口。如果當(dāng)前存在焦點(diǎn)窗口，則該方法將返回一個 BrowserWindow 對象，否則將返回 null。

使用getFocusedWindow()方法，我們可以方便地獲取父窗口對象，所以在業(yè)務(wù)js中的實(shí)現(xiàn)代碼是這樣的：

const { ipcMain, BrowserWindow, dialog } = require('electron')
const path = require('path');ipcMain.handle('go-add-url', (event, msg) => {// 獲取焦點(diǎn)窗口const top = BrowserWindow.getFocusedWindow()// 創(chuàng)建模態(tài)窗口const child = new BrowserWindow({parent: top,modal: true,autoHideMenuBar: true,show: false,webPreferences: {preload: path.resolve(__dirname, '../../preload/preload.js')  //預(yù)加載的js文件}})// 模態(tài)窗口加載頁面child.loadURL('http://localhost:5173#addUrl')child.once('ready-to-show', () => {child.show()})})

---

總結(jié)

Electron 主進(jìn)程中可以通過實(shí)例化 BrowserWindow 類來創(chuàng)建瀏覽器窗口?？梢韵驑?gòu)造函數(shù)中傳入一些選項，如窗口大小、位置、URL等。如果傳入 parent 選項，便可以將該窗口設(shè)置為子窗口，子窗口可以訪問父窗口的一些屬性和方法。在此基礎(chǔ)上，還可以設(shè)置 modal 選項來創(chuàng)建模態(tài)窗口，模態(tài)窗口會鎖定父窗口，防止用戶在未完成當(dāng)前窗口操作前操作其他窗口。

在某些情況下，我們需要使用主窗口對象作為參數(shù)傳遞給其他方法或模塊中，可以使用 BrowserWindow.getFocusedWindow() 方法來獲取當(dāng)前焦點(diǎn)窗口的對象。這個方法非常有用，可以使我們很方便地獲取到主窗口對象，進(jìn)行各種操作。