Electron第三篇--基础功能实现

前言

前面我们一起了解了什么是Electron,了解了如何进行进程通信。

想要了解的可以点击移步第一篇 《教你一键开发桌面应用程序》与第二篇《Electron第二篇--进程通信》

接下来,让我们干点儿PC桌面应用程序该干的事儿。窗口操作、托盘设置、防应用多开等等...Electron提供了完整的方法,让我们只需要简单的设置即可轻松实现

窗口操作

Electron提供了一套默认的窗口以及工具栏,如下图

这可能不是我们想要的。我们有UI图,我们想要定制化窗口工具栏。这里就需要在创建浏览器窗口的时候给与参数设置为无边框窗口。

 let win = new BrowserWindow({
        ...
        frame: false,
        ...
 })

紧接着,我们可以把顶部菜单按钮写在渲染进程中,再通过第二篇中的进程通信来实现窗口的一些列操作。

窗口最大最小化

窗口操作很简单,只需要拿到上面我们创建的浏览器窗口对象,调用其中内置的方法即可。因为渲染进程无法直接调用到主进程中的方法,因此需要进程通信,首先在主进程中注册事件:

// 1. 窗口 最小化
ipcMain.on('window-min', () => {
    win.minimize();
})

// 2. 窗口 最大化
ipcMain.on('window-max', () => {
    win.maximize();
})

然后在渲染进程中调用:

// 窗口最小化
window.ipcRenderer.send('window-min');
// 窗口最大化
window.ipcRenderer.send('window-max');
注:此处我是在preload中将ipcRenderer放到了window中,故有此写法。
窗口关闭
// 强制关闭窗口
win.destroy();
// 退出APP
app.quit();
    win.destory()可以强制关闭当前窗口。当然也可以使用app.quit()来关闭所有窗口。但是常常在业务中,我们可能想要的不是关闭,而是最小化到托盘。

 // 隐藏窗口
 win.hide();
 // 使窗口不显示在任务栏中
 win.setSkipTaskbar(true);
窗口置顶
// 当前是否为置顶状态
if (win.isAlwaysOnTop()) {
    // 取消置顶
    win.setAlwaysOnTop(false);
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', false);
} else {
    // 置顶
    win.setAlwaysOnTop(true);
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', true);
}

设置好了置顶,我们可以再给渲染层一个通知,来更改显示状态。另外你可能还需要注册一个方法,供渲染层随时调用获取当前的置顶状态。

ipcMain.on('get-window-top', () => {
    BrowserWindow.getFocusedWindow().webContents.send('alwaysOnTop', win.isAlwaysOnTop());
});

托盘设置

托盘就是window中菜单栏右侧的那一堆小图标了。
若不设置托盘,可能上面的最小化至托盘的方法执行完,你就只能在任务管理器中找到你的应用了。下面简单写了一个退出逻辑在托盘中。

let tray = new Tray('此处为ico图路径');
// 托盘右键菜单
const contextMenu = Menu.buildFromTemplate([
    {
        label: '退出', click: () => {
            win.destroy()
        }
    },
])
// 托盘点击事件
tray.on('click', () => {
    win.show();
})
tray.setToolTip('此处为鼠标hover时候的tip提示语')
tray.setContextMenu(contextMenu)

想要实现更多可以在contextMenu中拓展你的右键菜单。

防止应用多开

实际应用场景中你可能不希望用户每次双击桌面上的应用程序就打开一个新的应用窗口。我们可以在主进程中进行此设置,来禁止多次应用程序多次启动。

//此方法的返回值表示你的应用程序实例是否成功取得了锁  
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
//如果它取得锁失败,你可以假设另一个应用实例
//已经取得了锁并且仍旧在运行,并立即退出。
    app.quit()
}

总结

简单的设置使得应用程序越来越完善,Electron提供了非常多各式各样的实现方法,在文档中你可能也会有新的发现。对了,差点儿忘了还有一个重头呢。下一篇,我们来研究一下如何进行应用程序的更新。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容