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;
// 当所有窗口被关闭了，退出。
app.on('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 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
// 获取屏幕宽高 可以在创建窗口时传入，这样就可以让初始屏幕全屏
const { width, height } = screen.getPrimaryDisplay().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'}));
mainWindow.webContents.on('context-menu', (e, params) => {
menu.popup({window: mainWindow, x: params.x, y: params.y});
})
// 设置系统托盘（系统图标）底部菜单小三角里的图标，而不是底部菜单的图标
const icon = nativeImage.createFromPath('./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, {
type: 'warning',
title: '消息框' + app.name,
icon: './image/img1.png',
defaultId: 0,
cancelId: 1,
message: '你确定要退出？',
buttons: ['退出', '取消']
}).then(r => {
if(r.response === 0) {
app.exit();
} else {
console.log(r.response);
}
})
// 打开开发工具
mainWindow.openDevTools();
// 当 window 被关闭，这个事件会被发出
mainWindow.on('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 = document.getElementById(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: '互联网' } ] } ] module.exports = template
-
