记Electron的踩的坑；关于 resizable: false和自定义窗口最大化和恢复时候遇到的问题、关于 设置了frame: false 的无边框窗口的拖动问题；

前言

前言： 主窗口未设置resizable:false;，若要自定义electron的窗口最大化等功能，请参考electron自定义 窗口最大化最小
化关闭功能，

一、主窗口未设置resizable:false; 正常的自定义最大化恢复功能，正常实现：

1. 主窗口基本设置如下：

  win = new BrowserWindow({
        width: 1122,
        height: 670,
        show: false, // 一开始是false,loadpage加载完毕的时候为true
        frame: false, // 关闭window自带的关闭等功能以及工具栏， 无边框窗口是不允许拖动的，可通过设置样式让其可拖动
        webPreferences: {
            nodeIntegration: true,
            webSecurity: false //允许跨域
        }
    })

2. 渲染进程（vue文件中）：

<template>
  <div class="header">
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
   </div>
</template>
<script>
import { ipcRenderer} from 'electron';
export default {
  methods: {
    maximizeWin(){
      ipcRenderer.send('window-max') //  通知主进程,我要进行窗口最大化、恢复操作
    }
  }
}
</script>

3. 主进程：（background.js中）

// 窗口 最大化、恢复
ipcMain.on('window-max', function() {// 主进程接收渲染进程的窗口最大化通知；
    if (win.isMaximized()) { // true表示窗口已最大化.
        win.restore();// 将窗口恢复为之前的状态
    } else {
        win.maximize();// 窗口最大化
    }
})

二、主窗口设置 resizable: false后，自定义的窗口最大化恢复功能用上述方法无法实现

electron在new BrowserWindow({...}) 时，通过resizable: false 设置了禁止改变主窗口尺寸后，win.isMaximized() 总是返回false， win.restore()方法也失效，自定义的窗口最大化恢复功能无法实现。

解决办法：

1. 在渲染进程中定义一个变量 flag，通过 flag 确定 进行最大化窗口操作还是恢复操作；并将其传给主进程。
2. 主进程 利用 渲染进程传过来的 flag，替代 win.isMaximized() 这个判断条件。
3. 主进程 利用 win.setContentSize(x,y) 和 win.center() 的结合，完成原先win.restore();做的事情；
4. 这里 用win.setContentSize(x,y)的原因是，win.setSize(x,y)不起作用；

1. 主窗口基本设置如下：

  win = new BrowserWindow({
        width: 1122,
        height: 670,
        resizable: false, //禁止改变主窗口尺寸,设置过后，win.isMaximized()总是返回false
        show: false, // 一开始是false,loadpage加载完毕的时候为true
        frame: false, // 关闭window自带的关闭等功能以及工具栏， 无边框窗口是不允许拖动的，可通过设置样式让其可拖动
        webPreferences: {
            nodeIntegration: true,
            webSecurity: false //允许跨域
        }
    })

2. 渲染进程（vue文件中）：

<template>
  <div class="header">
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
   </div>
</template>
<script>
import { ipcRenderer} from 'electron';
export default {
  data () {
    return {
      winFlag:false // winFlag为true时，代表要进行窗口最大化操作
    }
  },
  methods: {
    maximizeWin(){
      ipcRenderer.send('window-max') 
    }
     maximizeWin(){
      this.winFlag=!this.winFlag; 
      ipcRenderer.send('window-max',{winFlag:this.winFlag}) //  通知主进程,我要进行窗口最大化、恢复操作，并传入一个Boolean值
    },
  }
}
</script>

3. 主进程：（background.js中）

// 窗口 最大化、恢复
ipcMain.on('window-max', function(event, obj) { // 接收渲染进程的消息和数据  
    if (obj.winFlag) { // val为 true，代表我想进行最大化窗口操作，此时 调用最大化函数
        win.maximize();
    } else {
        win.setContentSize(1122, 670); //重新设置窗口客户端的宽高值（例如网页界面），这里win.setSize(x,y)并不生效。
        win.center(); // 窗口居中
    }
})

三、主窗口设置 frame: false,后，整个窗口不可拖动

electron在new BrowserWindow({...}) 时，通过frame: false （无边框窗口）设置可 关闭window自带的关闭等功能以及工具栏，无边框窗口是不允许拖动的，可通过设置-webkit-app-region: drag;样式让其可拖动，但设置了改样式的元素将不可点击，故有-webkit-app-region: no-drag;样式，让元素可点击

/* 主窗口设置了 resizable: false 禁止改变主窗口尺寸，将不可拖动，故需加drag，让其可拖动； */ 
.ele_drag {
    -webkit-app-region: drag; /* 让元素可拖动，设置了drag的元素不可点击 */
}

.no_drag {
    -webkit-app-region: no-drag; /* 设置了drag的元素将不可点击，故设置no-drag，让元素可点击 */
}

例： 我在我的项目中，对需要拖动的元素用了 ele_drag 类，对这个元素下面的需要点击的元素单独应用了 no_drag 类，详情见Vue+Electron 项目的 header 组件中；