electron+vue3全家桶+vite项目搭建【18】electron新建窗口时传递参数【url版】

news2024/11/24 9:43:53

文章目录

- 引入
- 实现效果展示
- 实现思路
- 实现步骤
- - 1.调整主进程新建窗口的handle
  - 2.调整新建窗口函数
  - 3.封装url获取请求参数的工具
- 测试代码

引入

electron+vue的项目中，我们通过传入页面路由来展开新的页面，就像vue-router的路由传参一样，我们可以利用url进行参数传递【不直接使用路由传参，是因为后续封装窗口工具类时，我们控制同一路由只对应一个窗口】

demo项目地址

实现效果展示

如下图所示，我们在新建窗口时传入消息参数，“想你问个好”，helloWorld页在页面挂载时从url中取到传递的参数
请添加图片描述

实现思路

这里使用比较取巧的方法，直接把整个参数对象序列化后补充到路由的？后面，并且使用固定的参数名称，然后新页面挂载的时候从url中截取对应的参数，然后反序列化对象来获取初始值【ps：url的长度受限于浏览器的限制，建议数据量较少的时候使用这种方式】

实现步骤

1.调整主进程新建窗口的handle

我们之前实现了一个极简的新建窗口代码，现在我们补充接收一个json参数串：

electron\main\index.ts

/**
 * 新建一个窗口
 * route=>路由地址  paramJsonStr => 序列化后的参数对象
 */
ipcMain.handle("open-win", (_, route: string, paramJsonStr: string) => {
  const childWindow = new BrowserWindow({
    webPreferences: {
      preload,
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  const paramData = paramJsonStr ? "?urlParamData=" + paramJsonStr : "";
  if (process.env.VITE_DEV_SERVER_URL) {
    childWindow.loadURL(`${url}#${route}${paramData}`);
  } else {
    childWindow.loadFile(indexHtml, { hash: route + paramData });
  }
});

2.调整新建窗口函数

同样的，我们也需要修改electronUtils中的新建窗口方法：

src\utils\electronUtils.ts

/**
 * 新建一个窗口
 * @param path 路由地址
 */
export function openWindow(path: string, param: Object) {
  let paramJsonStr = undefined;
  if (param) {
    paramJsonStr = JSON.stringify(param);
  }
  ipcRenderer.invoke("open-win", path, paramJsonStr);
}

3.封装url获取请求参数的工具

我们在utils目录下新建一个myUtils工具类：

补充一个通过url获取参数对象的工具

src\utils\myUtils.ts

/**
 * 新建一个窗口
 * @param path 路由地址
 * @param param 传递的参数
 */
export function openWindow(path: string, param?: Object) {
  let paramJsonStr = undefined;
  if (param) {
    paramJsonStr = JSON.stringify(param);
  }
  ipcRenderer.invoke("open-win", path, paramJsonStr);
}

测试代码

1.我们调整测试代码，在新建窗口时传递参数对象：

src\components\demo\Index.vue

function openWindow() {
  electronUtils.openWindow(windowPath.value, {
    message: "向你问个好~~",
  });
}

2.在HelloWorld.vue文件中，页面完成挂载时弹出获取的参数：

src\components\HelloWorld.vue

import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

onMounted(() => {
  const paramData = myUtils.getParamFromUrl();
  if (paramData) {
    ElMessage.success(paramData.message);
  }
});