Electron小案例

打印 上一主题 下一主题

主题 909|帖子 909|积分 2727

好的,您想要的功能涉及到几个步调的实现。我们需要在窗体2的渲染进程中实行一个单击变乱,来实行关闭窗体2的操作,而且向主进程传递一个状态(Status)。然后主进程监控窗体2的关闭变乱,传递该状态给窗体1举行进一步操作。
实现步调:


  • 窗体2渲染进程

    • 添加单击变乱,修改状态 Status 为 true。
    • 关闭窗体2。
    • 向主进程发送 Status 的值。

  • 主进程

    • 监听窗体2的关闭变乱,并传递 Status 给窗体1。

  • 窗体1渲染进程

    • 接收来自主进程的 Status 数据,并根据 Status 的值举行进一步操作。

代码实现:

1. 窗体2的渲染进程(关闭窗体2并发送状态)

  1. // 在窗体2的渲染进程中
  2. const { ipcRenderer } = require('electron')
  3. let status = false  // 初始状态为 false
  4. // 单击事件:设置状态为 true,并关闭窗体2
  5. document.getElementById('closeButton').addEventListener('click', () => {
  6.   status = true  // 设置状态为 true
  7.   // 向主进程发送状态
  8.   ipcRenderer.send('update-status', status)
  9.   // 关闭窗体2
  10.   window.close()
  11. })
复制代码
2. 主进程(监听窗体2关闭并传递状态到窗体1)

  1. const { app, BrowserWindow, ipcMain } = require('electron')
  2. let mainWindow, secondWindow
  3. let Status = false  // 定义状态变量
  4. // 创建窗体1
  5. function createMainWindow() {
  6.   mainWindow = new BrowserWindow({
  7.     width: 800,
  8.     height: 600,
  9.     webPreferences: {
  10.       nodeIntegration: true
  11.     }
  12.   })
  13.   mainWindow.loadURL('file://path/to/mainWindow.html')  // 窗体1的 HTML 文件路径
  14.   mainWindow.on('closed', () => {
  15.     mainWindow = null
  16.   })
  17. }
  18. // 创建窗体2
  19. function createSecondWindow() {
  20.   secondWindow = new BrowserWindow({
  21.     width: 600,
  22.     height: 400,
  23.     webPreferences: {
  24.       nodeIntegration: true
  25.     }
  26.   })
  27.   secondWindow.loadURL('file://path/to/secondWindow.html')  // 窗体2的 HTML 文件路径
  28.   secondWindow.on('closed', () => {
  29.     console.log('Window 2 has been closed')
  30.     // 窗体2关闭时,向窗体1发送状态
  31.     if (mainWindow) {
  32.       mainWindow.webContents.send('window-2-closed', Status)
  33.     }
  34.     secondWindow = null  // 释放窗体2的资源
  35.   })
  36. }
  37. // 监听窗体2的状态更新
  38. ipcMain.on('update-status', (event, newStatus) => {
  39.   Status = newStatus  // 更新状态
  40.   console.log('Status updated to:', Status)
  41. })
  42. // 当应用准备好时创建窗体
  43. app.whenReady().then(() => {
  44.   createMainWindow()
  45.   createSecondWindow()
  46.   app.on('activate', () => {
  47.     if (BrowserWindow.getAllWindows().length === 0) {
  48.       createMainWindow()
  49.     }
  50.   })
  51. })
  52. // 退出应用
  53. app.on('window-all-closed', () => {
  54.   if (process.platform !== 'darwin') {
  55.     app.quit()
  56.   }
  57. })
复制代码
3. 窗体1渲染进程(接收状态并举行进一步操作)

  1. // 在窗体1的渲染进程中
  2. const { ipcRenderer } = require('electron')
  3. ipcRenderer.on('window-2-closed', (event, status) => {
  4.   console.log('Window 2 closed. Status:', status)
  5.   // 根据 status 进行进一步操作
  6.   if (status) {
  7.     // 例如,弹出一个提示框或执行其他操作
  8.     alert('Status is true! Window 2 was closed and the status was updated.');
  9.   } else {
  10.     alert('Status is false!');
  11.   }
  12. })
复制代码
解析:


  • 窗体2的渲染进程

    • 监听一个单击变乱(比方一个按钮)。当按钮被点击时,将 status 设置为 true,并通过 ipcRenderer.send() 将状态发送给主进程。
    • 调用 window.close() 关闭窗体2。

  • 主进程

    • ipcMain.on('update-status', ...) 用来监听来自窗体2的状态更新,当窗体2的状态发生变化时(比方点击了按钮),主进程会接收到更新的状态,并将其存储在 Status 变量中。
    • 窗体2关闭时,主进程通过 mainWindow.webContents.send() 向窗体1发送更新后的 Status 状态。

  • 窗体1的渲染进程

    • 窗体1通过 ipcRenderer.on() 监听从主进程传递的 window-2-closed 消息,获取 Status 的值。
    • 根据 Status 的值,窗体1可以实行相应的操作,如体现提示框、更新界面等。

总结:



  • 在窗体2渲染进程中通过按钮点击变乱更新状态,并将状态传递给主进程。
  • 主进程监听窗体2的关闭变乱,在关闭窗体2时,将状态传递给窗体1。
  • 窗体1渲染进程接收到状态后,根据状态值实行相应的操作。
这种方式使得窗体2的关闭操作和状态更新可以或许及时传递给窗体1,从而实现了你希望的交互功能。

在 Electron 中,event 是一个变乱对象,通常在变乱监听函数中作为第一个参数传递给回调函数。它包罗有关变乱的各种信息,具体内容取决于变乱的范例。
1. 在 BrowserWindow 的变乱监听中:

比方,在你之前的代码中,mainWindow.on('closed', (event) => {...}) 中的 event 对象代表了 closed 变乱的相关信息。
对于某些变乱(如 close、closed、resize 等),event 对象包罗以下信息:


  • event.sender:指向发失变乱的 BrowserWindow 实例,可以通过它获取触发变乱的窗口对象。
  • event.preventDefault():用于克制变乱的默认行为,比方克制窗口关闭或克制页面革新。
比方:
  1. mainWindow.on('close', (event) => {
  2.   // 阻止默认的窗口关闭行为
  3.   event.preventDefault()
  4.   // 做一些清理工作
  5.   console.log('Window is closing, but we have blocked the default action')
  6.   // 你可以在这里确认用户是否真的要关闭窗体,或者保存数据等
  7. })
复制代码
在这个例子中,event 是 close 变乱的变乱对象,调用 event.preventDefault() 可以克制窗口的默认关闭行为,直到你实行其他操作后再手动关闭。
2. 在 ipcMain 或 ipcRenderer 中:

在主进程和渲染进程的通信中(比方通过 ipcMain.on() 或 ipcRenderer.on()),event 也会作为回调函数的第一个参数传递,但它的作用有所差别:


  • ipcMain.on(channel, listener):event 代表的是变乱监听器的上下文,通常包罗发送消息的源窗口的信息(比如窗口 ID)。
  • ipcRenderer.on(channel, listener):event 是一个 Event 对象,代表了接收到的消息变乱。
示例:ipcMain.on() 中的 event

  1. ipcMain.on('message-from-renderer', (event, arg) => {
  2.   console.log(event.sender)  // 发送该消息的窗口的 webContents 对象
  3.   console.log(arg)           // 渲染进程发送的数据
  4. })
复制代码
在这个例子中,event 是一个变乱对象,event.sender 是发送该消息的 webContents(即发送消息的 BrowserWindow 对象)。
示例:ipcRenderer.on() 中的 event

  1. const { ipcRenderer } = require('electron')
  2. ipcRenderer.on('message-from-main', (event, arg) => {
  3.   console.log(event)  // event 是 Event 对象,包含消息的相关信息
  4.   console.log(arg)    // 主进程发送的数据
  5. })
复制代码
在这个例子中,event 是由主进程发送的消息变乱对象,arg 是传递给渲染进程的数据。
总结:



  • event 对象:是变乱处理机制中用来传递变乱信息的一个对象,具体的内容和功能取决于变乱的范例。
  • event.sender:在某些情况下,event 对象有一个 sender 属性,表示触发该变乱的窗口或组件,通常用于进程间通信中。
  • event.preventDefault():可以用来克制变乱的默认行为,比方防止窗体关闭。
通过 event 对象,你可以得到更多的上下文信息,并在需要时控制变乱的实行行为。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

反转基因福娃

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表