Electron - Menu
Các ứng dụng dành cho máy tính để bàn có hai loại menu - application menu(trên thanh trên cùng) và một context menu(nhấp chuột phải vào menu). Chúng ta sẽ học cách tạo cả hai trong chương này.
Chúng tôi sẽ sử dụng hai mô-đun - mô-đun Menu và mô-đun MenuItem . Lưu ý rằng Menu và các mô-đun MenuItem chỉ khả dụng trong quy trình chính. Để sử dụng các mô-đun này trong quá trình kết xuất, bạn cần có mô-đun từ xa . Chúng ta sẽ gặp điều này khi chúng ta tạo menu ngữ cảnh.
Bây giờ, chúng ta hãy tạo một main.js tệp cho quy trình chính -
const {app, BrowserWindow, Menu, MenuItem} = 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
}))
}
const template = [
{
label: 'Edit',
submenu: [
{
role: 'undo'
},
{
role: 'redo'
},
{
type: 'separator'
},
{
role: 'cut'
},
{
role: 'copy'
},
{
role: 'paste'
}
]
},
{
label: 'View',
submenu: [
{
role: 'reload'
},
{
role: 'toggledevtools'
},
{
type: 'separator'
},
{
role: 'resetzoom'
},
{
role: 'zoomin'
},
{
role: 'zoomout'
},
{
type: 'separator'
},
{
role: 'togglefullscreen'
}
]
},
{
role: 'window',
submenu: [
{
role: 'minimize'
},
{
role: 'close'
}
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More'
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
app.on('ready', createWindow)
Chúng tôi đang xây dựng một menu từ một mẫu ở đây. Điều này có nghĩa là chúng tôi cung cấp menu dưới dạng JSON cho hàm và nó sẽ lo phần còn lại. Bây giờ chúng ta phải đặt menu này làm menu Ứng dụng.
Bây giờ, hãy tạo một tệp HTML trống có tên là index.html và chạy ứng dụng này bằng cách sử dụng -
$ electron ./main.js
Trên vị trí bình thường của các menu ứng dụng, bạn sẽ thấy một menu dựa trên mẫu trên.
Chúng tôi đã tạo menu này từ quy trình chính. Bây giờ chúng ta hãy tạo một menu ngữ cảnh cho ứng dụng của chúng ta. Chúng tôi sẽ thực hiện việc này trong tệp HTML của mình -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Menus</title>
</head>
<body>
<script type = "text/javascript">
const {remote} = require('electron')
const {Menu, MenuItem} = remote
const menu = new Menu()
// Build menu one item at a time, unlike
menu.append(new MenuItem ({
label: 'MenuItem1',
click() {
console.log('item 1 clicked')
}
}))
menu.append(new MenuItem({type: 'separator'}))
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
menu.append(new MenuItem ({
label: 'MenuItem3',
click() {
console.log('item 3 clicked')
}
}))
// Prevent default action of right click in chromium. Replace with our menu.
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
menu.popup(remote.getCurrentWindow())
}, false)
</script>
</body>
</html>
Chúng tôi đã nhập các mô-đun Menu và MenuItem bằng mô-đun từ xa; sau đó, chúng tôi tạo một menu và nối từng menu của chúng tôi vào đó. Hơn nữa, chúng tôi đã ngăn hành động nhấp chuột phải mặc định trong chromium và thay thế nó bằng menu của chúng tôi.
Việc tạo menu trong Electron là một công việc rất đơn giản. Bây giờ bạn có thể đính kèm trình xử lý sự kiện của mình vào các mục này và xử lý các sự kiện theo nhu cầu của bạn.