Electron 无边框窗口最大化最小化关闭功能

最新推荐文章于 2024-04-28 13:37:16 发布

HY_358116732

最新推荐文章于 2024-04-28 13:37:16 发布

阅读量6.1k

点赞数 2

分类专栏： javascript Electron 桌面应用

本文链接：https://blog.csdn.net/HY_358116732/article/details/87874969

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

Electron

1 篇文章 0 订阅

订阅专栏

桌面应用

1 篇文章 0 订阅

订阅专栏

目的
实现无边框窗口，并添加最大化最小化和关闭功能
前提
了解Electron 主进程和渲染进程的通讯
了解 BrowserWindow相关功能
操作流程

1.首先创建一个无边框的Window窗口

创建win的时候指定frame：false

var win = new BrowserWindow({
  transparent: true,
  frame: false
})

2.在界面上放三个按钮

/**-webkit-app-region: drag是可拖动的样式**/ 
<body style="-webkit-app-region: drag">
      <section style="-webkit-app-region: drag">
          <!--html代码-->
          <h1>Hello World!</h1>
      </section>

      <section style="-webkit-app-region: no-drag">
          <button type="button" id="maxbt">max</button>
          <button type="button" id="minbt">>min</button>
          <button type="button" id="closebt">>close</button>
      </section>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>     // require('electron').ipcRenderer;
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>

3. 添加事件把要做的操作发送给主进程

var ipc = require('electron').ipcRenderer;
document.getElementById('maxbt').addEventListener('click', () => {
  console.log('hello vscode!')
  ipc.send('window-max');

})
document.getElementById('minbt').addEventListener('click', () => {
  console.log('hello vscode!')
  ipc.send('window-min');

})
document.getElementById('closebt').addEventListener('click', () => {
  console.log('hello vscode!')
  ipc.send('window-close');

})

<div class="se-preview-section-delimiter"></div>

4.在主进程中调相应的方法

const electron = require('electron')
const ipc = electron.ipcMain
//登录窗口最小化
ipc.on('window-min',function(){
  mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max',function(){
  if(mainWindow.isMaximized()){
      mainWindow.restore();  
  }else{
      mainWindow.maximize(); 
  }
})
ipc.on('window-close',function(){
  mainWindow.close();
})

提示
ipc不适合大数据通讯，最好只做命令的传递

HY_358116732

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
Electron 无边框窗口最大化最小化关闭功能

目的实现无边框窗口，并添加最大化最小化和关闭功能前提了解Electron 主进程和渲染进程的通讯了解 BrowserWindow相关功能操作流程1.首先创建一个无边框的Window窗口创建win的时候指定frame：falsevar win = new BrowserWindow({ transparent: true, frame: false})2.在界面上...
复制链接

扫一扫