electron右键菜单、托盘、通知、应⽤菜单、⽂件菜单浏览、确
认对话框
-
这次把electron更新到了当前最新版本：16.0.6
需要⽤yarn命令安装，否则node install.js容易安装失败；
这次主要熟悉：预加载⽂件(preload)、菜单设置（Menu MenuItem）、导航设置、系统通知框（Notification）、消息框、确认框（(dialog）、托盘（tray）、
⽬录结构：
pakage.json:
{
"name": "electronTest",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^16.0.6"
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 安全设置 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<span>chrome-version:</span>
<h1 id="chrome-version"></h1>
<span>node-version:</span>
<h1 id="node-version"></h1>
<span>electron-version:</span>
<h1 id="electron-version"></h1>
<script>
console.log('html 页⾯js执⾏');
</script>
</body>
</html>
main.js
const { app, BrowserWindow, Notification, Menu, MenuItem, Tray, nativeImage, dialog, screen } = require('electron') const path = require('path')
const menuTemplate = require('./data/menuTemplate')
// 保持⼀个对于 window 对象的全局引⽤，不然，当 JavaScript 被 GC，
// window 会被⾃动地关闭
var mainWindow = null;
// 当所有窗⼝被关闭了，退出。
<('window-all-closed', function() {
// 在 OS X 上，通常⽤户在明确地按下 Cmd + Q 之前
// 应⽤会保持活动状态
if (process.platform != 'darwin') {
app.quit();
}
});
/
/ 调⽤系统通知
const NOTIFICATION_TITLE = '通知标题'
const NOTIFICATION_BODY = '通知内容'
function showNotification () {
new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).show()
}
// 当 Electron 完成了初始化并且准备创建浏览器窗⼝的时候
// 这个⽅法就被调⽤
<('ready', function() {
// 获取屏幕宽⾼可以在创建窗⼝时传⼊，这样就可以让初始屏幕全屏
const { width, height } = PrimaryDisplay().workAreaSize;
console.log(process.platform, 'process.platform');
// Menu.setApplicationMenu(null) //取消菜单栏
// 创建浏览器窗⼝。
mainWindow = new BrowserWindow({
width: 800,
height: 800,
// frame: false, // windows下隐藏导航栏
// titleBarStyle: 'hidden', // mac下隐藏导航栏
webPreferences: {
nodeIntegration: true, // 是否启⽤Node integration. 5.0以后默认值为 false.
contextIsolation: false, // 设置为false后，才能在渲染进程使⽤Electron API
preload: path.join(__dirname, 'preload.js')
}
});
// 加载应⽤的 index.html
// mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.loadFile('index.html');
// 定义菜单
const menu = new Menu();
menu.append(new MenuItem({label: '复制', role: 'copy'}));
menu.append(new MenuItem({label: '粘贴', role: 'paste'}));
menu.append(new MenuItem({label: '刷新', role: 'reload'}));
menu.append(new MenuItem({label: '全选', role: 'selectall'}));
menu.append(new MenuItem({label: '剪切', role: 'cut'}));
menu.append(new MenuItem({label: '删除', role: 'delete'}));
menu.append(new MenuItem({label: '取消', role: 'undo'}));
menu.append(new MenuItem({label: '重置', role: 'redo'}));
('context-menu', (e, params) => {
menu.popup({window: mainWindow, x: params.x, y: params.y});
})
// 设置系统托盘（系统图标）底部菜单⼩三⾓⾥的图标，⽽不是底部菜单的图标
const icon = ateFromPath('./image/img1.png');
const tray = new Tray(icon);
/
/ 给图⽚图标加上右键菜单
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
])
tray.setContextMenu(contextMenu);
// 给托盘加个⼯具提⽰或标题
tray.setToolTip('This is my application')
tray.setTitle('This is my title');
/
/ 确认框
dialog.showOpenDialog(mainWindow, {
properties: ['openFile'],
filters:[
{name: 'Images', extensions: ['jpg', 'png', 'gif']},
{name: 'Movies', extensions: ['mkv', 'avi', 'mp4']},
{name: 'Custom File Type', extensions: ['as']},
{name: 'All Files', extensions: ['*']}
]
}).then(result => {
console.log(result.canceled)
console.log(result.filePaths)
}).catch(err => {
console.log(err)
})
// 消息框
dialog.showMessageBox(mainWindow, {
js导航栏下拉菜单type: 'warning',
title: '消息框' + app.name,
icon: './image/img1.png',
defaultId: 0,
cancelId: 1,
message: '你确定要退出？',
buttons: ['退出', '取消']
}).then(r => {
sponse === 0) {
} else {
console.sponse);
}
})
// 打开开发⼯具
mainWindow.openDevTools();
/
/ 当 window 被关闭，这个事件会被发出
<('closed', function() {
// 取消引⽤ window 对象，如果你的应⽤⽀持多窗⼝的话，// 通常会把多个 window 对象存放在⼀个数组⾥⾯，
// 但这次不是。
mainWindow = null;
});
// 通知
showNotification()
});
// 设置系统菜单
const list = Menu.buildFromTemplate(menuTemplate) Menu.setApplicationMenu(list);
preload.js
console.log('预加载⽂件执⾏')
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = ElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
data/menuTemplate.js
const template = [
{
label: '⾸页'
},
{
label: '新闻资讯',
submenu: [
{
label: '国内新闻',
submenu: [
{
label: '北京新闻'
}, {
label: '河南新闻'
}
]
},
{
label: '国际新闻'
}
]
},
{
label: '娱乐',
submenu: [
{
label: '⾳乐'
}, {
label: '电影'
}, {
label: '综艺'
}
]
},
{
label: '科技',
submenu: [
{
label: 'Al'
},
{
label: '⼿机'
},
{
label: '互联⽹'
}
]
}
]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。