进程

electron 的进程理解

1、主进程

• 有且只有一个，是整个程序打的入口点
• 可以使用和系统对接的 Electron API
• 可以创建渲染进程
• 全面支持 Node.js

2、渲染进程

• 可以有多个，每个对应一个窗口，每一个都是一个单独的进程
• 可以使用一部分 Electron 提供的 API
• 全面支持 Node.js 和 DOM API

mian.js 创建进程

const { app, BrowserWindow } = require('electron')

app.on('ready', () => {
  // 创建主进程
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true // 允许使用 node.js
    }
  })
  mainWindow.loadFile('index.html')
  mainWindow.on('closed', () => { mainWindow = null }) // 回收
})

构建一个通用 Class

const { BrowserWindow } = require('electron')

class AppWindow extends BrowserWindow {
constructor(config, urlLocation) {
  const basicConfig = {
      width: 800,
      height: 600,
      webPreferences: {
          nodeIntegration: true, // 是否集成 Nodejs
          enableRemoteModule: true
      },
      show: false,
      backgroundColor: '#efefef' // 加载中的显示的背景颜色
  }
  const finalConfig = { ...basicConfig, ...config }
  super(finalConfig)
  this.loadURL(urlLocation)
  this.once('ready-to-show', () => {
      this.show()
  })
}
}

module.exports = AppWindow

使用例子

const settingsWindowConfig = {
width: 600,
height: 500,
parent: mainWindow
}
const settingsWindowLocation = `file://${join(__dirname, './settings/index.html')}`
settingsWindow = new AppWindow(settingsWindowConfig, settingsWindowLocation)
settingsWindow.removeMenu()
settingsWindow.on('closed', () => { settingsWindow = null })

进程通讯

1、IPC

ipcMain

• on：监听事件

  const { ipcMain } = require('electron')
  
  // eventName：事件名称
  // arg：传送过来的数据
  ipcMain.on(eventName, (event, arg) => {
      // 可回应
      event.reply(replyName, replyData)
  })

ipcRenderer

• send：触发事件，发送数据给ipcMain

  const { ipcRenderer } = require('electron')
  
  ipcRenderer.send(eventName, eventData)

• on：监听回应

  const { ipcRenderer } = require('electron')
  
  ipcRenderer.on(replyName, (event, arg) => {
  	// arg：回应传送过来的数据
  })

2、remote

• 渲染进程拿到主进程

const { BrowserWindow } = require('electron').remote // 等于拿到主进程，就可以使用主进程上的api了
// 例如使用 BrowserWindow 开一个新的渲染进程

找不到remote

• main.js 中添加：

  webPreferences: {
      nodeIntegration: true, // 是否集成 Nodejs
      enableRemoteModule: true
  }