Vite+Vue3+Ts+Electorn构建桌面应用<2>-自定义窗口大小，最大化，最小化，关闭,登陆跳转

仓库地址：gitee地址

效果图

基本设置

frame: false,//隐藏头部
resizable: false,//用户是否可以调整窗口大小
show: false, //先不显示窗口，等窗口准备好了才显示，防止渲染未完成时出现白框
maximizable: false,//禁止双击最大化

登录和首页之间相互跳转

页面中有登录进入主页 也有退出登录去跳转到登录页面 直接 setSize()会直接看到大小变化，放在普通场景算正常，但是如果类似从登录界面切换到主界面或者从主界面切换到登陆页面，这时候直接变化大小看起来很奇怪，最好需要做点处理过渡一下。

登录跳转到首页

const initMainWindow =  (windowObj) => {
    //去首页
    console.log(windowObj)
    windowObj.setTitle('首页');
    windowObj.setSize(1400, 900);
    windowObj.setMinimumSize(1400, 900);
    windowObj.setResizable(true);
    windowObj.setMaximizable(true);
    windowObj.center();

}
ipcMain.on('showMainWindow', (event, delay=500) => {
    //去首页事件
    if (delay) {
        delayShowWindow(initMainWindow, delay);
    } else {
        initMainWindow(win);
    }
});

退出登录到登录页面

const initLoginWindow = (windowObj) => {
    //去登陆页面
    console.log(windowObj)
    windowObj.setTitle('登录');
    windowObj.setSize(680, 430);
    windowObj.setMinimumSize(680, 430);
    windowObj.setResizable(false);
    windowObj.setMaximizable(false);
    windowObj.center();
};
ipcMain.on('showLoginWindow', (event, delay=500) => {
    //去登陆页面事件
    if (delay) {
    	delayShowWindow(initLoginWindow, delay);
    } else {
    	initLoginWindow(win);
    }
});

可拖拽区

• 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的
• 在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除

最小化、最大化、关闭

窗口的变化都是 render 进程通过 ipcRenderer 与 ipcMain 进行通讯，以通知 main 进程操作窗体。

在页面中引入const {ipcRenderer} = require('electron');

最大化

const windowMax = () =>{
  ipcRenderer.send('window-max');
}
ipcMain.on('window-max', function() {
        //最大化
        if (win.isMaximized()) {
            win.restore();
        } else {
            win.maximize();
        }
    });

最小化

const windowMin = () =>{
  ipcRenderer.send('window-min');
}
ipcMain.on('window-min', function() {
    //最小化
    win.minimize();
})

关闭退出

const windowClose = () => {
  ElMessageBox.confirm(
      '确定退出?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    ipcRenderer.send("window-close") // 通知主进程 关闭
  })
}
ipcMain.on('window-close', () => {
    win.close()//关闭窗口
});

electron / main.ts

// electron / main.ts
import { app, BrowserWindow,ipcMain} from 'electron';
import { join } from 'path';
const createWindow = () => {
    const win = new BrowserWindow({
        width: 680,
        height: 430,
        frame: false,//隐藏头部
        resizable: false,//用户是否可以调整窗口大小
        show: false, //先不显示窗口，等窗口准备好了才显示，防止渲染未完成时出现白框
        maximizable: false,//禁止双击最大化
        webPreferences: {
            nodeIntegration: true, // 设置是否在页面中启用 Node.js 集成模式
            contextIsolation: false, // 设置是否启用上下文隔离模式。

        },
    });

    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL);
    } else {
        win.loadFile('index.html')
    }
    const initLoginWindow = (windowObj) => {
        //去登陆页面
        console.log(windowObj)
        windowObj.setTitle('登录');
        windowObj.setSize(680, 430);
        windowObj.setMinimumSize(680, 430);
        windowObj.setResizable(false);
        windowObj.setMaximizable(false);
        windowObj.center();
    };

    const initMainWindow =  (windowObj) => {
        //去首页
        console.log(windowObj)
        windowObj.setTitle('首页');
        windowObj.setSize(1400, 900);
        windowObj.setMinimumSize(1400, 900);
        windowObj.setResizable(true);
        windowObj.setMaximizable(true);
        windowObj.center();

    }
    const delayShowWindow = (initFn, delay) => {
        //切换过渡登录界面切换到主界面或者从主界面切换到登陆页面，这时候直接变化大小看起来很奇怪，最好需要做点处理过渡一下
        win.setOpacity(0);
        initFn(win);
        // 在最小化之后修改size会无效，所以要在最小化之前修改大小
        win.minimize();
        setTimeout(() => {
            win.setOpacity(1);
            win.show();
            win.focus();
        }, delay);
    }
    win.on('ready-to-show', () => {
        win.show() // 初始化后再显示
    })
    ipcMain.on('window-close', () => {
        win.close()//关闭窗口
    });
    ipcMain.on('window-max', function() {
        //最大化
        if (win.isMaximized()) {
            win.restore();
        } else {
            win.maximize();
        }
    });
    ipcMain.on('window-min', function() {
        //最小化
        win.minimize();
    })
    ipcMain.on('showMainWindow', (event, delay=500) => {
        if (delay) {
            delayShowWindow(initMainWindow, delay);
        } else {
            initMainWindow(win);
        }
    });
    ipcMain.on('showLoginWindow', (event, delay=500) => {
        console.log(delay);
        if (delay) {
            delayShowWindow(initLoginWindow, delay);
        } else {
            initLoginWindow(win);
        }
    });
};

app.whenReady().then(createWindow);