[electron]窗口 BrowserWindow

无畏烧风2024-03-08 5:08

优雅的显示窗口

javascript 复制代码

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 默认就是直接显示的。所以可以使用如下方法

javascript 复制代码

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 复制代码

<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>

css 复制代码

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

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

取消electron自带的菜单栏

javascript 复制代码

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); 即可