湛江市研发网站建设,在新西兰做兼职的网站,wordpress图片快速主题,网易企业邮箱入口登录文章目录 引入思路抽出公共声明文件抽出全局通用数据类型和方法主进程模块1.抽离基础常量2.封装窗口工具类 渲染进程模块测试结果 引入
demo项目地址
可以看到我们之前在主进程中的逻辑全部都塞到index.ts文件中#xff0c;包括窗口的一些事件处理#xff0c;handle监听包括窗口的一些事件处理handle监听协议注册等等后期维护起来会比较麻烦我们不妨将其中的功能细分封装到工具类中。
思路
以新建窗口举例流程为
主进程ipcMain.handle监听根据传来的参数构建新窗口
/*** 新建一个窗口* route路由地址 paramJsonStr 序列化后的参数对象*/
ipcMain.handle(open-win, (_, route: string, paramJsonStr: string) {...})渲染进程调用 ipcRenderer.invoke方法通知主进程创建窗口
/*** 新建一个窗口* param path 路由地址* param param 传递的参数*/
export function openWindow(path: string, param?: Object) {...ipcRenderer.invoke(open-win, path, paramJsonStr);
}可以预见的是后续窗口的创建逻辑会随着业务逻辑而扩展例如创建窗口时 指定窗口宽高标题背景色等属性设置窗口透明事件击穿等等内容并且多个窗口间的一些交互需要我们去维护一个窗口组信息记录窗口的id和逻辑上的关联关系等。 所以我们不妨创建一个窗口工具类专门集成封装窗口相关的方法属性等
抽出公共声明文件
我们在渲染进程项目模块中的electronUtils和主进程中的窗口工具类中的【handle/on】方法是一一对应的【invoke/send】传入的参数也是通用的所以我们不妨抽出一个公共的全局声明文件用于声明通用的一些参数对象。
1.在全局声明文件中添加通用事件对象的声明
types\global.d.ts
/** 一些全局的对象补充声明 */
export {};
declare global {...// 窗口创建参数规范interface IWindowConfig {key?: string; // 窗口唯一key不传则取窗口的id假如已存在该key则聚焦该窗口route?: string; // 窗口路由width?: number; // 窗口宽度height?: number; // 窗口高度param?: string; // 传递参数新窗口打开时能直接从路由中获取拼接url传递推荐只传小数据}
}2.主进程引入全局声明文件
electron\electron-env.d.ts
/// reference typesvite-plugin-electron/electron-env /import ../types/global.d.ts;抽出全局通用数据类型和方法
主进程和渲染进程都会调用相同的事件名称所以我们不妨定义一个全局的事件枚举类方便两个进程的代码书写和规范【事件名称应当唯一否则会重复绑定】。
1.在根目录下创建globel目录然后分别创建channelEvent.ts和channelEvent.d.ts两个文件 【事件管道枚举和对应的声明文件】 globel\channelEvent.ts
/*** 自定义事件枚举*/
export enum CustomChannel {window_create custom_window_create, // 窗口新建事件window_move_on custom_window_move_on, // 开启窗口移动事件window_position_change custom_window_position_change, // 修改窗口的位置
}globel\channelEvent.d.ts
// customEvents.d.ts/*** 自定义事件枚举的类型声明*/
export declare enum CustomChannel {window_create custom_window_create, // 窗口新建事件window_move_on custom_window_move_on, // 开启窗口移动事件window_position_change custom_window_position_change, // 修改窗口的位置
}2.在根目录下的tsconfig.node.json文件中添加引入
tsconfig.node.json include: [...,globel]3.配置别名快速访问
vite.config.ts
...
resolve: {alias: {...globel: path.resolve(__dirname, ./globel),},},tsconfig.json
{compilerOptions: {...paths: {...globel/*: [globel/*],},types: [vite-plugin-svg-icons/client]},}主进程模块
1.抽离基础常量
我们将主进程中常用的常量抽离到单独的文件中
electron\main\common\variables.ts
import { join } from node:path;/***公共变量配置*/
process.env.DIST_ELECTRON join(__dirname, ..);
process.env.DIST join(process.env.DIST_ELECTRON, ../dist);
process.env.PUBLIC process.env.VITE_DEV_SERVER_URL? join(process.env.DIST_ELECTRON, ../public): process.env.DIST;// 公共变量中存一份SRC的路径方便取值
process.env.SRC_PATH join(__dirname, ../../src).split(\\).join(/);// 预加载文件路径
export const preloadPath join(__dirname, ../preload/index.js);
// dev环境请求地址
export const url process.env.VITE_DEV_SERVER_URL;
// 部署环境的html文件路径
export const indexHtmlPath join(process.env.DIST, index.html);
// icon图标地址
export const iconPath join(process.env.PUBLIC, icons/icon.ico);
// app的title会被index.html中配置的title%VITE_APP_TITLE%/title 覆盖
export const appTitle 新窗口;
// app在windows上注册表的协议
export const PROTOCOL bcxlelectrondemo;2.封装窗口工具类
注意
1.定义默认窗口参数时使用了ts中的联合类型这样定义的defaultWindowConfig就必须拥有指定的两个类型中的所有属性
2.创建了一个窗口类并将窗口相关的逻辑封装为窗口类中的成员方法
3.窗口类中定义个一个listen方法里面放置所有需要与渲染进程交互的handle监听
electron\main\windowUtils.ts
import {BrowserWindow,BrowserWindowConstructorOptions,ipcMain,
} from electron;
import {url,appTitle,preloadPath,iconPath,indexHtmlPath,
} from ./common/variables;
import { CustomChannel } from ../../globel/channelEvent;/* 定义一些窗口工具类中会使用到的常量以及窗口顶级父类 */// 默认窗口参数
export const defaultWindowConfig: BrowserWindowConstructorOptions IWindowConfig {title: appTitle,icon: iconPath,width: 800,height: 600,webPreferences: {webviewTag: true,preload: preloadPath,nodeIntegration: true,contextIsolation: false,},
};/*** 窗口工具类*/
export class WindowUtils {// 事件监听处理listen() {// 窗口创建监听ipcMain.handle(CustomChannel.window_create, (_, opt: IWindowConfig) {this.createWindows(opt);});}/*** 创建窗口* param windowConfig 窗口创建参数*/createWindows(windowConfig: IWindowConfig): BrowserWindow {// 创建窗口对象const win new BrowserWindow(Object.assign({}, defaultWindowConfig, windowConfig));// 根据当前环境加载页面并传递参数const param windowConfig.param? ?urlParamData windowConfig.param: ;if (process.env.VITE_DEV_SERVER_URL) {// 如果是开发环境则直接访问本地跑起的服务拼接对应的路由win.loadURL(${url}#${windowConfig.route}${param});} else {// 如果是线上环境则加载html文件的路径然后拼接路由win.loadFile(indexHtmlPath, { hash: windowConfig.route param });}// 绑定通用窗口事件return win;}
}
接着我们调整index.ts中的创建主窗口的代码
import {WindowUtils} from ./windowUtils// 创建窗口工具类
const windowUtils new WindowUtils();
windowUtils.listen();...
async function createWindow() {...win windowUtils.createWindows({route:/});
}
对比之前代码简练了不少 渲染进程模块
1.我们调整通用交互工具类补充新的窗口创建方法
src\utils\electronUtils.ts
import { ipcRenderer } from electron;
import { CustomChannel } from globel/channelEvent;
/*** 新建一个窗口* param windowConfig*/
export function createWindow(windowConfig: IWindowConfig) {ipcRenderer.invoke(CustomChannel.window_create, windowConfig);
}2.调整demo代码
src\components\demo\Index.vue electronUtils.createWindow({route: windowPath.value,param: JSON.stringify({message: 向你问个好~~,}),});测试结果
能够正常的创建窗口
