桌面应用电子版完整开发人员指南--Part 4

目录

前言

1.下载zip

2.创建index.js文件

3.隐藏窗口顶部部分内容

4.右下角图标控制其出现or隐藏

5.点击图标时出现在右下角

6.点击图标时出现位置改变

7.鼠标滑至图标时出现‘Timer App’及右键图标出现Quit，点击可退出

8.点击别的窗口会自动关闭该应用

获取本文代码

---

前言

     本文为整理记录学习桌面应用电子版完整开发人员指南第4部分的笔记。图片清晰度可能不够高，希望这不影响您的观看体验。如果有任何错误，请随时指出，感谢您的阅读

1.下载zip

链接：https://github.com/StephenGrider/ElectronCode

2.创建index.js文件

const path = require('path');

const { app, BrowserWindow} = electron;

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 500,
    width: 300
  });
  mainWindow = loadURL(`file://${__dirname}/src/index.html`)

运行项目（cmd打开两个窗口，一个输入npm run electron，一个输入npm run start）

运行npm run electron

运行npm run start

3.隐藏窗口顶部部分内容

有改动的代码见图示意

完整代码

const path = require('path');

const { app, BrowserWindow} = electron;

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 500,
    width: 300，
    frame: false,
    resizable: false
  });
  mainWindow = loadURL(`file://${__dirname}/src/index.html`)

运行项目

4.右下角图标控制其出现or隐藏

有改动的代码见图示意

完整代码

const path = require('path');
const electron = require('electron');

const { app, BrowserWindow, Tray} = electron;

let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 500,
    width: 300，
    frame: false,
    resizable: false,
    show: false
  });
  mainWindow = new MainWindow(`file://${__dirname}/src/index.html`)

  const iconName = process.platform === 'win32' ? 'windows-icon.png' : 'iconTemplate.png';
  const iconPath = path.join(__dirname, `./src/assets/${iconName}`);

  new Tray(iconPath);
  tray.on('click' ,() => {
    if(mainWindow.isVisible()){
        mainwindow.hide();
    } else {
        mainwindow.show();
    }
  })
});

5.点击图标时出现在右下角

有改动的代码见图示意

完整代码

const path = require('path');
const electron = require('electron');

const { app, BrowserWindow, Tray} = electron;

let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 500,
    width: 300，
    frame: false,
    resizable: false,
    show: false
  });
  mainWindow = new MainWindow(`file://${__dirname}/src/index.html`)

  const iconName = process.platform === 'win32' ? 'windows-icon.png' : 'iconTemplate.png';
  const iconPath = path.join(__dirname, `./src/assets/${iconName}`);

  new Tray(iconPath);
  tray.on('click' ,(event, bounds) => {
    const {x, y} = bounds;
    const {height, width } = mainWindow.getBounds();

    if(mainWindow.isVisible()){
        mainwindow.hide();
    } else {
        mainwindow.setBounds({
            x: x- width / 2;
            y: 170,
            height,
            width
    });
    mainWindow.show();
    }
  })
});

运行项目

6.点击图标时出现位置改变

index.js

有改动的代码见图示意

完整代码

const path = require('path');
const electron = require('electron');

const { app, BrowserWindow, Tray} = electron;

let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 500,
    width: 300，
    frame: false,
    resizable: false,
    show: false
  });
  mainWindow = new MainWindow(`file://${__dirname}/src/index.html`)

  const iconName = process.platform === 'win32' ? 'windows-icon.png' : 'iconTemplate.png';
  const iconPath = path.join(__dirname, `./src/assets/${iconName}`);

  new Tray(iconPath);
  tray.on('click' ,(event, bounds) => {
    const {x, y} = bounds;
    const {height, width } = mainWindow.getBounds();

    if(mainWindow.isVisible()){
        mainwindow.hide();
    } else {
        const yPosition = process.platform === 'darwin' ? y : y - height;
        mainwindow.setBounds({
            x: x- width / 2;
            y: yPosition,
            height,
            width
    });
    mainWindow.show();
    }
  })
});

运行项目

7.鼠标滑至图标时出现‘Timer App’及右键图标出现Quit，点击可退出

app文件夹下新建time_tray.js文件

const electron = require('electron');
const { Tray, app, Menu } = electron;

class TimerTray extends Tray {
    constructor(iconPath,mainWindow) {
        super(iconPath);

        this.mainWindow = mainWindow;

        this.setToolTip('Timer App');
        this.on('click', this.onClick.bind(this));
    }

    onClick(event, bounds) {
        const { x, y } = bounds;
        const { height, width } = this.mainWindow.getBounds();

        if (this.mainWindow.isVisible()) {
            this.mainWindow.hide();
        } else {
            const yPosition = process.platform === 'darwin' ? y : y - height;
            this.mainWindow.setBounds({
                x: x - width / 2,
                // y: 170,
                y: yPosition,
                height,
                width
            });
            this.mainWindow.show();
        }

    }

    onRightClick(){
        const menuConfig = Menu.buildFromTemplate([
            {
                label: 'Quit',
                click: () => app.quit()
            }
        ]);

        this.popUpContextMenu(menuConfig);
    }
}

module.exports = TimerTray;

修改index.js文件内容

完整代码

const path = require('path');
const electron = require('electron');
const TimerTray = require('./app/timer_tray');

const { app, BrowserWindow, Tray} = electron;

let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 500,
    width: 300，
    frame: false,
    resizable: false,
    show: false
  });
  mainWindow = new MainWindow(`file://${__dirname}/src/index.html`)

  const iconName = process.platform === 'win32' ? 'windows-icon.png' : 'iconTemplate.png';
  const iconPath = path.join(__dirname, `./src/assets/${iconName}`);
  
  tray = new TimerTray(iconPath,mainWindow);

  new Tray(iconPath);
  tray.on('click' ,(event, bounds) => {
    const {x, y} = bounds;
    const {height, width } = mainWindow.getBounds();

    if(mainWindow.isVisible()){
        mainwindow.hide();
    } else {
        const yPosition = process.platform === 'darwin' ? y : y - height;
        mainwindow.setBounds({
            x: x- width / 2;
            y: yPosition,
            height,
            width
    });
    mainWindow.show();
    }
  })
});

运行项目

8.点击别的窗口会自动关闭该应用

修改index.js文件内容

完整代码

const path = require('path');
const electron = require('electron');
const TimerTray = require('./app/timer_tray');

const { app, BrowserWindow, Tray} = electron;

let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 500,
    width: 300，
    frame: false,
    resizable: false,
    show: false
  });
  mainWindow.loadURL(`file://${__dirname}/src/index.html`)
  mainWindow.on('blur', () => {
    mainWindow.hide();
  });

  const iconName = process.platform === 'win32' ? 'windows-icon.png' : 'iconTemplate.png';
  const iconPath = path.join(__dirname, `./src/assets/${iconName}`);
  
  tray = new TimerTray(iconPath,mainWindow);

  new Tray(iconPath);
  tray.on('click' ,(event, bounds) => {
    const {x, y} = bounds;
    const {height, width } = mainWindow.getBounds();

    if(mainWindow.isVisible()){
        mainwindow.hide();
    } else {
        const yPosition = process.platform === 'darwin' ? y : y - height;
        mainwindow.setBounds({
            x: x- width / 2;
            y: yPosition,
            height,
            width
    });
    mainWindow.show();
    }
  })
});

运行项目

获取本文代码

     见本文顶部