
wnd.gif
多窗口是不可或缺的, 而Electron創(chuàng)建多標(biāo)簽也非常的簡(jiǎn)單,下面是一個(gè)簡(jiǎn)單的演示demo
渲染進(jìn)程代碼(index.html):
const { remote } = require("electron");
let BrowserWindow = remote.BrowserWindow;
//獲取當(dāng)前窗口坐標(biāo),實(shí)現(xiàn)打開(kāi)窗口偏移
let x, y;
const curWnd = BrowserWindow.getFocusedWindow();
if (curWnd) {
const [curWndX, curWndY] = curWnd.getPosition();
x = curWndX + 10;
y = curWndY + 10;
}
//打開(kāi)遠(yuǎn)程頁(yè)面
let wnd_home = null;
document.getElementById("btn_home").onclick = function () {
wnd_home = new BrowserWindow({ width: 1024, height: 768, show: false, x: x, y: y })
wnd_home.loadURL("http://jiweiv.cn");
wnd_home.once('ready-to-show', () => {
wnd_home.show()
})
wnd_home.on("close", function () {
wnd_home = null;
})
}
//打開(kāi)本地頁(yè)面
let wnd_local = null;
document.getElementById("btn_local").onclick = function () {
wnd_local = new BrowserWindow({ width: 1024, height: 768, show: false, x: x, y: y })
wnd_local.loadURL(`file://${__dirname}/about.html`);
wnd_local.once('ready-to-show', () => {
wnd_local.show()
})
wnd_local.on("close", function () {
wnd_local = null;
})
}
about.html代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>關(guān)于我</title>
</head>
<body>
<h1>我的第一個(gè)應(yīng)用!</h1>
</body>
</html>