From 78d4ec62d13d4f992d938b3eb59ac691ffc4a081 Mon Sep 17 00:00:00 2001 From: orzi <1063614727@qq.com> Date: Wed, 4 Dec 2024 16:11:36 +0800 Subject: [PATCH] 1 --- customTypes/global.d.ts | 31 ++++++++++++++++++++++ src/ipc/channel.ts | 37 +++++++++++++++++++++++++++ src/ipc/index.ts | 24 +++++++++++++++++ src/main/services/web-content-send.ts | 5 ++++ src/renderer/App.vue | 17 ++++++++---- 5 files changed, 109 insertions(+), 5 deletions(-) diff --git a/customTypes/global.d.ts b/customTypes/global.d.ts index b4018a5..fb969e1 100644 --- a/customTypes/global.d.ts +++ b/customTypes/global.d.ts @@ -1,14 +1,41 @@ import { ipcRenderer, shell } from "electron"; import type { IIpcRendererInvoke, IIpcRendererOn } from "../src/ipc/index"; + +/** + * 渲染进程给主进程发送消息 + */ type IpcRendererInvoke = { [key in keyof IIpcRendererInvoke]: { + /** + * 渲染进程给主进程发送消息 + * @param args 参数 + * @returns + */ invoke: IIpcRendererInvoke[key]; }; }; + +/** + * 渲染进程监听事件 + */ type IpcRendererOn = { [key in keyof IIpcRendererOn]: { + /** + * 渲染进程监听事件 + * @param listener 监听事件 + * @returns + */ on: (listener: IIpcRendererOn[key]) => void; + /** + * 渲染进程监听一次事件 + * @param listener + * @returns + */ once: (listener: IIpcRendererOn[key]) => void; + /** + * 渲染进程移除所有监听 + * @returns + */ removeAllListeners: () => void; }; }; @@ -28,6 +55,10 @@ declare global { performance: { memory: memoryInfo; }; + /** + * 渲染进程的IPC通道 + * 但是只能是给主进程发消息(invoke)和监听主进程的消息(on/once) + */ ipcRendererChannel: IpcRendererInvoke & IpcRendererOn; systemInfo: { platform: string; diff --git a/src/ipc/channel.ts b/src/ipc/channel.ts index ae258f1..5f10730 100644 --- a/src/ipc/channel.ts +++ b/src/ipc/channel.ts @@ -1,26 +1,55 @@ +/** + * 这个文件是定义IPC通道的事件监听 + * 总的来说，IpcMainEventListener 和 IpcRendererEventListener 无需理解，这俩只是类型 + * IpcChannelMainClass 和 IpcChannelRendererClass 是主进程和渲染进程的IPC通道事件监听 + */ + import type { ProgressInfo } from "electron-updater"; +/** + * 主进程的IPC通道事件监听 + */ export interface IpcMainEventListener { + /** + * 主进程监听事件 + */ ipcMainHandle: Send extends void ? (event: Electron.IpcMainInvokeEvent) => Receive | Promise : ( event: Electron.IpcMainInvokeEvent, args: Send ) => Receive | Promise; + /** + * 渲染进程给主进程发送消息 + */ ipcRendererInvoke: Send extends void ? () => Promise : (args: Send) => Promise; } +/** + * 渲染进程的IPC通道事件监听 + */ export interface IpcRendererEventListener { + /** + * 渲染进程监听事件 + */ ipcRendererOn: Send extends void ? (event: Electron.IpcRendererEvent) => void : (event: Electron.IpcRendererEvent, args: Send) => void; + /** + * 主进程给渲染进程发送消息 + */ webContentSend: Send extends void ? (webContents: Electron.WebContents) => void : (webContents: Electron.WebContents, args: Send) => void; } +/** + * 主进程的IPC通道事件 + * 给主进程发消息的事件以及主进程监听的事件都写在这里，但是这里也只是规定了都有什么，并没有具体实现 + * 具体实现在 src/main/services/ipc-main-handle.ts + */ export class IpcChannelMainClass { IsUseSysTitle: IpcMainEventListener = null; /** @@ -73,6 +102,14 @@ export class IpcChannelMainClass { sendData?: unknown; }> = null; } + +/** + * 渲染进程的IPC通道事件 + * 给渲染进程发消息的事件以及渲染进程监听的时间都写在这里，但是这里也只是规定了都有什么，并没有具体实现 + * 具体实现在 src/main/services/web-content-send.ts，但是是虚拟化的，可以就把这个当个interface来看 + * 主进程给渲染进程发消息的话，直接就 webContentSend.事件名 就行了 + * 如 webContentSend.SendDataTest(childWin.webContents, arg.sendData); + */ export class IpcChannelRendererClass { // ipcRenderer DownloadProgress: IpcRendererEventListener = null; diff --git a/src/ipc/index.ts b/src/ipc/index.ts index c648827..b94a892 100644 --- a/src/ipc/index.ts +++ b/src/ipc/index.ts @@ -1,3 +1,8 @@ +/** + * 这个文件是用来导出所有的类型定义的 + * 其实总的来说都不需要理解，毕竟都是类型定义，能用就行 + */ + import { IpcChannelMainClass, IpcChannelRendererClass, @@ -5,6 +10,10 @@ import { IpcRendererEventListener, } from "./channel"; +/** + * 获取事件名及参数 + * 这里其实不需要理解，只需要知道这个类型是用来获取事件名及参数的 + */ type GetChannelType< T extends IpcChannelMainClass | IpcChannelRendererClass, K extends keyof IpcMainEventListener | keyof IpcRendererEventListener @@ -12,12 +21,27 @@ type GetChannelType< [Key in keyof T]: K extends keyof T[Key] ? T[Key][K] : never; }; +/** + * 主进程监听事件 + */ export interface IIpcMainHandle extends GetChannelType {} + +/** + * 渲染进程给主进程发送消息 + */ export interface IIpcRendererInvoke extends GetChannelType {} + +/** + * 渲染进程监听事件 + */ export interface IIpcRendererOn extends GetChannelType {} + +/** + * 给渲染进程发消息 + */ export interface IWebContentSend extends GetChannelType {} diff --git a/src/main/services/web-content-send.ts b/src/main/services/web-content-send.ts index a58e846..2cf1cf8 100644 --- a/src/main/services/web-content-send.ts +++ b/src/main/services/web-content-send.ts @@ -1,5 +1,10 @@ import { IWebContentSend } from "src/ipc"; +/** + * 主进程给渲染进程发消息 + * 这是一个虚拟化的对象，实际上并没有实现任何方法，也不需要任何实现 + * 主进程给渲染进程发消息的话，直接就 webContentSend.事件名 就行了 + */ export const webContentSend: IWebContentSend = new Proxy( {}, { diff --git a/src/renderer/App.vue b/src/renderer/App.vue index e2f3e0f..8ce04c7 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -1,12 +1,19 @@ - +