[electron]窗口 BrowserWindow

优雅的显示窗口

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

相关推荐
tuuuuuun14 小时前
Electron 缓存数据共享同步
vue.js·electron
_AaronWong18 小时前
Electron全局搜索框实战:快捷键调起+实时高亮+多窗口支持
前端·搜索引擎·electron
美酒没故事°19 小时前
旧vue3项目集成electron
前端·javascript·electron
ら陈佚晨19 小时前
electron在windows系统上如何进行用户授权
javascript·windows·electron·认证·授权
GISer_Jing19 小时前
大前端——Taro、React-Native、Electron 大前端
前端·javascript·electron·taro
丰年稻香19 小时前
Electron 安全实践:渲染进程如何安全使用主进程的三方库能力
javascript·安全·electron
秋田君20 小时前
Electron 安装踩坑实录
前端·javascript·electron
tuuuuuun4 天前
Electron 子窗口管理
electron·vue-router
Junsen4 天前
electron窗口层级与dock窗口列表
前端·electron
红尘散仙4 天前
使用 Tauri Plugin-Store 实现 Zustand 持久化与多窗口数据同步
前端·rust·electron