[Electron] ipcMain 和 ipcRenderer

ipcMain

const { ipcMain } = require("electron");

ipcMain.handle("click-me", (_, msg) => {
  return "<----" + msg + "---->";
})

ipcRenderer

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electron", {
  platform: process.platform,
  clickMe: (msg) => ipcRenderer.invoke("click-me", msg)
});

App.vue

<script lang="ts" setup>
import {ref} from "vue";

const result = ref("")
const message = ref("")

async function handleClick() {
  result.value = await window.electron.clickMe(message.value)
}
</script>

<template>
  <input v-model="message"/>
  <button @click="handleClick">click me</button>
  <p>{{ result }}</p>
</template>

簡單梳理

1. 頁面點選；
2. ipcRenderer 傳送；
3. ipcMain 處理和返回；
4. ipcRenderer 收取；