首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ Electron / 文章详情

electron loadURL设置窗口大小

Sonder
2024-12-06
1870字
5分钟
浏览 (174)

废话不多说,直接上代码!

electron 代码:

image.png

main 设置

接收 setMainWindowSize 方法

复制代码
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";

async function createWindow() {
 win = new BrowserWindow({
   width: 500,
   height: 500,
   title: "截图小工具",
   icon: join(process.env.PUBLIC, "favicon.ico"),
   webPreferences: {
     preload,
     devTools: true,
     // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
     nodeIntegration: true,
     contextIsolation: false
   }
 });
 // 本地
 win.loadURL("http://localhost:8850/#/");
 createMenu();
 // 设置窗口
 ipcMain.on("setMainWindowSize", () => {
   let width = 980;
   let height = 760;
   win.setSize(width, height); // 设置
   win.center();
 });
}

其中要把设置窗口的方法放在createWindow里面,而且窗口不能设置最小宽高,不然不生效。

preload 建立通信

复制代码
// --------- Preload scripts loading ---------
import { contextBridge, ipcRenderer } from "electron";
import { electronAPI } from "@electron-toolkit/preload";

interface SizeOptions {
  width?: number;
  height?: number;
}
// Custom APIs for renderer
const api = {
  // 设置窗口尺寸
  setMainSize({ width, height }: SizeOptions = {}): void {
    ipcRenderer.send("setMainWindowSize", { width, height });
  }
};

// Use `contextBridge` APIs to expose Electron APIs to
// renderer only if context isolation is enabled, otherwise
// just add to the DOM global.
if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld("electron", electronAPI);
    contextBridge.exposeInMainWorld("api", api);
  } catch (error) {
    console.error(error);
  }
} else {
  (window as any).electron = electronAPI;
  (window as any).api = api;
}

web 调接口

复制代码
const onLogin = async (formEl: FormInstance | undefined) => {
  console.log(`==========window.api`, (window as any).api);
  (window as any).api.setMainSize();
}

效果

setSize.gif
下一篇 / 优化实现el-input后缀图标和clearable的兼容

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)