vue+Electron,自定义最大化、最小化、关闭窗口的功能

简单的理解一下Electron的进程类型——渲染进程和主进程

1. 主进程： Electron 运行 package.json 的 main 脚本的进程。
2. 渲染进程: 在 web 页面运行的进程。
3. 一个 Electron 应用有且只有一个主进程。
4. 主进程中运行的脚本通过创建web页面来展示用户界面。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。
5. 主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的，它只关心它所运行的 web 页面。
6. 主进程和渲染进程可以相互通信。 如 可以使用ipcRenderer 和 ipcMain模块发送消息，可以使用 remote模块进行 RPC（远程过程调用）方式通信。

在我的vue-electron-demo项目中，package.json的main脚本是 background.js:

一、利用remote模块，让主进程、渲染进程通信；

直接在渲染进程里调函数：

注意：

1. 项目中装了Element和sass
2. 利用remote模块，在渲染进程中使用主进程模块。利用remote 模块,可以调用 主进程对象的方法, 而不必显式发送进程间消息。具体用法参考：官网
3. remote.getCurrentWindow()返回的是 BrowserWindow -即 此网页所属的窗口，它和主进程的win 相同，即主进程中的 new BrowserWindow ( {....} )

header.vue文件：

<template>
  <div class="header">
   	<span class="el-icon-minus" @click="minimizeWin"></span>
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
    <span class="el-icon-close" @click="closeWin"></span>
   </div>
</template>
<script>
import { remote } from 'electron';
export default {
  methods: {
       minimizeWin(){
      remote.getCurrentWindow().minimize(); // 窗口最小化
    },
    maximizeWin(){
      const win=remote.getCurrentWindow();
      if(win.isMaximized()){ // 判断 窗口是否已最大化 
        win.restore();// 恢复原窗口大小
      }else{
         win.maximize();  //最大化窗口
      }
    },
    closeWin(){
      remote.getCurrentWindow().close(); // 关闭窗口，也结束了所有进程
    }
  }
}
</script>
<style lang="scss">
	.header{
		span{
			font-size:20px;
			margin-right:20px;
			color:red;
		}
	}
</style>

图标 效果如下（此时已具备最小化、最大化、恢复以及关闭当前窗口的功能）：

二、使用ipcRenderer 和 ipcMain模块发送消息，让主进程、渲染进程通信；

在渲染进程给主进程发消息，通知主进程我要进行什么操作
注意：

1. 在渲染进程中通过ipcRender模块给主进程发送信息；
2. 主进程中接收渲染进程的消息，并调用函数，进行相应的操作。

<template>
  <div class="header">
   	<span class="el-icon-minus" @click="minimizeWin"></span>
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
    <span class="el-icon-close" @click="closeWin"></span>
   </div>
</template>
<script>
import { ipcRenderer} from 'electron';
export default {
  methods: {
     minimizeWin(){
       ipcRenderer.send('window-min') // 通知主进程我要进行窗口最小化操作
    },
    maximizeWin(){
      ipcRenderer.send('window-max')
    },
    closeWin(){
      ipcRenderer.send('window-close')
    }
  }
}
</script>
<style lang="scss">
	.header{
		span{
			font-size:20px;
			margin-right:20px;
			color:red;
		}
	}
</style>

在background.js文件：中新增如下代码：

//  新增三块 1 2 3； win是  win = new BrowserWindow({......})来的。

// 1. 窗口 最小化
ipcMain.on('window-min',function(){ // 收到渲染进程的窗口最小化操作的通知，并调用窗口最小化函数，执行该操作
  win.minimize();
})

// 2. 窗口 最大化、恢复
ipcMain.on('window-max',function () {
  if(win.isMaximized()){ // 为true表示窗口已最大化
    win.restore();// 将窗口恢复为之前的状态.
  }else{
    win.maximize();
  }
})

// 3. 关闭窗口
ipcMain.on('window-close',function (){
  win.close();
})

图标 效果如下（此时已具备最小化、最大化、恢复以及关闭当前窗口的功能）：

关于Electron的更多信息，参考：Electron 8.2.0 文档 或 官网。

vue-electron-demo 项目的 地址：https://github.com/ddx2019/vue-electron-demo