electron 建立托盘应用

时间 2019-11-05

标签 electron 建立托盘应用繁體版

原文原文链接

在Electron中咱们建立一个托盘须要以下几个文件：javascript

1. main.js 用来存放应用代码。
2. 一张PNG格式的图片用做应用图标。
3. 一个package.json文件用来描述应用配置。css

下面是咱们项目的目录架构以下：html

|--- 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 代码以下：java

{
  "name": "tray-app-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    
  },
  "author": "kongzhi",
  "license": "ISC",
  "dependencies": {
    "electron": "^6.0.0"
  }
}

main.js 代码以下：node

'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 代码以下的函数：git

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内容了。github

electron的ipcRenderer模块能够发送以及接收来自或传递给Electron main 进程的数据，在托盘应用上下文中，后端进程经过 web contents API将数据传递给浏览器视窗，所以， displayNote事件以及note对象由后端传递给前端，ipcRenderer则监听该事件。当事件触发的时候，ipcRenderer会获取到note对象并将其传递给负责将笔记内容插入到html的函数。web

当咱们运行 electron . 的时候，咱们会在咱们的mac系统顶部有一个图标，以下所示：json

同时也会打开一个托盘这样的，以下图所示：

当咱们点击图标的时候，它会有一个列表，以下图所示：

当咱们点击 xxx 列表项的时候，托盘内容就会显示 xxxx 对应的内容了，以下图所示：

当咱们切换到 todo list 列表的时候，就会显示 todo list 对应的内容了，以下图所示：

更多的系统托盘知识，请看官网API (https://electronjs.org/docs/api/tray)

github-demo 源码查看