electron常用方法

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：（添加样式来解决）

在渲染进程的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.y

  document.onmousemove = (ev) => {
    console.log(ev,'ev')
    // ev就是获取鼠标移入到窗口时相对于屏幕的x坐标y坐标
    if (isKeyDown.value) {
      const x = ev.screenX - dinatesX.value
      const 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()
  })

electron常用方法

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

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

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

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