electron 创建托盘应用
在Electron中我们创建一个托盘需要如下几个文件：
1. main.js 用来存放应用代码。
2. 一张PNG格式的图片用作应用图标。
3. 一个package.json文件用来描述应用配置。
下面是我们项目的目录架构如下：
|--- electron-demo5
| |--- node_modules
| |--- app.css
| |--- app.js
| |--- main.js
| |--- icon@2x.png
| |--- index.html
| |--- package.json
index.html 是用来展示笔记的内容，如下html代码：
<html>
<head>
<title>tray-app-electron</title>
<link href="./app.css" rel="stylesheet" />
</head>
<body>
<h1 id="app"></h1>
<div id="contents"></div>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>
package.json 代码如下：
{
"name": "tray-app-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
},
"author": "kongzhi",
"license": "ISC",
"dependencies": {
"electron": "^6.0.0"
}
}
main.js 代码如下：
'use strict';
const { app, Menu, Tray, BrowserWindow } = require('electron')
let appIcon = null;
let mainWindow = null;
const notes = [
{
title: 'todo list',
contents: '111111'
},
{
title: 'xxxxx',
contents: '2222'
}
];
function displayNote (note) {
// 使用 webContents API 向浏览器窗口发送数据来显示笔记内容
mainWindow.webContents.send('displayNote', note);
}
function addNoteToMenu (note) {
return {
label: note.title,
type: 'normal',
click: () => {
displayNote(note);
}
}
}
app.on('ready', () => {
// 创建一个带图标的托盘应用
appIcon = new Tray('icon@2x.png');
// 为托盘应用创建上下文菜单，对笔记进行迭代并添加为菜单项
let contextMenu = Menu.buildFromTemplate(notes.map(addNoteToMenu));
appIcon.setToolTip('Notes app');
// 将上下文菜单绑定到托盘应用上
appIcon.setContextMenu(contextMenu);
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 添加如下代码 可以调试
mainWindow.webContents.openDevTools();
mainWindow.loadURL(`file://${__dirname}/index.html`);
// 当应用视窗加载好后，默认显示第一个笔记内容
mainWindow.webContents.on('dom-ready', () => {
displayNote(notes[0]);
});
});
如上代码就创建了一个托盘应用，以及它的菜单， 同时BrowserWindow负责显示笔记内容，当我们的菜单笔记项被单击的时候，就会调用我们的 app.js 代码如下的函数：
function displayNote(event, note) {
document.getElementById("app").innerText = note.title;
document.getElementById("contents").innerText = note.contents;
}
// Electron 的 ipcRenderer模块监听由后端进程触发的事件
const ipc = require('electron').ipcRenderer;
/*
菜单项被单击或当应用加载的时候，ipcRenderer模块会接收到事件以及note对象并将其
传递给 displayNote 函数
*/
ipc.on('displayNote', displayNote);
如上代码，会使用 electron中的ipcRenderer模块来接收displayNote事件以及由main进程传递给renderer进程的note对象。这样我们就可以在 BrowserWindow 进程中更新HTML内容了。
electron的ipcRenderer模块可以发送以及接收来自或传递给Electron main 进程的数据，在托盘应用上下文中，后端进程通过 web contents API将数据传递给浏览器视窗，因此， displayNote事件以及note对象由后端传递给前端，ipcRenderer则监听该事件。当事件触发的时候，ipcRenderer会获取到note对象并将其传递给负责将笔记内容插入到html的函数。
当我们运行 electron . 的时候，我们会在我们的mac系统顶部有一个图标，如下所示：
同时也会打开一个托盘这样的，如下图所示：
当我们点击图标的时候，它会有一个列表，如下图所示：
当我们点击 xxx 列表项的时候，托盘内容就会显示 xxxx 对应的内容了，如下图所示：
当我们切换到 todo list 列表的时候，就会显示 todo list 对应的内容了，如下图所示：
更多的系统托盘知识，请看官网API (https://electronjs.org/docs/api/tray)
electron 创建托盘应用的更多相关文章
- Electron - 创建跨平台的桌面客户的应用程序
Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...
- （译）通过 HTML、JS 和 Electron 创建你的第一个桌面应用
原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面 ...
- Electron 创建一个空白的界面
添加应用 首先添加一个Lorikeet版本的Electron应用. 'use strict' const electron = require('electron'); const app = ele ...
- nodejs electron 创建桌面应用
//首先安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org //使用cnpm进行安装,使用方法和npm相同 cn ...
- electron 创建右键菜单
1.引入模块 const Electron = require('electron'); const remote = Electron.remote; const Menu = remote.Men ...
- electron 创建窗口2
/** * 窗口管理类,单例,负责创建所有窗口,保存窗口实例 */ const path = require('path'); const os = require('os'); const EucW ...
- electron创建窗口常用配置参数
{ "width": 800,//指定窗口的宽度,单位: 像素值. 默认是 800 "height":600,//指定窗口的高度,单位: 像素值,. 默认是 6 ...
- electron 系统托盘 单击 双击事件冲突解决方法
部分代码 // 任务栏点击事件 let timeCount = 0 tray.on('click', function (Event) { setTimeout(() => { if (time ...
- 【Electron】Electron开发入门（二）：创建项目Hello Word
创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文 ...
随机推荐
- 【转】 AOP（面向切面编程）、Filter（过虑器）、Interceptor（拦截器）
AOP(面向切面编程) 面向切面编程(AOP是Aspect Oriented Program的首字母缩写) ,我们知道,面向对象的特点是继承.多态和封装.而封装就要求将功能分散到不同的对象中去,这在软 ...
- vue_04 练习
目录 vue_项目初始: car.vue Nav.vue: cardata.vue vue_项目初始: 1.Home.vue页面组件显示基本信息:欢迎来到汽车系统 Car.vue页面组件,完成Cars ...
- Mac操作：Mac系统移动鼠标显示桌面（移动鼠标到角落）
很多朋友都发现,有的人在用Mac的时候,鼠标一划就可以显示桌面,或者显示Launchpad.其实很简单,下面就介绍这个方法. 首先打开系统偏好设置: 然后点击红色圈中的图标:MissionContro ...
- 论文阅读: v-charge项目: 电动车的自动泊车和充电
Abstract AVP服务会缓和电动车现有两个缺点: 有限的行驶范围和很长的充电时间. v-charge用相机和超声波在GPS-denied的区域全自动形式. 这篇paper叙述了下述几方面的优势: ...
- JeeSite | 访问控制权限
在各种后台系统中都会涉及到权限的管控,从功能权限的管控,到数据权限的管控,都是为了让系统的在使用的过程中更加的安全.功能权限管控是对针对不同的角色可以进行不同的功能操作,而数据权限管控是针对不同的角色 ...
- vuex 源码分析(七) module和namespaced 详解
当项目非常大时,如果所有的状态都集中放到一个对象中,store 对象就有可能变得相当臃肿. 为了解决这个问题,Vuex允许我们将 store 分割成模块(module).每个模块拥有自己的 state ...
- Vue.js 源码分析(一) 代码结构
关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...
- C#猜测识别文件编码
项目 gitee地址:https://gitee.com/dhclly/IceDog.SmallProject/tree/master/src/IceDog.SmallProject.CodeConv ...
- webstorm关闭烦人的eslint语法检查
使用了eslint语法检查之后发现JS代码里面处处是红线,通过右键菜单中的fix eslint problems选项又会发现页面代码的格式被eslint换行得不分青红皂白,索性关闭exlint语法检查 ...
- SAP 如何得到交货单上的序列号清单？
SAP 如何得到交货单上的序列号清单? 以内向交货单为例(外向交货单方法了类似)予以说明. 1)VL33N,在交货单显示界面, 但是没办法通过这个界面里导出序列号清单. 2),只能通过查表的方式导出序 ...