Electron无边框窗口(自定义最小化、最大化、关闭、可拖拽)

最近刚开始上手electron,就遇到了各种问题。在此作者记录一下,有需要的朋友也可以来看一看,
看是否能解决你自己的问题。

这是electron的官网,小伙伴们想学习的可以去看一看
https://www.electronjs.org

从官网上荡下来的项目是有边框的,就跟浏览器一样,我们可以检查。
但是如何去掉边框呢。我上网查了查

// frame:false(加这一句就行)
mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
       preload: path.join(__dirname, 'preload.js')
    }
  })

接下来就是解决自定义最大化等问题了
这是我从网上找到的比较靠谱的博主的文章了,给大家分享一下
https://www.cnblogs.com/mica/p/10794751.html

总结起来就是要新添加(main.js)

const {
  app,
  BrowserWindow,
  ipcRenderer,
  ipcMain
} = require('electron')

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

新添加(renderer.js)

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');

})

新添加(index.html)


    

但是遇到了 一个问题 (require不识别)
上网找了很多方法,都说要加一个nodeIntegration: true,就可以解决问题
可是我的问题没有得到解决,可能我用的是最新版的缘故把
这是我千辛万苦找到的一个能解决问题的博主的文章
https://blog.csdn.net/adley_app/article/details/118143784

试了试会报一个mainWindow找不到的错误,
仔细看了下原因,是因为是const
于是 我改变了他的数据类型用 var

后面又遇到了一个问题 就是 同时打开了 两个页面
(我先开始还纳闷为什么放大最小化都能生效,为什么关闭不生效呢)
后面我把下面的东西给注了,成功了

// app.whenReady().then(() => {
//   createWindow()

//   app.on('activate', function () {
//     // On macOS it's common to re-create a window in the app when the
//     // dock icon is clicked and there are no other windows open.
//     if (BrowserWindow.getAllWindows().length === 0) createWindow()
//   })
// })

关于可拖拽,我也是查了查。最简单的就是给你所想要拖拽的最外层盒子加一个这样的属性

-webkit-app-region: drag;

我起初加在了行内样式,也就是这样,发现不起作用。



于是我就找问题
发现只能加在css中,
于是我就改成了这样

body{
    -webkit-app-region: drag;
}

发现可用,并且需要将其中需要点击的东西标记为不可拖拽,否则用户将无法点击他们
下面给大家发一个完整的css(style.css),我里面也就button能点击

/* styles.css */
html,body{
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    -webkit-app-region: drag;
    -webkit-user-select: none;
}
  
button{
    -webkit-app-region: no-drag;
}
/* Add styles here to customize the appearance of your app */

最后 给大家发一个完整版的(main,js)

// Modules to control application life and create native browser window
const {
  app,
  BrowserWindow,
  ipcRenderer,
  ipcMain
} = require('electron')
const path = require('path')
var mainWindow
function createWindow() {
  // Create the browser window.
   mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
      // preload: path.join(__dirname, 'preload.js')
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// app.whenReady().then(() => {
//   createWindow()

//   app.on('activate', function () {
//     // On macOS it's common to re-create a window in the app when the
//     // dock icon is clicked and there are no other windows open.
//     if (BrowserWindow.getAllWindows().length === 0) createWindow()
//   })
// })

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.


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

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

以上就是设置Electron无边框窗口(自定义最小化、最大化、关闭、可拖拽)的方法了
如果这篇文章对你有帮助,或者在进行中遇到其他问题,欢迎评论区留言出来。
我们一起探讨~

你可能感兴趣的:(Electron无边框窗口(自定义最小化、最大化、关闭、可拖拽))