electron常用方法

一，,electron设置去除顶部导航栏和menu

1，electron项目
在创建BrowserWindow实例的main.js页面添加frame：false属性

2，electron-vue项目
在src/main/index.js文件下找到创建窗口的方法（createWindow），在mainWindow中添加frame:false属性

添加前：frame:true

添加后，frame:false

  // 创建一个浏览器的窗口const mainWindow = new BrowserWindow({width: 900,height: 670,// 最小高度minHeight: 500,minWidth: 500,show: false,// 窗口大小是否可调整，false就是不可以调整// resizable: false,// 窗口初始化的位置x轴x: 100,// 窗口初始化位置y轴y: 100,// autoHideMenuBar: false,// 去除顶部标题以及菜单栏frame: false,// 隐藏标题,会导致窗口无法移动// titleBarStyle: 'hidden',...(process.platform === 'linux' ? { icon } : {}),webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false// nodeIntegration: true, // 不加，渲染进程会报错// contextIsolation: false // 为了安全性// // enableRemoteModule: true // 不加，渲染进程会报错}})

二：electron-vue设置一进页面全屏显示

解决前：fullscreen: false,

解决后：fullscreen: true,

三，解决electron设置可以拖动区域，模拟原来的顶部导航栏拖拽操作

1，设置了titleBarStyle: 'hidden'的弊端（隐藏标题（这种情况会导致窗口无法移动））

状态：  无标题，有：关闭、缩小、放大

解决办法1：（添加样式来解决）

1. 在渲染进程的dom中，添加样式：-webkit-app-region: drag;（会导致事件无法生效）

-webkit-app-region: drag;

2.给不需要拖拽的元素，取消-webkit-app-region: no-drag;（为了解决，添加后，会导致点击等事件无法触发，不生效）（给不需要拖动的地方添加，加了之后这个区域就无法拖动了）

-webkit-app-region: no-drag;

渲染进程添加样式来解决 在App.vue 中

<!-- 第一步 -->
<template><div class="app"><router-view></router-view></div>
</template><style>.app {position: absolute;left: 0;bottom: 0;right: 0;top: 0;-webkit-app-region: drag;}
</style>
<!-- 第二步在不需要拖动的地方： -->
<template><div class="Login">xxxxxxx，这个区域内的内容是无法拖动的</div>
</template>
<style>.Login{-webkit-app-region: no-drag;}
</style>

解决办法2（给主进程传参）

App.vue文件

<template><div class="app" @mousedown="mousedown"><router-view></router-view></div>
</template>
<script setup lang="ts">
import Versions from './components/Versions.vue'
import { ref } from 'vue'
let isKeyDown = ref(false)
let dinatesX = ref(0)
let dinatesY = ref(0)
const ipcHandle = () => window.electron.ipcRenderer.send('ping')
const mousedown = (e) => {isKeyDown.value = true// 获取鼠标移入到窗口时的x坐标dinatesX.value = e.x// 获取鼠标移入到窗口时的y坐标dinatesY.value = e.ydocument.onmousemove = (ev) => {console.log(ev,'ev')// ev就是获取鼠标移入到窗口时相对于屏幕的x坐标y坐标if (isKeyDown.value) {const x = ev.screenX - dinatesX.valueconst y = ev.screenY - dinatesY.value//给主进程传入坐标let data = {appX: x,appY: y}electron.ipcRenderer.invoke('custom-adsorption', data)}}document.onmouseup = (ev) => {isKeyDown.value = false}
}
</script>
<style>
html,
body,
#app {height: 100%;width: 100%;/* overflow: hidden; */margin: 0;padding: 0;
}
.app {/* position: absolute;left:0;bottom: 0;right: 0;top:0;-webkit-app-region: drag; */background-color: aqua;height: 100%;width: 100%;
}
</style>

主流程的index.js文件

  ipcMain.handle('custom-adsorption', (_, res) => {mainWindow.setPosition(res.appX, res.appY)})

四：electron窗口去除自带导航栏后自定义窗口最小化，窗口全屏，恢复窗口，关闭窗口按钮操作

1,App.vue

<template><div><el-button @click="emit">退出程序</el-button><el-button @click="clone">关闭当前窗口</el-button><el-button @click="min">最小化</el-button><el-button @click="max">最大化</el-button></div><div class="app" @mousedown="mousedown"><router-view></router-view></div>
</template>const max = () =>{
electron.ipcRenderer.invoke('max')
}
const min = () =>{electron.ipcRenderer.invoke('min')
}
const clone = () =>{electron.ipcRenderer.invoke('clone')
}
const emit = () =>{electron.ipcRenderer.invoke('emit')
}

 主进程

  ipcMain.handle('clone', () => {//关闭当前窗口mainWindow.close()})ipcMain.handle('min', () => {//最小化mainWindow.minimize()})ipcMain.handle('max', () => {//最大化if (mainWindow.isMaximized()) {//判断窗口是否最大化mainWindow.restore() //将窗口恢复为之前的状态} else {mainWindow.maximize() //将窗口全屏}})ipcMain.handle('emit', () => {//退出程序app.quit()})