[electron]窗口 BrowserWindow

优雅的显示窗口

const {app, BrowserWindow} = require('electron');function createMainwindow(){const mainwindow = new BrowserWindow({x: 300,y: 400,width: 600,height: 600,});mainwindow.loadFile('index.html');
}app.on('ready', ()=>{createMainwindow();
});

对于这样的代码，出现的一个情况就是。当窗口创建好了，等了一会界面的内容才出来。这是因为 BrowserWindow 默认就是直接显示的。所以可以使用如下方法

const {app, BrowserWindow} = require('electron');function createMainwindow(){const mainwindow = new BrowserWindow({x: 300,y: 400,width: 600,height: 600,show: false,});mainwindow.loadFile('index.html');mainwindow.on('ready-to-show', ()=>{mainwindow.show();});}app.on('ready', ()=>{createMainwindow();
});

BrowserWinodw 的其它属性

BrowserWindow属性集合

自定义标题栏程序

官网介绍
主要代码

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.css">
</head>
<body><div id="titleBar"><input type="button" id="btn" value="退出程序"></div>life is fucking movie<script src="index.js"></script>
</body>
</html>

*{margin: 0px;padding: 0px;
}
#titleBar{height: 40px;border: 1px solid pink;-webkit-app-region: drag;
}
#btn{-webkit-app-region: no-drag;
}

就是这么简单而且能够实现拖拽全屏半屏1/4屏的效果

取消electron自带的菜单栏

const {app, BrowserWindow, ipcMain, Menu} = require('electron');function createMainwindow(){const mainwindow = new BrowserWindow({x: 300,y: 400,width: 600,height: 600,show: false,webPreferences: {preload: 'F:/electron/test2/preload.js'}});Menu.setApplicationMenu(null);mainwindow.loadFile('index.html');mainwindow.on('ready-to-show', ()=>{mainwindow.show();});
}app.on('ready', ()=>{createMainwindow();
});ipcMain.on('quit', ()=>{app.quit();
})