vue+electron中进程通讯的三种方法

一、添加预加载文件以window对象作为媒介

在主进程中创建窗口，引入ipcMain

const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const WinState = require('electron-win-state').default
const path = require('path')

const winstate = new WinState({
  defaultWidth: 1000,
  defaultHeight: 800,
})
const createview = () => {
  const win = new BrowserWindow({
    ...winstate.winOptions,
    webPreferences: {
      preload: path.join(__dirname, './preload.ts'),
    },
  })
  win.webContents.openDevTools()
  winstate.manage(win)
  win.loadURL('http://localhost:5173')
  ipcMain.handle('mainupload', async ($event, { title, filetype }) => {//创建mainupload方法供预加载文件调用
    return await dialog.showOpenDialog({
      title,
      filters: [
        {
          name: 'dir',
          extensions: [].concat(filetype),
        },
      ],
      buttonLabel: '确认', 
      properties: [], 
    })
  })
}
app.whenReady().then(() => {
  createview()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createview()
  })
})

创建preload.ts预加载文件添加contextBridge桥

const {
  contextBridge,
  ipcRenderer,
} = require('electron')

contextBridge.exposeInMainWorld('myapi', {
  upload: async (r) => { //定义函数向主进程传递参数
    return await ipcRenderer.invoke('mainupload', r)
  },
})

在渲染进程中调用window下的myapi对象中的upload方法

<script setup lang="ts">
import { message } from 'ant-design-vue'
let fileList = ref([])
const upload = async () => {
  ;(window as any).myapi
    .upload({ title: '111', filetype: ['rar', 'zip'] })
    .then((res) => {
      console.log(res)
    })
}
</script>

<template>
  <a-button type="primary" @click="upload">上传</a-button>
</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>

二、抛弃预加载文件关闭独立运行electron API和preload

开启渲染进程中的node环境

const createview = () => {
  const win = new BrowserWindow({
    ...winstate.winOptions,
    webPreferences: {
      nodeIntegration: true, //是否开启在渲染进程中node的环境
      contextIsolation: false, //关闭独立加载electron API
    },
  })
  win.webContents.openDevTools()
  winstate.manage(win)
  win.loadURL('http://localhost:5173')
  ipcMain.handle('mainupload', async ($event, { title, filetype }) => {
    return await dialog.showOpenDialog({
      title, //可选弹出对话框的标题
      filters: [
        {
          name: 'dir',
          extensions: [].concat(filetype),
        },
      ],
      buttonLabel: '确认', 
      properties: [], 
    })
  })
}

在渲染进程中引入ipcRenderer

<script setup lang="ts">
import { message } from 'ant-design-vue'
let fileList = ref([])
// const fs = require('fs')
const { ipcRenderer } = require('electron')
const upload = async () => {
  let res = await ipcRenderer.invoke('mainupload', { //调用主进程的mainupload方法传递相关参数
    title: '选择成品',
    filetype: ['rar', 'zip'],
  })
  console.log(res)
}
</script>

<template>
  <a-button type="primary" @click="upload">上传</a-button>
</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>

三、添加事件监听以及触发自定义事件进行通讯

在主进程中添加来自渲染进程的事件监听，同事在渲染进程中监听来自主进程的事件

const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const WinState = require('electron-win-state').default
const path = require('path')

const winstate = new WinState({
  defaultWidth: 1000,
  defaultHeight: 800,
})
const createview = () => {
  const win = new BrowserWindow({
    ...winstate.winOptions,
    webPreferences: {
      nodeIntegration: true, 
      contextIsolation: false,
    },
  })
  win.webContents.openDevTools()
  winstate.manage(win)
  win.loadURL('http://localhost:5173')
app.whenReady().then(() => {
  createview()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createview()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
ipcMain.on('upload', (event, { title, filetype }) => { //对渲染进程触发的事件进行监听
  dialog
    .showOpenDialog({
      title, //可选弹出对话框的标题
      filters: [
        {
          name: 'dir',
          extensions: [].concat(filetype),
        },
      ],
      buttonLabel: '确认', 
      properties: ['showHiddenFiles'],
    })
    .then((res) => {
      event.sender.send('account-login', res) //触发渲染进程中的事件并传递参数
    })
})

在渲染进程中添加监听

<script setup lang="ts">
import { message } from 'ant-design-vue'
let fileList = ref([])
// const fs = require('fs')
const { ipcRenderer } = require('electron')
const upload = async () => {
  ipcRenderer.send('upload', { title: '选择成品', filetype: ['rar','zip'] }) // 触发主进程中的upload事件
  ipcRenderer.once('account-login', (event, { filePaths }) => {
    console.log(filePaths) //监听来自主进程的事件以及接收参数
  })
}
</script>

<template>
  <a-button type="primary" @click="upload">上传</a-button>
</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>