SoftHub关联区 - Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）[zt]

您的位置：首页 >> SoftHub关联区 >> 主题: Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）[zt] [回主站] [分站链接]

您的位置：首页 >> SoftHub关联区 >> 主题: Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）[zt] [最新] [回主站]

Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）[zt]

clq

浏览(299) - 2022-10-11 09:59:07 发表编辑

关键字:

https://www.jianshu.com/p/adf819473911

Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）
最进
0.11
2021.10.18 17:33:36
字数 668阅读 4,303

最近刚开始上手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无边框窗口（自定义最小化、最大化、关闭、可拖拽）的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~

总数：0　页次：1/0　首页尾页　　

所在合集/目录

发表评论:

本帖子属于以下条目()

NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.