ToB企服应用市场:ToB评测及商务社交产业平台

标题: Electron小案例 [打印本页]

---

作者: 反转基因福娃    时间: 2024-12-10 21:59
标题: Electron小案例
好的，您想要的功能涉及到几个步调的实现。我们需要在窗体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')
4. let status = false  // 初始状态为 false
6. // 单击事件：设置状态为 true，并关闭窗体2
7. document.getElementById('closeButton').addEventListener('click', () => {
8.   status = true  // 设置状态为 true
10.   // 向主进程发送状态
11.   ipcRenderer.send('update-status', status)
13.   // 关闭窗体2
14.   window.close()
15. })

复制代码

2. 主进程（监听窗体2关闭并传递状态到窗体1）

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

复制代码

3. 窗体1渲染进程（接收状态并举行进一步操作）

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

复制代码

解析：

• 窗体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()
5.   // 做一些清理工作
6.   console.log('Window is closing, but we have blocked the default action')
8.   // 你可以在这里确认用户是否真的要关闭窗体，或者保存数据等
9. })

复制代码

在这个例子中，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')
3. ipcRenderer.on('message-from-main', (event, arg) => {
4.   console.log(event)  // event 是 Event 对象，包含消息的相关信息
5.   console.log(arg)    // 主进程发送的数据
6. })

复制代码

在这个例子中，event 是由主进程发送的消息变乱对象，arg 是传递给渲染进程的数据。
总结：

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

通过 event 对象，你可以得到更多的上下文信息，并在需要时控制变乱的实行行为。

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

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4