electron 进程间通信

预加载脚本

1.src-electron添加preload.js

2.将preload.js挂载到主进程中

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1600,
    height: 700,
    // title: '11111111',
    icon: join(__dirname, '../public/login1.png'),
    webPreferences: {
      // 引入预加载脚本
      preload: join(__dirname, 'preload.js')
    }
  })

  // development模式
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
    // 开启调试台
    win.webContents.openDevTools()
  } else {
    win.loadFile(join(__dirname, '../dist/index.html'))
  }

  Menu.setApplicationMenu(null)
}

 

主进程使用 BrowserWindow 创建实例，主进程销毁后，对应的渲染进程回被终止。主进程与渲染进程通过 IPC 方式（事件驱动）进行通信。

单向通信（使用使用 ipcRenderer.send API 发送消息，然后使用 ipcMain.on API 接收）

1.在预加载脚本中添加（会被挂载到window上）

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  // 单向
  setTitle: (title) => ipcRenderer.send('set-title', title)
})

2.在主进程中接收

const {  ipcMain } = require('electron')
ipcMain.on('set-title', (event, title) => {
  // 获取当前的窗口
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)

  // 设置窗口标题  setTitle是electron内置的方法
  win.setTitle(title)
})

3.在渲染进程中调用

<script setup lang="ts">
const { electronAPI } = window

const changeTitle = () => {
  electronAPI.setTitle(title.value)
  console.log(electronAPI?.node())
  console.log(electronAPI?.chrome())
  console.log(electronAPI?.electron())
}
</script>

 

双向通信（使用使用 ipcRenderer.invokeAPI 发送消息，然后使用 ipcMain.handleAPI 接收） 

1.在预加载脚本中添加（会被挂载到window上）

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  // 双向
  postMessage: () => ipcRenderer.invoke('post-message')
})

2.在主进程中接收

const {  ipcMain } = require('electron')
ipcMain.handle('post-message', async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('支付宝到账100万元')
    }, 2000)
  })
})

3.在渲染进程中调用

<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')

const { electronAPI } = window

const sentMessage = async () => {
  message.value = await electronAPI?.postMessage()
}

</script>

进程间通信官网：https://www.electronjs.org/zh/docs/latest/tutorial/ipc

 

electron更多可操作的功能（系统级）

 https://www.electronjs.org/zh/docs/latest/tutorial/examples