優雅的顯示窗口
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>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>
*{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); 即可
-----＞E. Cardboard for Pictures)
)
