前幾篇文章，我們介紹了一些開發中經常用到的功能，這篇文章我們主要是講解下怎么發送系統通知，設置托盤

1.系統通知

其實Electron的系統通知比較簡單，是用HTML5的Notification實現的，但是在這兒需要注意的是，windows平臺發送通知是需要為程序設置appId（下一篇文章我們講解下Electron怎么打包，怎么設置應用程序圖標）。

通知一共有兩種調用方式

• HTML5 Notification API（渲染進程中使用）
• Notification模塊（主進程中使用）

接下來，我們新建一個頁面，來測試下渲染進程中怎么使用系統通知。

<template>
  <div>
    <el-button @click="sendNotification">發送系統通知</el-button>
  </div>
</template>
<script>
export default {
  name: 'DemoTest',
  methods: {
    sendNotification () {
      const myNotification = new Notification('標題', {
        body: '通知正文內容'
      })
      myNotification.onclick = () => {
        console.log('通知被點擊')
      }
    }
  }
}
</script>

系統通知

2.設置托盤

托盤屬于系統級的操作，所有這個也是在主進程中設置的。在這個需要注意的是，設置托盤必須在程序ready之后。

我們為程序設置了托盤圖標和菜單。點擊托盤圖標重新展示主窗口。

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
  }
  // 設置托盤
  const tray = new Tray('./src/assets/icon_tray.png')
  // 設置托盤菜單
  const trayContextMenu = Menu.buildFromTemplate([
    {
      label: '打開',
      click: () => {
        win.show()
      }
    }, {
      label: '退出',
      click: () => {
        app.quit()
      }
    }
  ])
  tray.setToolTip('myApp')
  tray.on('click', () => {
    win.show()
  })
  tray.on('right-click', () => {
    tray.popUpContextMenu(trayContextMenu)
  })
  // 創建渲染窗口
  createWindow()
})

還有一點需要注意的是，我們之前的文章中，點擊自定義的關閉圖標，調用的方法是

app.close()

這樣會導致我們直接關閉程序，點擊托盤也會報錯，所以我們這兒需要改為

app.hide()

好了，本篇文章的所有內容就講完了，下一篇文檔來教大家怎么打包應用和設置應用圖標