前幾篇文章祥国，我們介紹了一些開(kāi)發(fā)中經(jīng)常用到的功能，這篇文章我們主要是講解下怎么發(fā)送系統(tǒng)通知，設(shè)置托盤(pán)
1.系統(tǒng)通知
其實(shí)Electron的系統(tǒng)通知比較簡(jiǎn)單荒典，是用HTML5的Notification實(shí)現(xiàn)的，但是在這兒需要注意的是吞鸭，windows平臺(tái)發(fā)送通知是需要為程序設(shè)置appId（下一篇文章我們講解下Electron怎么打包寺董，怎么設(shè)置應(yīng)用程序圖標(biāo)）。
通知一共有兩種調(diào)用方式
- HTML5 Notification API（渲染進(jìn)程中使用）
- Notification模塊（主進(jìn)程中使用）
接下來(lái)刻剥，我們新建一個(gè)頁(yè)面遮咖，來(lái)測(cè)試下渲染進(jìn)程中怎么使用系統(tǒng)通知。
<template>
<div>
<el-button @click="sendNotification">發(fā)送系統(tǒng)通知</el-button>
</div>
</template>
<script>
export default {
name: 'DemoTest',
methods: {
sendNotification () {
const myNotification = new Notification('標(biāo)題', {
body: '通知正文內(nèi)容'
})
myNotification.onclick = () => {
console.log('通知被點(diǎn)擊')
}
}
}
}
</script>
2.設(shè)置托盤(pán)
托盤(pán)屬于系統(tǒng)級(jí)的操作造虏，所有這個(gè)也是在主進(jìn)程中設(shè)置的御吞。在這個(gè)需要注意的是麦箍，設(shè)置托盤(pán)必須在程序ready之后。
我們?yōu)槌绦蛟O(shè)置了托盤(pán)圖標(biāo)和菜單陶珠。點(diǎn)擊托盤(pán)圖標(biāo)重新展示主窗口挟裂。
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
}
// 設(shè)置托盤(pán)
const tray = new Tray('./src/assets/icon_tray.png')
// 設(shè)置托盤(pán)菜單
const trayContextMenu = Menu.buildFromTemplate([
{
label: '打開(kāi)',
click: () => {
win.show()
}
}, {
label: '退出',
click: () => {
app.quit()
}
}
])
tray.setToolTip('myApp')
tray.on('click', () => {
win.show()
})
tray.on('right-click', () => {
tray.popUpContextMenu(trayContextMenu)
})
// 創(chuàng)建渲染窗口
createWindow()
})
還有一點(diǎn)需要注意的是，我們之前的文章中背率，點(diǎn)擊自定義的關(guān)閉圖標(biāo)话瞧，調(diào)用的方法是
app.close()
這樣會(huì)導(dǎo)致我們直接關(guān)閉程序，點(diǎn)擊托盤(pán)也會(huì)報(bào)錯(cuò)寝姿，所以我們這兒需要改為
app.hide()
好了交排，本篇文章的所有內(nèi)容就講完了，下一篇文檔來(lái)教大家怎么打包應(yīng)用和設(shè)置應(yīng)用圖標(biāo)
