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

相关推荐
EndingCoder35 分钟前
打包应用:使用 Electron Forge
前端·javascript·性能优化·electron·前端框架·打包·electron forge
胖墩会武术42 分钟前
由浅及深:扫描电子显微镜(Scanning Electron Microscope,SEM)
人工智能·electron
li357410 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
EndingCoder1 天前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
EndingCoder2 天前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
至善迎风2 天前
使用国内镜像源解决 Electron 安装卡在 postinstall 的问题
前端·javascript·electron
mit6.8242 天前
[Upscayl图像增强] docs | 前端 | Electron工具(web->app)
前端·人工智能·electron·状态模式
小妖6662 天前
怎么用 tauri 创建一个桌面应用程序(Electron)
前端·javascript·electron
EndingCoder2 天前
单元测试:Jest 与 Electron 的结合
javascript·electron·单元测试·前端框架
小浣熊喜欢揍臭臭2 天前
react+umi项目如何添加electron的功能
javascript·electron·react