Electron 从入门到实践05

实例讲解electron 主进程和渲染进程通讯与操作
本实例是：在点击关闭窗口时，弹出一个消息弹框询问用户是否确认退出。当点击是则退出并关闭所有窗口，否则不做操作。

1、主进程文件修改

在原来的项目基础上，增加main.js文件

const { app, BrowserWindow, Menu, ipcMain } = require('electron')  // 引入ipcMain
......
  // 打开调试工具
  win.webContents.openDevTools()
  
  /* 增加的监听窗口关闭代码 */
  // 监听窗口关闭的事件，监听到时将一个消息发送给渲染进程
  win.on('close', (e) => {
    e.preventDefault();
    // 给渲染进程发消息
    win.webContents.send('action', 'exiting');
  });

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

/* 增加的监听来自渲染进程消息的代码 */
// 监听与渲染进程的通讯，监听来自渲染进程的消息，当监听到确定关闭时，将所有窗口退出
ipcMain.on('reqaction', (event, arg) => {
  console.log('check msg:', arg)
  switch(arg){
    case 'exit':
      app.exit()  // 退出所有窗口，注意这里使用 app.quit() 无效
      break;
  }
});

1、渲染进程文件修改

在原来的项目基础上，增加event.js文件

......
// 用来解释主进程和渲染进程的实例
// 流程：先在主进程中监听窗口的close事件，然后当发生点击时，将消息从主进程发送到渲染进程。渲染进程收到消息后执行某些操作后，将消息发回主进程，由主进程执行剩下的操作
function eventQuit(){
  var options = {};
  options.title = '信息对话框';
  options.message = '确定退出吗？';
  options.type = 'none';
  options.buttons = ['Yes','No'];
  dialog.showMessageBox(options,(response) => {
    console.log('当前被单击的按钮索引是' + response);
    if (response == 0) {
      ipcRenderer.send('reqaction', 'exit');
    }
  })
}


//监听与主进程的通信
ipcRenderer.on('action', (event, arg) => {
  switch(arg){
  case 'exiting':
      eventQuit();
      break;
  }
});

运行效果