[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>Documenttitle>
    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();
})

使服务器托管网用 Menu.setApplicationMenu(null); 即可

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 【Delphi】IDE 工具栏错乱恢复

由于经常会在4K和2K显示器上切换Delphi开发环境(IDE)，导致IDE工具栏错乱，咋样设置都无法恢复，后来看到红鱼儿的博客，说是通过操作注册表的方法，能解决，试了一下，果真好用，非常感谢分享。今天我也分享出来，期望能够帮助更多朋友。具体操作方法： 1.打…