Electron - Khay hệ thống

Khay hệ thống là một menu bên ngoài cửa sổ ứng dụng của bạn. Trên MacOS và Ubuntu, nó nằm ở góc trên cùng bên phải của màn hình. Trên Windows, nó nằm ở góc dưới cùng bên phải. Chúng ta có thể tạo menu cho ứng dụng của mình trong khay hệ thống bằng Electron.

Tạo một cái mới main.jstệp và thêm mã sau vào nó. Chuẩn bị sẵn tệp png để sử dụng cho biểu tượng khay hệ thống.

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

Sau khi thiết lập một cửa sổ trình duyệt cơ bản, chúng tôi sẽ tạo một index.html tệp với nội dung sau:

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>
   <body>
      <script type = "text/javascript">
         const {remote} = require('electron')
         const {Tray, Menu} = remote
         const path = require('path')

         let trayIcon = new Tray(path.join('','/home/ayushgp/Desktop/images.png'))

         const trayMenuTemplate = [
            {
               label: 'Empty Application',
               enabled: false
            },
            
            {
               label: 'Settings',
               click: function () {
                  console.log("Clicked on settings")
               }
            },
            
            {
               label: 'Help',
               click: function () {
                  console.log("Clicked on Help")
               }
            }
         ]
         
         let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
         trayIcon.setContextMenu(trayMenu)
      </script>
   </body>
</html>

Chúng tôi đã tạo khay bằng cách sử dụng mô-đun con Khay. Sau đó, chúng tôi tạo một menu bằng cách sử dụng mẫu và thêm menu vào đối tượng khay của chúng tôi.

Chạy ứng dụng bằng lệnh sau:

$ electron ./main.js

Khi bạn chạy lệnh trên, hãy kiểm tra khay hệ thống để tìm biểu tượng bạn đã sử dụng. Tôi đã sử dụng một khuôn mặt cười cho ứng dụng của mình. Lệnh trên sẽ tạo ra kết quả sau: