Electron 基本ipc通信，基于vue3、vite、@electron-toolkit/preload

简述

使用基于vue3、vite、@electron-toolkit/preload等的简介 | electron-vite (cn-evite.netlify.app)，只需要在vue中（即renderer中）和main中写代码。

安装electron-vite的方法在文档中，不再赘述。

单向通信

vue中使用window.electron.ipcRenderer.send('方法名', 单向传值) main/index.js(main.js)中使用ipcMain.on('方法名', 函数)

注意在main中，参照官方文档，应该将ipcMain放在createWindow()之前

app.whenReady().then(() => {

  //引用ipcmain
  ipcMain.on('方法名', 方法函数)
  
	...
  createWindow()
  app.on('activate', function () {
	...
})

双向通信

vue中使用window.electron.ipcRenderer.invoke('方法名').then((传回参数)=>{...}) main/index.js(main.js)中使用ipcMain.handle('方法名', 方法函数)，函数记得返回值，建议异步记得返回值

例子

app.vue

<script setup>
import { ref } from 'vue'
const input = ref('')
const msg = () => {
  window.electron.ipcRenderer.send('msg', input.value)
}
const btn = () => {
  window.electron.ipcRenderer.invoke('openFile').then((filePath) => {
    document.getElementById('filePath').innerText = filePath
  })
}
</script>
<template>
  <input v-model="input" type="text" />
  <button @click="msg">生成</button>
  <button @click="btn">Open a File</button>
  File path: <strong id="filePath"></strong>
</template>

Main/index.js

import func from './func.js'
...
app.whenReady().then(() => {

  //引用ipcmain
  ipcMain.on('msg', func.msg)
  ipcMain.handle('openFile', func.handleFileOpen)
  
	...
  createWindow()
	...
})

Main/func.js

const { dialog } = require('electron')
export default {
  msg(event, text) {
    console.log('msg', text)
  },

  async handleFileOpen() {
    const { canceled, filePaths } = await dialog.showOpenDialog({})
    if (!canceled) {
      return filePaths[0]
    }
  }
}