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