网站建设行内资讯,两新支部网站建设,做网站用什么数据库好用,惠州网站建设 英语目录 前言一、模态窗口1.Web页面模态框2.Electron中的模态窗口3.区分父子窗口与模态窗口 二、实际案例使用总结 前言
模态框是一种常用的交互元素#xff0c;无论是在 Web 网站、桌面应用还是移动 APP 中#xff0c;都有其应用场景。模态框指的是一种弹出窗口#xff0c;它… 目录 前言一、模态窗口1.Web页面模态框2.Electron中的模态窗口3.区分父子窗口与模态窗口 二、实际案例使用总结 前言
模态框是一种常用的交互元素无论是在 Web 网站、桌面应用还是移动 APP 中都有其应用场景。模态框指的是一种弹出窗口它显示在原有主界面的上方通常使用于展示一些重要的信息或提供一些交互能力增强用户体验。 那么在 Electron 中如何实现模态框呢在 Electron 中是叫模态窗口在 BrowserWindow 模块中。 一、模态窗口
1.Web页面模态框
模态框指的是一种弹出窗口它显示在原有主界面的上方通常使用于展示一些重要的信息或提供一些交互能力。
模态框的外部区域会被半透明遮罩覆盖用户必须优先完成模态框的操作或关闭模态框才可以返回到主界面进行其他操作。这种机制可以有效地防止用户在没有进行必要操作的情况下误操作或忽视重要信息从而提升用户体验和效率。
模态框通常包含一个标题栏、一个内容区域以及一组操作按钮。标题栏用于显示模态框的名称或信息内容区域用于展示相关信息或操作选项操作按钮则用于响应用户的操作或关闭模态框等。
其实很多前端UI框架都提供了模块框比如 Bootstrap 中的模态框 是不是突然觉得很常见呀原来就是它呀。
2.Electron中的模态窗口
我们先来看实际效果以下是使用官方入门案例的主界面 之后我们来看模态窗口效果如下动图 如何实现呢其实官网说的很清楚。
首先在 Main Process 模块中找到 BrowserWindow它在主进程中负责创建和控制浏览器窗口。
我们在官方文档可以找到父子窗口和模态窗口API如下 父子窗口 通过使用 parent 选项你可以创建子窗口。 官方示例代码如下
const { BrowserWindow } require(electron)const top new BrowserWindow() // 创建一个普通窗口
const child new BrowserWindow({ parent: top })// 创建一个子窗口并将top窗口设置为child窗口的父窗口
child.show() // 显示子窗口
top.show() // 显示父窗口相信代码中的注释已经很明了了这里最重要的是在创建窗口时配置是parent 选项用于指定父窗口。要注意child 窗口将总是显示在 top 窗口的顶部。 模态窗口 模态窗口是禁用父窗口的子窗口创建模态窗口必须设置 parent 和 modal 选项。 const { BrowserWindow } require(electron)// 创建child窗口并将top窗口设置为父窗口。通过modal选项将该子窗口设置为模态窗口预先将窗口隐藏起来
const child new BrowserWindow({ parent: top, modal: true, show: false })
// 子窗口加载github网页
child.loadURL(https://github.com)
// 当子窗口渲染完毕后再显示
child.once(ready-to-show, () {child.show()
})其实就是在创建父子窗口的基础上设置 modal 选项。将父子窗口变为模态窗口并通过 show:false 提前将其隐藏起来再通过一些事件等触发显示。
该窗口也是一个普通浏览器窗口new BrowserWindow() 时的一些属性、方法等皆可以设置、调用。
现在贴出上面模态窗口的完整示例代码
const { app, BrowserWindow } require(electron)const createWindow () {const win new BrowserWindow({width: 800,height: 600})win.loadFile(index.html)// 这里将创建的win窗口进行返回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()})
})该示例代码直接放在官网入门示例中 main.js 中运行即可运行后会直接在窗口中显示模态窗口。
3.区分父子窗口与模态窗口
在 Electron 中父子窗口和模态窗口是两种不同的窗口类型它们具有不同的特点和用途。
父子窗口在一个父窗口中打开一个子窗口子窗口具有和父窗口相同的特性可以共享父窗口的一些信息和资源。父子窗口之间可以相互通信和交互父窗口还可以控制子窗口的动态行为比如打开、关闭等。模态窗口指打开一个额外的窗口来进行一些必要的交互但你不能在模态窗口外面进行任何操作。模态窗口打开后你必须要完成其中需要的操作才能关闭它否则无法操作其他窗口。模态窗口通常用于进行重要的提示、询问或操作确认等场景以确保用户了解并明确自己的操作避免一些不必要的错误发生。
需要注意的是虽然父子窗口和模态窗口都可以用于打开新的窗口并在其中进行一些操作但它们有着不同的交互模式和使用场景。在使用时需要根据实际需求选择合适的窗口类型。
二、实际案例使用
我们先来看效果 这里直接使用了 中二少年学编程 导师的 electronvue3 项目结构和基础代码应用主窗口创建封装在 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)/*** 创建窗口类*/
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 //关闭上下文隔离配合nodeIntegration可以赋予在render进程中写node代码的能力preload: path.resolve(__dirname, ../preload/preload.js) //预加载的js文件}}win new BrowserWindow(options)mainWindowState.manage(win);return win}// 创建窗口createWindow () {this.win this.getWindowState()// 应用被打包了返回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. 负责渲染和控制网页, 是 BrowserWindow 对象的一个属性。主进程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() 方法可以创建窗口并返回该窗口实例。
我们在入口 main.js 中执行完成窗口创建工作部分代码如下
const { app, BrowserWindow, ipcMain, dialog, globalShortcut } require(electron)
const getWindow require(./windows)// 当Electron初始化完成
app.whenReady().then(() {let win nullwin new getWindow().createWindow() // 创建窗口
});app.on(activate, () {if (BrowserWindow.getAllWindows().length 0) win.createWindow()
});app.on(window-all-closed, () {if (process.platform ! darwin) app.quit()
});在这段代码中主进程main.js在应用启动时会创建一个浏览器窗口。但是对于需要显示模态窗口的场景我们需要将该场景的实现放到业务代码中。在渲染器进程与主进程之间的通信过程中渲染器进程负责渲染页面和执行预加载的js文件而主进程负责实现模态窗口的功能。
我们可以直接在业务代码中调用创建模态窗口的函数但是需要注意的是创建窗口的代码可能会被封装在 windows.js 等独立的模块中在这种情况下如何获取到父窗口是一个需要考虑的问题。我们再次调用创建窗口代码吗不
win new getWindow().createWindow() // 创建窗口如何解决这个问题呢BrowserWindow 类中提供了一个名为getFocusedWindow() 的方法该方法可用于获取当前应用程序中获得焦点的窗口。如果当前存在焦点窗口则该方法将返回一个 BrowserWindow 对象否则将返回 null。
使用getFocusedWindow()方法我们可以方便地获取父窗口对象所以在业务js中的实现代码是这样的
const { ipcMain, BrowserWindow, dialog } require(electron)
const path require(path);ipcMain.handle(go-add-url, (event, msg) {// 获取焦点窗口const top BrowserWindow.getFocusedWindow()// 创建模态窗口const child new BrowserWindow({parent: top,modal: true,autoHideMenuBar: true,show: false,webPreferences: {preload: path.resolve(__dirname, ../../preload/preload.js) //预加载的js文件}})// 模态窗口加载页面child.loadURL(http://localhost:5173#addUrl)child.once(ready-to-show, () {child.show()})})总结
Electron 主进程中可以通过实例化 BrowserWindow 类来创建浏览器窗口。可以向构造函数中传入一些选项如窗口大小、位置、URL等。如果传入 parent 选项便可以将该窗口设置为子窗口子窗口可以访问父窗口的一些属性和方法。在此基础上还可以设置 modal 选项来创建模态窗口模态窗口会锁定父窗口防止用户在未完成当前窗口操作前操作其他窗口。
在某些情况下我们需要使用主窗口对象作为参数传递给其他方法或模块中可以使用 BrowserWindow.getFocusedWindow() 方法来获取当前焦点窗口的对象。这个方法非常有用可以使我们很方便地获取到主窗口对象进行各种操作。
