Elctron窗口配置

参考官网：https://www.electronjs.org/zh/docs/latest/api/browser-window#winmaximizable-macos-windows

let mainWin = new BrowserWindow({
    backgroundColor: '#ff00a3' ,//设置背景色
    useContentSize: true, //窗口的实际尺寸将包括窗口边框的大小
    x:20,//设置窗口的显示位置，相对于当前屏幕的左上角
    y:20,//设置窗口的显示位置，相对于当前屏幕的左上角
    show:false,//默认情况下创建一个窗口对象之后显示，设置为false就不会显示了 结合监听函数使用
    width: 1280, //宽度
    height: 800,//高度
    maxHeight:1000,//最大高度
    minHeight:400,//最小高度
    maxWidth:1200,//最大宽度 
    minWidth:600,//最小宽度
    frame:fasle,//取消顶部菜单
    transparent:true//设置透明度
    autoHideMenuBar:true //显示顶部标题和图标
    resizable: false,//用于决定窗口是否可被用户手动调整大小。
    maximizable: false,//用于决定窗口是否可被用户手动最大化
    fullscreenable: false,//决定最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。
    center: true,//居中
    icon: join(ROOT_PATH.public, "favicon.png"),  //打开下边显示的图标
    title：'标题'//配置标题 注意在这里配置 index.html中的title应为空
    titleBarStyle: "hidden",//窗口标题栏样式
    webPreferences: {
      preload,
      webSecurity: false,
      nodeIntegration: true,
      sandbox: true,
      contextIsolation: true,
      offscreen:true//表示在内存执行
    },
  });
  mainWin.on('ready-to-show',()=>{//结合show设置为false使用//优雅打开窗口
  	mainWin.show() 
  })

无边框窗口

隐藏标题

 const win = new BrowserWindow({
    // 移除默认的标题栏标题样式
    titleBarStyle: 'hidden'
  })

隐藏后导致窗口无法拖拽

解决方案

一.渲染进程添加样式解决

• 在渲染进程的dom中添加样式： -webkit-app-region: drag;
• 给不需要拖拽的元素取消 -webkit-app-region: no-drag;事件才可以生效

二.渲染进程向主进程通信解决（比较推荐）

1. 渲染进程添加事件mousedown使用拖拽方式记录值
2. 渲染进程把值传递给主进程
3. 主进程设置窗口的位置

渲染进程

<template>
  <div class="app" @mousedown="mousedown">
    <h1>Electron Vue App</h1>
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let isKeyDown = ref(false);
let dinates = ref({
  x: 0,
  y: 0,
});

const mousedown = (e: any) => { 
  isKeyDown.value = true;
  dinates.value = {
    x: e.x,
    y: e.y,
  };

  document.onmousemove = (ev: any) => {
    console.log(e);
    
    if (isKeyDown.value) {
      const x = ev.screenX - dinates.value.x;
      const y = ev.screenY - dinates.value.y;
      let data = {
        appX:x,
        appY:y,
      }
      window.electron.ipcRenderer.invoke('move-window', data);
    }
  };

  document.onmouseup = () => {
    isKeyDown.value = false;
  };
};

</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.app{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

主进程

ipcMain.handle('move-window',  (event, someArgument) => {
  console.log('move-window', someArgument);
    mainWindow.setPosition(someArgument.appX, someArgument.appY)
})

自定义最小化最大化关闭按钮实现功能

//为几个按钮绑定事件 
//在js中需要引入remote模块
const {remote } = require('electron') 
//利用remote获取当前窗口
let mainWin = remote.getCurrentWindow()
//关闭窗口 调用close方法
mainWin.close()、
app.quit()  //关闭软件
//最大化窗口
if(mainWin.isMaximized()){//判断当前是否为最大化 
    mainWin.restore() //回到原来状态
}else{
    mainWin.maximize()//窗口最大化
}
//最小化窗口
if(!mainWin.isMinimized()){//判断当前是否为最小化
    mainWin.minimize()//窗口最小化
}   

避免重复创建子窗口

解决方法判断

  let num1Window:any  = null

  // 主进程接收渲染进程消息
ipcMain.handle('num1',  (event, someArgument) => {
  //创建之前判断
  if(num1Window !== null) return 
 num1Window = new BrowserWindow({
    width: 500,
    height: 400,
    show: false,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false
    }
  })

}

窗口置顶 透明窗口  锁定，解锁窗口  解决阴影问题

窗口置顶

alwaysOnTop: true,

窗口透明 无边框设置后生效 frame:false,

transparent:true,

锁定解锁

win.isKiosk()   //判断窗口是否处于锁定模式.

win.setKiosk(true)true锁定 或false解锁

去除阴影

asShadow:false