在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)

github-demo 源码查看

electron 创建托盘应用的更多相关文章

  1. Electron - 创建跨平台的桌面客户的应用程序

    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...

  2. (译)通过 HTML、JS 和 Electron 创建你的第一个桌面应用

    原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面 ...

  3. Electron 创建一个空白的界面

    添加应用 首先添加一个Lorikeet版本的Electron应用. 'use strict' const electron = require('electron'); const app = ele ...

  4. nodejs electron 创建桌面应用

    //首先安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org //使用cnpm进行安装,使用方法和npm相同 cn ...

  5. electron 创建右键菜单

    1.引入模块 const Electron = require('electron'); const remote = Electron.remote; const Menu = remote.Men ...

  6. electron 创建窗口2

    /** * 窗口管理类,单例,负责创建所有窗口,保存窗口实例 */ const path = require('path'); const os = require('os'); const EucW ...

  7. electron创建窗口常用配置参数

    { "width": 800,//指定窗口的宽度,单位: 像素值. 默认是 800 "height":600,//指定窗口的高度,单位: 像素值,. 默认是 6 ...

  8. electron 系统托盘 单击 双击事件冲突解决方法

    部分代码 // 任务栏点击事件 let timeCount = 0 tray.on('click', function (Event) { setTimeout(() => { if (time ...

  9. 【Electron】Electron开发入门(二):创建项目Hello Word

    创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文 ...

随机推荐

  1. VScode Python 虚拟环境

    安装python环境 在VScode里设置Python 虚拟环境查找路径(Settings -> Extensions -> Python Configurations -> Env ...

  2. 补充: SpringBoot

    SpringBoot Spring Boot  约定大于配置 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程. 该框 ...

  3. Codeforces Rating System

    来翻译一下官方文档,但是建议看英文原文,本文可能会出现一些错误,虽然不是为了方便自己查阅用的. 首先,对于人 \(i\),定义 \(r_i\) 是他的 rating,对于人 \(i,j\),定义 \( ...

  4. Angular命令和基础操作

    本文档假设你已经熟悉了 HTML,CSS,JavaScript和来自最新标准的一些知识,比如类和模块. 一.Angular命令 命令语法: 大多数命令以及少量选项,会有别名.别名会显示在每个命令的语法 ...

  5. JavaScript计算日期前一天和后一天

    1.页面排版 <button onclick="before()">上一天</button> <button onclick="after( ...

  6. C# 中的浅拷贝与深拷贝

    Ø  简介 在 C# 中分为两种数据类型,值类型和引用类型.我们知道,值类型之间赋值是直接将值赋值给另一个变量,两个变量值的改变都互不影响:而引用类型赋值则是将引用赋值给另一个变量,其中一个变量中的成 ...

  7. Entity Framework 6 中如何获取 EntityTypeConfiguration 的 Edm 信息?(二)

    接着上一篇 直接贴代码了: using System; using System.Collections.Generic; using System.Data.Entity; using System ...

  8. C# 分布式自增ID算法snowflake(雪花算法)

    概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的.有些时候我们希望能使用一种简 ...

  9. Java问题记录——OutOfMemoryError

    Java问题记录——OutOfMemoryError 摘要:本文主要分析了OutOfMemoryError的产生原因. 没有分页导致占用大量内存 查看进程 使用 jps 命令查看当前运行的Java进程 ...

  10. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...