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

相关推荐
卸任2 天前
Electron自制翻译工具:增加中英互译
前端·react.js·electron
皓子3 天前
海狸IM桌面端:AI辅助开发的技术架构实践
前端·electron·ai编程
xiaobangsky5 天前
Electron桌面应用下,在拍照、展示pdf等模块时,容易导致应用白屏
javascript·electron
就是我5 天前
Electron多窗口应用实战
前端·javascript·electron
我怎么能这么帅气5 天前
从“文件失踪案”说起:Electron 中 getAppPath 和 getPath 的妙用
前端·javascript·electron
集成显卡8 天前
图片压缩工具 | Electron+Vue3+Rsbuild开发桌面应用
前端·javascript·electron·vue
朝阳398 天前
Electron-vite【实战】MD 编辑器 -- 系统菜单(含菜单封装,新建文件,打开文件,打开文件夹,保存文件,退出系统)
electron·编辑器
朝阳399 天前
Electron-vite【实战】MD 编辑器 -- 文件列表(含右键快捷菜单,重命名文件,删除本地文件,打开本地目录等)
electron·编辑器
HCl+NaOH=NaCl+H_2O9 天前
quasar electron mode如何打包无边框桌面应用程序
前端·javascript·electron
屋昂仼9 天前
Electron 桌面程序读取dll动态库
前端·javascript·electron