electron开发笔记——多窗口通信

要实现的功能背景：

实现一个互动答题，一个窗口为题目，一个窗口为答案。
后端一个接口返回了相关业务信息，前端拿到数据，在本地处理，在答题过程中不请求后端。

electron+vue 项目搭建

推荐使用 electron-vite，直接构建（链接：https://cn-evite.netlify.app）

如何通信

• 创建窗口

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false
    }
  })

  // 子 window
  const childWindow = new BrowserWindow({
    // 关于这个属性，查看electron官方文档，还涉及父子窗口、同级窗口，我当时为了快速开发功能，设计为父子窗口，
    parent: mainWindow, 
    width: 800,
    height: 600,
    useContentSize: true,
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false
    }
  })

• 当父窗口show的时候，子窗口也打开

mainWindow.on('ready-to-show', () => {
    mainWindow.show()
    childWindow.show()
  })

• electron窗口渲染层配置，只做简单的dev和prod环境区分，vue router采用hash模式

if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
    childWindow.loadURL(process.env['ELECTRON_RENDERER_URL'] + '#/home')
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
    childWindow.loadURL(join(__dirname, '../renderer/index.html') + '#/home')
  }

• electron还要做什么

  关于这个文件配置，可以参考electron官方介绍，以及设计思路，在这个项目结构里，这里不需要修改和补充
  

• 在vue里做什么

  在父窗口的vue文件里和子窗口的vue文件里，写发送服务，发送给electron，由electron接受信息，然后转发给窗口。父子窗口有接受服务，用于监听electron发送的信息。（直接贴代码）图中红色标记的123和黑色标记的123，表示先后发起的顺序，至于为什么不让窗口和窗口直接通信，需要再electron里走一层，可以查看官方文档的设计理念，这里不做过多解说